Guía definitiva para la optimización web (consejos y mejores prácticas)

Optimización web es una parte vital del desarrollo y mantenimiento web, pero también es algo que los webmasters suelen pasar por alto. Solo piense en el dinero que puede ahorrar y cómo puede ayudarlo a aumentar su número de lectores y tráfico cuando se realicen correctamente..

Si no ha realizado ninguna optimización en su sitio web (o blog) hasta el momento o simplemente tiene curiosidad por saber cómo puede ayudar a acelerar su sitio, consulte esta lista de consejos de optimización que hemos recopilado..

Hemos dividido las cosas en 3 secciones separadas para una mejor legibilidad, respectivamente optimización del lado del servidor, optimización de activos (que incluye componentes web como CSS, Javascript, imágenes, etc.) y plataforma, donde nos centraremos en Optimización de WordPress. En la última sección, incluimos un par de enlaces que consideramos útiles. Lista completa despues del salto.

Optimización: lado del servidor

1. Elija un host web decente

   Su cuenta de alojamiento web no tiene relación directa con las optimizaciones que está a punto de realizar, pero decidimos que elegir la cuenta de alojamiento web tan importante que decidimos llamarle la atención primero. La cuenta de alojamiento es la base de su sitio web / blog donde la seguridad, la accesibilidad (cPanel, FTP, SSH), la estabilidad del servidor, los precios y el soporte al cliente juegan un papel importante. Necesitas asegurarte de estar en buenas manos..

   Lectura recomendada: Cómo elegir un alojamiento web por wikiHow es un excelente artículo que le brinda los pasos y consejos que debe conocer antes de comprar cualquier cuenta de alojamiento web.

2. Activos del host por separado

   Cuando mencionamos activos, nos referimos a componentes web como imagenes y guiones estáticos que no requieren procesamiento del lado del servidor. Esto incluye cualquier gráfico web, imágenes, Javascripts, hojas de estilo en cascada (CSS), etc. Los activos de hosting por separado no son obligatorios, pero hemos visto un gran resultado en términos de estabilidad del servidor con esta implementación cuando el blog tenía un pico de tráfico..

   Lectura recomendada: Maximizando las descargas paralelas en Carpool Lane.

3. Compresión con GZip

   En resumen, los contenidos viajan del lado del servidor al lado del cliente (viceversa) cada vez que se realiza una solicitud HTTP. Comprimir el contenido para enviarlo reduce considerablemente el tiempo necesario para procesar cada solicitud.

   GZip Es una de las mejores maneras de hacerlo y de acuerdo con el tipo de servidores que está utilizando. Por ejemplo, Apache 1.3 usa mod_zip, Apache 2.x usa mod_deflate y aquí está cómo lo haces en Nginx. Aquí hay algunos artículos realmente buenos para familiarizarse con las compresiones del lado del servidor:

   • Acelere un sitio web habilitando la compresión de archivos de Apache
   • Comprimir la salida web usando mod_gzip y Apache
   • Cómo optimizar su sitio con la compresión GZIP
   • Compresión del lado del servidor para ASP

4. Minimizar redirecciones

   Los webmasters hacen redireccionamiento de URL (ya sea redireccionamientos de Javascript o META) todo el tiempo. A veces, su propósito es señalar a los usuarios de una página antigua a una nueva, o simplemente guiar a los usuarios a la página correcta. Cada redirección crea una solicitud HTTP adicional y RTT (tiempo de ida y vuelta). Cuanta más redirección tengas, el usuario más lento llegará a la página de destino..

   Lectura recomendada: Evitar redirecciones Por Google Code te da una buena visión general al respecto. El artículo también recomienda algunas formas prácticas de minimizar la redirección para aumentar la velocidad de servicio..

5. Reducir las búsquedas de DNS

   De acuerdo a Yahoo! Blog de la red de desarrolladores, el DNS (Sistema de nombres de dominio) tarda unos 20-120 milisegundos en resolver la dirección IP para un nombre de host o nombre de dominio dado y el navegador no puede hacer nada hasta que el proceso se complete correctamente.

   Autor Steve Souders sugirió que dividir estos componentes en al menos dos pero no más de cuatro nombres de host reduce las búsquedas de DNS y permite descargas paralelas de alto grado. Lee mas en el artículo.

Optimización: Los Activos (CSS, Javascripts, Imágenes)

1. Fusionar múltiples Javascripts en uno

   Gente en rakaz.nl comparte cómo puedes combinar múltiples Javascripts como:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   En un solo archivo cambiando la URL a:

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   manipulando el .htaccess y usando PHP. haga clic aquí leer mas.

