{"id":402,"date":"2016-12-08T14:12:50","date_gmt":"2016-12-08T14:12:50","guid":{"rendered":"http:\/\/blog.platiniumhost.com\/?p=402"},"modified":"2016-12-13T15:46:43","modified_gmt":"2016-12-13T15:46:43","slug":"optimizar-su-sitio-web","status":"publish","type":"post","link":"https:\/\/platiniumhost.com\/blog\/optimizar-su-sitio-web\/","title":{"rendered":"Optimizar su sitio web"},"content":{"rendered":"

La velocidad y el rendimiento de su\u00a0p\u00e1gina web<\/a>\u00a0son muy importantes para asegurar una buena experiencia para sus clientes. Si su sitio es demasiado lento, no solo va a perder visitantes, sino tambi\u00e9n clientes potenciales.\u00a0 Los motores de b\u00fasqueda como Google utilizan la velocidad de carga de los sitios web como factor importante para el ranking de b\u00fasqueda,\u00a0 por lo que a la hora de optimizar su sitio deben tomarlo en consideraci\u00f3n. Recuerde que cada mil\u00e9sima de segundo cuenta.<\/p>\n

Estas son algunas sugerencias b\u00e1sicas y generales para mejorar el rendimiento de un sitio.<\/p>\n

    \n
  1. Aplazar la carga de contenido en la mayor medida posible<\/strong><\/li>\n<\/ol>\n

    Ajax nos permite crear p\u00e1ginas web que pueden ser actualizadas de forma asincr\u00f3nica en cualquier momento. Esto significa que en lugar de recargar toda la p\u00e1gina cuando un usuario realiza una acci\u00f3n, simplemente podemos actualizar partes de la p\u00e1gina.<\/p>\n

    Vamos a utilizar una galer\u00eda de im\u00e1genes como ejemplo. Los archivos de im\u00e1genes son grandes y pesados, y \u00a0pueden reducir la velocidad de carga de las p\u00e1ginas. En lugar de cargar todas las im\u00e1genes cuando un usuario visita la p\u00e1gina web, s\u00f3lo puede mostrar miniaturas de las im\u00e1genes y luego, cuando el usuario de clic en ellos, de forma as\u00edncrona puede solicitar las im\u00e1genes a tama\u00f1o completo desde el\u00a0servidor web\u00a0y actualizar la p\u00e1gina. De esta manera, si un usuario s\u00f3lo quiere ver unas cuantas fotos, no tienen que sufrir la espera de cargar todas las im\u00e1genes. Este patr\u00f3n de desarrollo se llama carga diferida.<\/p>\n

    Utilice Ajax y\/o bibliotecas de\u00a0desarrollo web<\/a>\u00a0como jQuery, Prototype y MooTools que poseen herramientas de carga de contenido con Ajax f\u00e1ciles de implementar.<\/p>\n

      \n
    1. Utilice archivos .JS y .CSS para guardar el c\u00f3digo JavaScript y CSS respectivamente<\/strong><\/li>\n<\/ol>\n

      Cuando el usuario carga por primera vez su p\u00e1gina web, el navegador cach\u00e9a toda su p\u00e1gina, como archivos CSS y JavaScript. As\u00ed, en lugar de repartir c\u00f3digo CSS y JavaScript por todo su sitio, lo mejor es agruparlos en archivos\"\" externos.<\/p>\n

      El uso de c\u00f3digo CSS dentro del archivo html o php tambi\u00e9n aumenta el tiempo de procesamiento de una p\u00e1gina web, tener todo agrupado en un archivo CSS permite que el navegador haga menos trabajo al generar la p\u00e1gina, puesto que ya conoce todas las reglas de estilo que necesita aplicar.<\/p>\n

      Como beneficio adicional, el uso externo de JavaScript y CSS hace que el mantenimiento del sitio sea m\u00e1s f\u00e1cil porque s\u00f3lo tiene que mantener archivos globales en lugar de c\u00f3digo repartidos en varias p\u00e1ginas web.<\/p>\n

        \n
      1. Uso de sistemas de almacenamiento en cach\u00e9<\/strong><\/li>\n<\/ol>\n

        Si usted cuenta con un sitio que se conecta a la base de datos con el fin de crear el contenido del mismo, es hora de empezar a utilizar un sistema de almacenamiento en cach\u00e9. Al contar con un sistema de almacenamiento en cach\u00e9 en su sitio web, s\u00f3lo tiene que crearse el contenido una sola vez en lugar de crear el contenido cada vez que se visita la p\u00e1gina por los usuarios. Pero no te preocupes, los sistemas de almacenamiento en cach\u00e9 peri\u00f3dicamente actualizar sus cach\u00e9s dependiendo de actualizaciones o modificaciones, \u00a0por lo que incluso paginas en constante cambio (como un blogs con comentarios) puede ser almacenados en cach\u00e9.<\/p>\n

        Populares sistemas de gesti\u00f3n de contenidos como WordPress y Drupal poseen caracter\u00edsticas est\u00e1ticas de almacenamiento en cach\u00e9 que convierten p\u00e1ginas generadas din\u00e1micamente a archivos HTML est\u00e1ticos para reducir el procesamiento innecesario del servidor. En caso de trabajar con WordPress, echa un vistazo a\u00a0S\u00faper GT cach\u00e9<\/strong>. Drupal tiene posee una funci\u00f3n de almacenamiento en cach\u00e9 de la p\u00e1gina en su core.<\/p>\n

        PHP tiene extensiones llamadas aceleradores de PHP que optimizan el rendimiento a trav\u00e9s de almacenamiento en cach\u00e9 y varios otros m\u00e9todos, un ejemplo de un acelerador de PHP es APC. Base de datos de almacenamiento en cach\u00e9 mejora el rendimiento y la escalabilidad de sus\u00a0aplicaciones web<\/a>\u00a0mediante la reducci\u00f3n de los trabajos asociados a la base de datos de lectura, escritura y procesos de acceso; \u00a0memcached, por ejemplo, almacena en cach\u00e9 las consultas de base de datos de uso frecuente.<\/p>\n

          \n
        1. Evite Redimensionamiento de im\u00e1genes en HTML<\/strong><\/li>\n<\/ol>\n

          Si una imagen es originalmente 1280\u00d7900 px en dimensi\u00f3n, pero es necesario mostrarla en tama\u00f1o 400\u00d7280 px, debe cambiar el tama\u00f1o y volver a guardar la imagen con un editor de im\u00e1genes como Photoshop en lugar de utilizar ancho de HTML y atributos de alto (es decir, <img width = \u201c400\u201d height = \u201c280\u201d src = \u201cmyimage.jpg\u201d \/>). Hay que tener en cuenta que una imagen m\u00e1s ancha y\/o alta siempre ser\u00e1 m\u00e1s grande en tama\u00f1o de archivo que una imagen m\u00e1s peque\u00f1a.<\/p>\n

          Recuerde, en lugar de cambiar el tama\u00f1o de una imagen utilizando HTML, cambie su tama\u00f1o utilizando un editor de im\u00e1genes como Photoshop y gu\u00e1rdelo como un archivo nuevo.<\/p>\n

            \n
          1. Es importante no utilizar im\u00e1genes para mostrar texto<\/strong><\/li>\n<\/ol>\n

            No s\u00f3lo el texto de una imagen va a ser inaccesible para los motores de b\u00fasqueda y completamente in\u00fatil para SEO, sino que tambi\u00e9n el uso de im\u00e1genes para mostrar texto aumenta los tiempos de carga de las p\u00e1ginas web, ya que significa m\u00e1s peso de archivos para descargar.<\/p>\n

            Si tiene que usar las fuentes personalizadas en su sitio web, aprender acerca de CSS @ font-face para mostrar texto con fuentes personalizadas de manera m\u00e1s eficiente. No hace falta afirmar que debe determinar si la carga de los archivos con las fuentes ser\u00e1 m\u00e1s \u00f3ptima que tener las im\u00e1genes.<\/p>\n

              \n
            1. Optimizar el tama\u00f1o de las Im\u00e1genes al utilizar el formato de archivo correcto<\/strong><\/li>\n<\/ol>\n

              Al seleccionar el formato de imagen de su sitio web, se puede optimizar el tama\u00f1o de los archivos sin perder calidad. Por ejemplo, a menos que necesite transparencia de una imagen (capas alfa) que el formato PNG ofrece, el formato JPG a menudo muestra im\u00e1genes fotogr\u00e1ficas en tama\u00f1os de archivo m\u00e1s peque\u00f1os.<\/p>\n

              Adem\u00e1s, hay muchas herramientas que puede utilizar para reducir a\u00fan m\u00e1s el peso de archivos de im\u00e1genes.<\/p>\n

                \n
              1. Optimizar la forma de escribir c\u00f3digo<\/strong><\/li>\n<\/ol>\n

                Mire alrededor de su c\u00f3digo fuente. \u00bfUsted realmente necesita todas las etiquetas que est\u00e1 usando o se puede utilizar \"la-importancia\"CSS para ayudar en su p\u00e1gina? Por ejemplo, en lugar de utilizar <h1><em>Su t\u00edtulo<\/em> <\/h1>, usted puede usar CSS para hacer que sus t\u00edtulos lleven letra cursiva mediante la propiedad font-style. Escribir c\u00f3digo de manera eficiente no s\u00f3lo reduce el tama\u00f1o de los archivos de documentos HTML y CSS, tambi\u00e9n hace que sea m\u00e1s f\u00e1cil su mantenimiento.<\/p>\n

                  \n
                1. Cargue sus archivos JavaScript al final del documento<\/strong><\/li>\n<\/ol>\n

                  Es mejor si usted tiene los scripts de carga al final de la p\u00e1gina en lugar de al principio. Permite que el navegador muestre todo antes de empezar con el c\u00f3digo JavaScript. Esto hace que sus p\u00e1ginas web se sienta m\u00e1s \u00e1gil porque la forma de carga de los archivos JavaScript es que bloquea cualquier cosa debajo \u00a0hasta que se haya terminado la descarga. Si es posible, ingrese sus archivos de JavaScript justo antes de la etiqueta de cierre <body> en sus documentos HTML.<\/p>\n

                    \n
                  1. Optimizar el almacenamiento en cach\u00e9 Web<\/strong><\/li>\n<\/ol>\n

                    Junto con el uso de sistemas de almacenamiento en cach\u00e9, debe crear sitios web que utilizan el almacenamiento en cach\u00e9 web tanto como sea posible. Almacenamiento en cach\u00e9 Web es cuando los archivos se almacenan en cach\u00e9 por el navegador web para su uso posterior. Las cosas que los navegadores pueden incluir en cach\u00e9 son los archivos CSS, archivos de JavaScript e im\u00e1genes.<\/p>\n

                    Aparte de los aspectos b\u00e1sicos, como poner CSS y el c\u00f3digo JavaScript que se utilizan en varias p\u00e1ginas en archivos externos, hay muchas maneras de asegurarse de que usted est\u00e1 cach\u00e9ando los archivos de la manera m\u00e1s eficiente posible.<\/p>\n

                    Por ejemplo, puede establecer los encabezados de respuesta HTTP Expires y Last-Modified para reducir la necesidad de volver a la descarga de deter.<\/p>\n","protected":false},"excerpt":{"rendered":"

                    La velocidad y el rendimiento de su\u00a0p\u00e1gina web\u00a0son muy importantes para asegurar una buena experiencia para sus clientes. Si su sitio es demasiado lento, no solo va a perder visitantes, sino tambi\u00e9n clientes potenciales.\u00a0 Los motores de b\u00fasqueda como Google utilizan la velocidad de carga de los sitios web como factor importante para el ranking…<\/p>\n","protected":false},"author":1,"featured_media":404,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-402","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/platiniumhost.com\/blog\/wp-json\/wp\/v2\/posts\/402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/platiniumhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/platiniumhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/platiniumhost.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/platiniumhost.com\/blog\/wp-json\/wp\/v2\/comments?post=402"}],"version-history":[{"count":0,"href":"https:\/\/platiniumhost.com\/blog\/wp-json\/wp\/v2\/posts\/402\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/platiniumhost.com\/blog\/wp-json\/wp\/v2\/media\/404"}],"wp:attachment":[{"href":"https:\/\/platiniumhost.com\/blog\/wp-json\/wp\/v2\/media?parent=402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/platiniumhost.com\/blog\/wp-json\/wp\/v2\/categories?post=402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/platiniumhost.com\/blog\/wp-json\/wp\/v2\/tags?post=402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}