Doce arreglos rápidos que mejorarán drásticamente el tiempo de carga de tu sitio web
Hace unos meses realicé un experimento para ver lo rápido que podía hacer uno de mis sitios web en menos de dos horas de trabajo. Después de la instalación de un puñado de plugins de WordPress y corregir algunos simples errores, había mejorado la velocidad de carga de la página web desde 1,61 segundos a 583 milésimas de segundo. Eso es una mejora del 70,39%, sin haber hecho ningún cambio visual a la página web.
De acuerdo con un estudio de Akamai de 2009, el 47% de los visitantes esperan que una página se cargue en menos de 2 segundos y el 57% de los visitantes abandonarán una página que tarde más de 3 segundos en cargar. Varios estudios de caso han confirmado que el tiempo de carga afecta a las ventas.
En 2006, Amazon informó de que un aumento de 100 milisegundos en la velocidad de la página se traduce en un 1% de aumento en los ingresos. Sólo unos pocos años después, Google anunció en su blog que su algoritmo toma en cuenta la velocidad de la página para el ranking de sitios web.
A continuación se presentan doce arreglos rápidos que mejorarán drásticamente el tiempo de carga de tu sitio web, incluyendo:
• Identificar qué plugins están ralentizando tu sitio web
• Comprimir automáticamente las páginas Web, imágenes, JavaScript y CSS
• Mantenimiento de la base de datos (limpiar) de tu sitio web
• Configurar el almacenamiento en caché del navegador de la manera correcta
Sentar las bases
Cuando tu casa se está hundiendo en el suelo, no limpias las ventanas - fijas las bases. Lo mismo ocurre con un sitio web. Si está alojado en un servidor lento o tiene un tema inflado, no ayudarán las soluciones rápidas. Tendrás que fijar los cimientos.
Por lo tanto, vamos a empezar por convertirlo en una buena base y cómo configurar nosotros mismos un sitio web que funcione a la velocidad del rayo.
Elegir un buen alojamiento
La empresa de alojamiento web y el paquete de hosting tienen un gran impacto en la velocidad de un sitio web, entre muchas otras cosas importantes relacionadas con el rendimiento. Yo solía estar atraído por el encanto de un hosting gratuito o barato, pero con la sabiduría de la retrospectiva he aprendido que en este área no se debe escatimar.
Para poner esto en perspectiva, dos de mis clientes tienen sitios web similares pero muy diferentes proveedores de hosting. Uno utiliza WPEngine (una excelente empresa de alojamiento), y el otro hospeda su página web en un servidor compartido barato.
El tiempo de respuesta de DNS (es decir, el tiempo que tarda el navegador en conectarse al servidor de hosting) del cliente mediante WPEngine es 7 milisegundos. El cliente que utiliza el alojamiento compartido barato tiene un tiempo de respuesta de DNS de 250 milisegundos.
Si quieres que tu página web se ejecute rápidamente, comienza con una buena empresa y paquetes de alojamiento.
Elije un buen tema
Por desgracia, no todos los temas de WordPress son creados de la misma forma. Mientras que algunos son extremadamente rápidos y bien codificados, otros están hinchados con cientos de campanas y silbatos bajo la pretensión de que son "versátiles y personalizables".
Hace unos años, Julian Fernandes de Synthesis publicó un interesante caso de estudio en el que actualizó su tema de WordPress por defecto al marco Génesis, y luego monitoreo la velocidad de la página. Se dio cuenta de que con sólo cambiar el tema al Génesis, el tiempo de carga mejoró de 630 a 172 milisegundos.
Cuando elijas un tema, comprueba la velocidad de la página de demostración del tema, utilizando una herramienta como Pingdom, para ver lo rápido que se ejecuta sin añadir nada al mismo. Esto debe darte una idea de lo bien codificado que está.
Utiliza una Content Delivery Network
Recientemente he comenzado a utilizar una red de entrega de contenido (CDN) para uno de mis sitios web y noté una reducción del 55% en el uso de ancho de banda y una gran mejora en la velocidad de carga de la página.
Un CDN hospeda los archivos a través de una enorme red de servidores en todo el mundo. Si un usuario de Argentina visita tu sitio web, entonces descargaría los archivos desde el servidor geográficamente más cerca de él. Debido a que el ancho de banda se extiende por muchos servidores diferentes, se reduce la carga en cualquier servidor único.
La creación de un CDN puede tomar un par de horas, pero por lo general es una de las maneras más rápidas para mejorar drásticamente la velocidad de carga de la página.
12 soluciones rápidas para acelerar WordPress
Ahora que nuestra base es sólida, podemos comenzar a afinar nuestro sitio web.
Una buena manera de comenzar la aceleración de un sitio web es mirar lo que se puede quitar. Más a menudo que no, un sitio web es lento, no por lo que le falta, sino por lo que ya tiene.
1. Identificar plugins que afectan el rendimiento
P3 es uno de mis plugins de diagnóstico preferidos, ya que muestra el impacto de los otros plugins en el tiempo de carga de la página. Esto hace que sea fácil detectar cualquier plugin que está ralentizando el sitio web.
Un culpable común son los plugins sociales para compartir, la mayoría de los cuales engruesan la carga de la página y pueden ser fácilmente reemplazados con la incorporación de botones sociales en el código fuente del tema.
Una vez que eres consciente de qué plugins están ralentizando tu sitio web, puedes tomar una decisión informada sobre si se debes mantenerlos, reemplazarlos o eliminarlos por completo.
2. Comprime tu página web
Al comprimir un archivo en tu computadora como un archivo ZIP el tamaño total del archivo se reduce, por lo que es más fácil y más rápido enviarlo a alguien. Gzip funciona exactamente de la misma manera, pero con tus archivos de página Web.
Una vez instalado, Gzip comprime automáticamente los archivos de tu sitio web como archivos ZIP, ahorrando ancho de banda y acelerando los tiempos de carga de la página. Cuando un usuario visita tu sitio web, su navegador automáticamente descomprimirá los archivos y mostrará su contenido. Este método de transmisión de contenido desde el servidor al navegador es mucho más eficiente y ahorra una gran cantidad de tiempo.
No hay prácticamente ningún inconveniente en instalar Gzip, y el aumento de la velocidad puede ser muy dramático. Como podemos ver en la imagen anterior, MusicLawContracts.com pasa de 68 KB a sólo 13 KB con Gzip instalado.
Mientras que algunos plugins agregarán Gzip a tu sitio web con el clic de un botón, la instalación de forma manual es realmente muy simple. Abre el archivo .htaccess (que se encuentra en el directorio raíz de tu servidor) y agrega al mismo el siguiente código:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
Una vez que hayas añadido este fragmento de código en el .htaccess, prueba si Gzip está trabajando en tu sitio web mediante la aplicación Check Gzip Compression. Si por alguna razón el código anterior no funciona, prueba uno de los otros métodos que Patrick Sexton describe en su artículo "Enable Gzip".
3. Comprimir imágenes
Las imágenes ocupan la mayor parte del ancho de banda en la mayoría de sitios web. WP Smush.it es otro gran plugin que comprime automáticamente las imágenes a medida que las carga en la biblioteca multimedia. Toda compresión es "sin pérdidas", lo que significa que no notarás ninguna diferencia en la calidad de las imágenes.
Una cosa buena acerca de WP Smush.it es que funciona con carácter retroactivo. Si hay miles de imágenes guardadas en la biblioteca de medios, puedes ejecutar todas ellas a través del plugin, comprimiéndolas a un tamaño más manejable.
4. Aprovecha el almacenamiento en caché del navegador
El almacenamiento en caché del navegador es un tema delicado. Están disponibles un puñado de grandes extensiones de caché, pero si se configuran de forma incorrecta podrían causar más daño que bien.
Expires headers dicen al navegador si desea solicitar un archivo en particular desde el servidor o desde la caché del navegador. Por supuesto, esto sólo funciona si el usuario ya tiene una versión de la página Web almacenada en su caché; así, la técnica acelerará el sitio web sólo para los que ya han visitado tu sitio web.
Expires headers acelera un sitio web de dos maneras. En primer lugar, reduce la necesidad de que los visitantes vuelvan a descargar dos veces los mismos archivos desde el servidor. En segundo lugar, reduce el número de peticiones HTTP realizadas.
Para hacer esto con un plugin, te recomiendo usar WP Super Cache. Sin embargo, a raíz de la guía de instalación, se recomienda fuertemente que te asegures que lo has configurado correctamente. Como alternativa, puedes agregar Expires headers añadiendo el siguiente código a tu archivo .htaccess .
#
# associate .js with "text/javascript" type (if not present in mime.conf)
#
AddType text/javascript .js #
# configure mod_expires
#
# URL: http://httpd.apache.org/docs/2.2/mod/mod_expires.html
# ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/x-icon "access plus 2692000 seconds"
ExpiresByType image/jpeg "access plus 2692000 seconds"
ExpiresByType image/png "access plus 2692000 seconds"
ExpiresByType image/gif "access plus 2692000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2692000 seconds"
ExpiresByType text/css "access plus 2692000 seconds"
ExpiresByType text/javascript "access plus 2692000 seconds"
ExpiresByType application/x-javascript "access plus 2692000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds" #
# configure mod_headers
#
# URL: http://httpd.apache.org/docs/2.2/mod/mod_headers.html
#
Header set Cache-Control "max-age=2692000, public"
Header set Cache-Control "max-age=600, private, must-revalidate"
Header unset ETag
Header unset Last-Modified
5. Limpia la base de datos
Soy un gran fan de la frecuencia con que WordPress auto salva todo, pero la desventaja es que tu base de datos se llena con bastante rapidez de miles de revisiones posteriores, trackbacks, pingbacks, comentarios no aprobados y elementos de la papelera.
La solución a esto es un fantástico plugin llamado WP-Optimize que rutinariamente desecha la basura de tu base de datos, hace un mantenimiento de la base de datos eficiente y deja solamente de lo que necesita ser guardado. Por supuesto, al hacer cualquier cosa a tu base de datos, en primer lugar siempre una copia de seguridad.
6. Minify archivos CSS y JavaScript
Si has instalado más de un puñado de plugins, lo más probable es que tus enlaces web tengan entre 10 y 20 hojas de estilos y archivos de JavaScript individuales en cada página. Esto no es lo ideal. Poner todo el JavaScript en un archivo JavaScript y todo el CSS en un solo archivo CSS es mucho más eficiente.
Aquí es donde entra en juego la minificación. Plugins como Better WordPress Minify combinarán todas tus hojas de estilos y archivos de JavaScript en uno solo, reduciendo el número de peticiones que tiene que hacer el navegador.
Prefiero Better WordPress Minify porque es menos agresivo que algunos de los otros plugins que hacen lo mismo (algunas de los cuales causan problemas, como describe Hristo Pandjarov).
7. Desactivar Pingbacks y Trackbacks
Pingbacks y trackbacks son métodos utilizados por WordPress para alertar a otros blogs que enlazan con tus post. Aunque a veces es interesante, puede ser una sangría de velocidad de la página y generalmente es mejor apagarlos. Puedes desactivarlos en la pestaña "Discusión" en "Configuración".
8. Especifica dimensiones de la imagen y el conjunto de caracteres
Antes que un navegador puede mostrar la página Web a un visitante, tiene que averiguar cómo diseñar el contenido alrededor de las imágenes. Sin saber el tamaño de estas imágenes, el navegador tiene que averiguarlo, haciendo que trabaje más y le toma más tiempo.
Especificando las dimensiones de la imagen el navegador las guarda y no tiene que ir a través de este paso, lo que acelera las cosas.
Por la misma razón, es útil la especificación de un conjunto de caracteres en los encabezados de respuesta HTTP, por lo que el navegador no tiene que pasar más tiempo trabajando. Basta con añadir el conjunto de caracteres a la sección head de tu sitio web.
9. Mueve CSS arriba y JavaScript al final
Se recomienda ampliamente enlazar las hojas de estilo tan cerca como sea posible de la parte superior de la página porque los navegadores no representan una página antes de renderizar el archivo CSS. JavaScript, por otra parte, debe estar lo más cerca como sea posible de la parte inferior del pie de página ya que evita que los navegadores lo analicen hasta que se haya cargado completamente la página.
En la mayoría de los casos, esta simple solución mejorará la velocidad de carga de la página forzando a descargar los archivos en el orden óptimo. Pero puede causar problemas en los sitios web que se basan en gran medida en JavaScript y que requieren los archivos JavaScript para cargar antes de que el usuario vea algo de la página.
10. Utiliza Sprites CSS
Un sprite es esencialmente un archivo de imagen de gran tamaño que contiene todas las imágenes individuales una junto a la otra. Usando CSS, se puede ocultar todo en la imagen, excepto para la sección que se necesita, mediante la especificación de un conjunto de coordenadas.
Sprites CSS acelerara un sitio web porque la carga de una imagen grande es mucho más rápida que cargar una gran cantidad de imágenes pequeñas.
La solución más sencilla es SpriteMe, una herramienta que convierte tus imágenes en un sprite CSS.
Recuerda que Safari no carga sprites grandes, así que utiliza la calculadora de William Malone para identificar si tu sprite es demasiado grande.
11. Habilitar Keep Alive
HTTP Keep Alive se refiere al mensaje que se envía entre el equipo del cliente y el servidor Web pidiendo permiso para descargar un archivo. Habilitar Keep Alive permite que la máquina del cliente pueda descargar varios archivos sin tener que pedir permiso en repetidas ocasiones, con el consiguiente ahorro de ancho de banda.
Para habilitar Keep Alive, copia y pega el código de abajo en tu archivo .htaccess .
Header set Connection keep-alive
12. Reemplaza PHP con HTML estático donde se pueda
PHP es ideal para hacer una página web eficiente, reduciendo la necesidad de introducir la misma información varias veces. Sin embargo, la información de llamada a través de PHP utiliza los recursos del servidor y debe ser reemplazado con HTML estático en el que no guarda ningún momento.
Conclusión
En los próximos 12 meses se espera que el uso de Internet móvil aventaje al uso en el escritorio. Este cambio hacia los dispositivos móviles habilitados para Internet significa que tener un sitio web rápido nunca ha sido tan importante como lo es ahora. Los usuarios esperan que los sitios web carguen rápido, y los desarrolladores que no cumplan perderán en última instancia por los desarrolladores que invierten para presentar una gran experiencia.