2. Comprimir Javascript y CSS

   Reducir es una aplicación PHP5 que puede combinar múltiples archivos CSS y Javascript, comprimir su contenido (es decir, eliminar espacios en blanco / comentarios innecesarios) y presentar los resultados con codificación HTTP (gzip / deflate) y encabezados que permiten el almacenamiento en caché óptimo del lado del cliente.

   

   Comprimirlos en línea!También hay algunos servicios web que le permiten comprimir manualmente sus archivos Javascripts y CSS en línea. Aquí hay algunos que llegamos a conocer:

   • compresor.biene (Javascript, CSS)
   • javascriptcompressor.com (Javascript)
   • jscompress.com (Javascript)
   • CleanCSS (CSS)
   • CSS Optimizer (CSS)

3. Personalizar Encabezado Caducidad / Caché

   Crédito: httpwatch

   Al utilizar un encabezado Expiry personalizado, sus componentes web como imágenes, archivos estáticos, CSS, Javascript omitieron solicitudes HTTP innecesarias cuando el mismo usuario vuelve a cargar la página por segunda vez. Reduce el ancho de banda necesario y definitivamente ayuda a servir la página más rápido.

   Lecturas recomendadas:

   • Yahoo! Blog de la red de desarrolladores - Agregar un encabezado de expiración
   • Cómo agregar buenos encabezados de expiración a las imágenes en Apache 1.3
   • Almacenamiento en caché HTTP
   • Tutorial de Caching para Autores Web y Webmasters

4. Descargar los activos

   Al descargar, nos referimos a separar los Javascripts, imágenes, CSS y archivos estáticos del servidor principal donde se aloja el sitio web y colocarlos en otro servidor o confiar en otros servicios web. Hemos visto una mejora significativa aquí en Hongkiat descargando los activos a otros servicios web disponibles, dejando que el servidor realice principalmente el procesamiento de PHP. Aquí hay algunas sugerencias de servicios en línea para descargar:

   • Imágenes: Flickr, Smugmug, Hostings Pagados *
   • Javascriptos: Google Ajax Library, Google App Engine, Hostings de pago *
   • Formulario webs: WuFoo, FormStack
   • RSS: Google Feedburner
   • Encuesta y Encuestas: SurveyMonkey, PollDaddy

   * Hostings pagados - Los servicios de pago siempre tienen mejor confiabilidad y estabilidad. Si su sitio web solicita constantemente los activos, deberá asegurarse de que estén en buenas manos. Recomendamos Amazon S3 y Cloud Front..

5. Manejo de imágenes web

   Las imágenes son parte importante de su sitio web. Sin embargo, si no se optimizan correctamente, pueden convertirse en una carga y terminar utilizando una cantidad impredeciblemente grande de ancho de banda a diario. Aquí están algunas Mejores prácticas para optimizar tus imágenes.:

   • Optimizar imágenes PNGLa gente de Smashing Magazine describe algunas técnicas inteligentes que pueden ayudarte a optimizar tus imágenes PNG.
   • Optimizando para web - Cosas que debes saber (los formatos) Aprende más sobre Jpeg, GIF, PNG y cómo debes guardar tus imágenes para la web.
   • No escalar imágenesSiempre practica insertando el anchura y altura para cada imagenes Además, no reduzca una imagen solo porque necesita una versión más pequeña en la web. Por ejemplo: No fuerce la escala de una imagen de 200 × 200 px a 50 × 50 px para su sitio web alterando el anchura y altura. Consigue un 50 × 50 px en su lugar.

   Optimización con servicios web y herramientas. La buena noticia es que no necesita ser un experto en Photoshop para optimizar sus imágenes. Hay muchos servicios web y herramientas para ayudarte a hacer el trabajo..

   • Smush.itProbablemente una de las herramientas en línea más eficientes para optimizar imágenes. Incluso hay un plugin de WordPress para ello!
   • Stripper JPEG y PNGUna herramienta de Windows para eliminar / limpiar / eliminar metadatos (basura) innecesarios de archivos JPG / JPEG / JFIF y PNG.
   • Optimizador de imagen en líneaLe permite optimizar fácilmente sus gifs, gifs animados, jpgs y pngs, para que se carguen lo más rápido posible en su sitio, por Dynamic Drive
   • SuperGIFHaz sin esfuerzo todas tus imágenes y animaciones GIF más pequeñas.
   • Aqui hay mas.

