Comprobar la velocidad de carga de tu página web mediante herramientas como Google PageSpeed Insights o Pingdom resulta de gran utilidad para ayudarte a acelerar WordPress. No obstante, si bien es una buena idea optimizar ciertos parámetros para optimizar la velocidad de WordPress, no deberías obsesionarte con las métricas.
Mi página web es un ejemplo de lo que comento. Como puedes comprobar las métricas son sobresalientes, pero no logra la máxima puntuación en todos y cada uno de los parámetros analizados . ¿Por qué? Porque para lograr la máxima puntuación debería renunciar a una serie de elementos gráficos que no estoy dispuesto a sacrificar en aras de una mejor calificación.
Mejorar Google PageSpeed Insights en WordPress
Todos estamos de acuerdo en lo sencillo que resulta lanzar nuestro proyecto con ayuda de WordPress. Tambien coincidiremos que, desde el punto de vista del desarrollador, no es el gestor de contenidos más rápido del mundo. La instalación de ciertos plugins tampoco ayuda. Es por ello que para optimizar la velocidad de carga en WordPress tenemos que hilar muy fino.
Aclarado esto, a continuación voy a mostrarte los pasos necesarios para lograr una matrícula de honor (100/100) en Google PageSpeed Insights.
Para esta prueba de optimización hemos utilizado el tema de moda: Genesis Framework.
1.- Reducir el tiempo de respuesta del servidor
Al igual que comentábamos en nuestro artículo sobre seguridad en WordPress, la elección de un hosting de calidad es fundamental.
El simple hecho de alojar tu web en un servicio de alojamiento contrastado solucionará muchos de los posibles problemas.
[av_notification title=» color=’red’ border=» custom_bg=’#444444′ custom_font=’#ffffff’ size=’large’ icon_select=’yes’ icon=’ue800′ font=’entypo-fontello’ av_uid=’av-2icf7m’]
Consigue un 20% de descuento en cualquier pack de Webempresa siguiendo este link y aplicando el código gracias20.
[/av_notification]
Para un análisis pormenorizado de las dos mejores alternativas para alojar tu web, recomiendo la lectura Webempresa vs Raiola Networks.
2.- Optimizar imágenes
Unos de los errores más comunes y a la vez más sencillos de corregir es la optimización de imágenes.
Para evitar este error deberemos optimizar las imágenes antes de subirlas al servidor mediante programas de escritorio como Gimp (gratis) o Photoshop (de pago), recurrir a servicios web gratuitos como webresizer o utilizar plugins para optimizar imágenes como Smush it o EWWW.
La gran ventaja de los plugins es que te permiten la compresión de varios archivos en bloque.
Si una vez subidas las imágenes el error permanece, podrás descargar desde la propia web una versión optimizada de las mismas.
3.- Minificar Javascript, CSS y HTML
Google PageSpeed Insights nos sugiere minificar nuestros archivos Javascript, CSS y HTML. Para solucionar este problema recurriremos a un plugin ligero y todoterreno llamado Autoptimize.
Autoptimize es un plugin para optimizar WordPress que funciona de maravilla. Únicamente deberás marcar la siguientes opciones en el menú de configuración:
- Optimize HTML code
- Optimize Javascript code
- Optimize CSS code
4.- Habilitar compresión Gzip
Todos los servicios de hosting compartido de Raiola Networks y Webempresa tienen habilitado la compresión Gzip por defecto. A continuación vamos a detallar los pasos para activar la compresión Gzip en tu servidor.
Servidores Apache
Para habilitar la compresión deberás añadir a tu archivo .htaccess las siguientes líneas de código.
<IfModule mod_deflate.c> # Comprimir HTML, CSS, JavaScript, Text, XML and fuentes AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Eliminar bugs de navegadores (util para antiguos) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>
Si tienes la suerte de contar con CPanel, puedes hacerlo mediante una interfaz gráfica.
Dirígete a la sección software, haz click en optimizar sitio web y selecciona la opción «comprimir todo el contenido».
Servidores Nginx
Añadimos las siguientes líneas de código, pero esta vez en el archivo nginx.conf.
gzip on; gzip_comp_level 2; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript; gzip_disable "MSIE [1-6].(?!.*SV1)"; gzip_vary on;
5.- Especificar caché del navegador
Google PageSpeed Insights te advierte que debes especificar el caché del navegador.
Añadiremos el siguiente código a nuestro archivo .htaccess
<filesMatch ".(ico|pdf|flv|jpg|svg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=84600, public" </filesMatch>
Si queremos hilar más fino y asignar el tiempo que cada tipo de archivo será almacenado en caché, utilizaremos el siguiente código en lugar del anterior:
## Tiempo expiracion cache ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access plus 1 month" </IfModule> ## Tiempo expiracion cache ##
¿Alojado en un servidor Nginx? También hay un código para ti.
location ~* \.(js|css|png|jpg|svg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control "public, no-transform";
}6.- Eliminar el Javascript que bloquea la visualización y el CSS del contenido de la mitad superior de la página
Ahora llega el turno de solucionar el bloqueo que producen ciertos Javascript y CSS en la mitad superior de la página.
Existen tres escenarios que tenemos que abordar para solucionar el problema.
Archivos Javascript y CSS
Para optimizar la entrega de los archivos Javascript y CSS haremos una configuración adicional mediante el plugin Autoptimize. Los pasos a seguir son los siguientes:
- Desmarcar la opción «Force JavaScript in <head>?» en las opciones de JavaScript.
- Marcar la opción «Combina todos los CSS en un solo archivo para mejorar el rendimiento de carga, aunque también podría ralentizarse en los dispositivos móviles» en las opciones de CSS.
Fuentes de Google
Por defecto WordPress utiliza un hook llamado wp_enqueue_scripts que carga la fuente en el header, provocando el bloqueo.
Una manera sencilla de solucionar esto es instalando el plugin Disable Google Fonts e incluyendo el siguiente código en el footer:
<link href='https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
Otra posibilidad es cargar de forma asíncrona las fuentes de mediante Web Font Loader, del propio Google.
Si nuestra plantilla no hace uso de las fuentes de Google no será necesario la instalación de ningún plugin. Únicamente tendrás que asegurarte de que las fuentes carguen desde el footer.
Google Analytics
Este error es bastante curioso ya que viene de un script de Google, más concretamente Analytics.
Para solucionar este pequeño gran problema te voy a proponer dos soluciones:
- La primera y más obvia es descargarte el archivo analytics.js a tu propio servidor . El problema principal de este método son las actualizaciones. El propio Google no recomienda esta solución (ni ofrece alternativa alguna).
- La segunda opción es descargar de GitHub a tu servidor una versión cacheable de Google Analytics, cortesía de thejunkland.com. También es posible su instalación añadiendo el siguiente código en el footer:
<script src="https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js" async></script> <script> var galite = galite || {}; galite.UA </script>Entiendo que, a pesar de las reticencias de Google para ofrecer una solución a un problema que ellos mismos han creado, acabarán ofreciendo una respuesta.
Te recomiendo que visites en artículo en unos meses para ver si existe una respuesta oficial desde Mountain View.
Conclusión
Como habrás podido observar, sin un tema adecuado y un servicio de hosting de calidad, es muy complicado optimizar correctamente tu web.
El objetivo de este tutorial es ayudarte en el análisis de tu página y mostrarte cómo hacer que cargue más rápido. En ningún caso te recomiendo que te obsesiones con lograr la máxima puntuación. Ni es recomendable (tendrías que renunciar a muchos elementos que aportan usabilidad y diseño), ni es posible en la mayoría de los temas.
Si crees que esta pequeña guía le puede resultar útil a alguien, te agradecería que la compartieras en tus redes sociales o blog.