6. Manejo de CSS

   Los sitios web modernos utilizan CSS como la base del estilo, así como la apariencia. No solo CSS proporciona una gran flexibilidad para los cambios, sino que también es menor en términos de códigos necesarios. Sin embargo, si están mal codificados, podría ser contraproducente. Aquí hay algunas listas de verificación, o más bien guías para asegurarse de que su CSS esté correctamente optimizado:

   • Manteniendo a los niños de tus elementos en línea con la descendenciaCómo mantener su marca limpia con los selectores de CSS.
   • Mantener CSS cortoCuando dan el mismo estilo, los códigos son mejores cuanto más cortos son. Aquí está un Guía de CSS de taquigrafía probablemente necesitarás.
   • Usa CSS SpriteLa técnica CSS Sprite reduce la solicitud HTTP cada vez que se carga una página al combinar varias (o todas) imágenes en un solo archivo de imagen y controlar su salida con CSS posición de fondo atributo. Aquí hay algunas guías y técnicas útiles para crear CSS Sprites:
     • Generador de Sprite CSS en línea
     • El mejor generador de Sprites CSS en línea y fuera de línea
   • Usando cada declaración solo una vezCuando busque optimizar sus archivos CSS, una de las medidas más poderosas que puede emplear es usar cada declaración solo una vez..
   • Reducir la cantidad de archivos CSSLa razón es simple: cuantos más archivos CSS tenga, más solicitud de HTTP tendrá que realizar cuando se solicite una página web. Por ejemplo, en lugar de tener varios archivos CSS como el siguiente:

     Puedes combinarlos en el único CSS:

   Lecturas recomendadas:

   • Herramientas útiles para verificar, limpiar y optimizar su archivo CSSAlgunas de las herramientas útiles que puede utilizar para optimizar su código CSS, incluso si no tiene ningún conocimiento de la codificación CSS.
   • 7 principios de código CSS limpio y optimizadoLa optimización no solo minimiza el tamaño del archivo, también se trata de ser organizado, sin desorden y eficiente..
   • Mejores Prácticas para optimizar CSSConsidere este artículo más como un ejercicio académico en lugar de consejos de optimización de la vida real.

Optimización para WordPress

De vez en cuando, supervisamos, evaluamos y analizamos el rendimiento de nuestro blog de WordPress. Si el sitio está funcionando lento, necesitamos saber por qué. Aquí hay algunos cambios básicos que hemos hecho y pensamos que aumentarán significativamente la velocidad de su blog de WordPress.

1. Guarda tu blog de Worpress

   WP-Cache es un sistema de almacenamiento en caché de páginas de WordPress extremadamente eficiente para que su sitio sea mucho más rápido y sensible. También recomendamos WP Super Cache que mejora con el complemento mencionado anteriormente y también hace un gran trabajo.

2. Desactivar y eliminar complementos no utilizados

   Cuando note que su blog se está cargando realmente lento, vea si tiene muchos complementos instalados. Ellos podrían ser los culpables.

3. Eliminar etiquetas PHP innecesarias

   Si echas un vistazo a los códigos fuente de tu tema, encontrarás muchas etiquetas como estas:

   Pueden ser reemplazados por el contenido de texto que no causa carga en el servidor. Revisa Michael Martines 13 Etiquetas para eliminar de su WordPress Blosol

Lecturas recomendadas:

• 3 maneras más fáciles de acelerar WordPressJohn Pozadzides comparte cómo su blog navega sin problemas a través de un pico de tráfico de Digg.
• 13 fantásticos consejos y trucos de velocidad de WordPress para MAX Performance Aquí hay algunas cosas que puede probar si encuentra que su sitio de WordPress no está funcionando tan bien como podría deberse al alto tráfico o problemas ocultos que no conoce..
• 40 consejos de optimización de WordPressConsejos de optimización en diapositivas. 40 consejos en 40 minutos.

Por último, si bien no menos importante…

Aquí hay algunos servicios y herramientas web útiles que le brindan una perspectiva más amplia y un mejor análisis para ayudarlo en la optimización web..

• Yahoo! YSlow

  YSlow analiza las páginas web y sugiere formas de mejorar su rendimiento basándose en un conjunto de reglas para las páginas web de alto rendimiento. Le da una buena idea de lo que debe hacerse para que el sitio web se cargue más rápido.

  (Firebug requerido)

  

• PageSpeed

  Similar a Yahoo! YSlow, Google Velocidad de la página es un complemento de Firebug de código abierto para evaluar el rendimiento del sitio web y cómo mejorarlo. (Firebug requerido)

  

• Herramientas de pingdom

  Herramientas de pingdom tome una carga completa de su sitio web, incluidos todos los objetos (imágenes, CSS, JavaScripts, RSS, Flash y marcos / iframes) y le muestra estadísticas generales sobre la página cargada, como el número total de objetos, el tiempo total de carga y el tamaño, incluidos objetos.

  

Lecturas recomendadas:Aquí hay más consejos y herramientas que vale la pena revisar.

• Google Web Optimizer
• 15 herramientas para ayudarte a desarrollar páginas web más rápidas
• Más de 15 consejos para acelerar su sitio web y optimizar su código!