Indicadores de problemas asociados a una desoptimización
El método Blogpocket, para acelerar WordPress, se basa en detectar los problemas fundamentales que implican una desoptimización. Y la manera de detectarlos es usando herramientas de análisis online. Existen dos tests muy completos, como ya se ha indicado antes: GTmetrix y PageSpeed Insights.
Con GTmetrix podemos detectar problemas de desoptimización y corregirlos, hasta que se consiga la máxima puntuación. GTmetrix utiliza PageSpeed, basado en Lighthouse, como motro de análisis, más herramientas de auditoría propias.
Vamos a listar, a continuación, los problemas más importantes asociados a una desoptimización y que se resuelven aplicando el Método anteriormente descrito.
Si tienes la suerte de tener lojada tu web en un Top Hosting como SiteGround, todos ellos los puedes resolver configurándolo en el plugin SG Optimizer (propio y exclusivo de SiteGround); aunque -como se vio anteriormente- la mejor manera de alcanzar máximo nivel de optimización es combinarlo con el plugin Autoptimize. En caso contrario, puedes conseguirlo con W3 Total Cache, NitroPack o cualquier otra herramienta que incluya almacenamiento en caché y tweaks de optimización del rendimiento.
Minify HTML, CSS y JavaScript
La minificación de los archivos HTML, CSS y JavaScript supone eliminar caracteres innecesarios de dichos archivos, guardando los datos en caché y mejorando la velocidad de tu sitio. En algunos casos, puedes observar problemas de visualización de tu web pero la optimización que se consigue es bastante buena.
Esto, junto a la optimización de imágenes y la resolución de CSS Crítico es la manera de reducir el LCP que debe ser menor de 1,2 segundos (aunque PageSpeed Insights establece 2,5 segundos el tiempo a partir del cual empeora la experiencia de usuario). El LCP (Largest Contentful Paint) mide el tiempo en que tarda en cargar el elemento de contenido más grande y que ocupa la mitad superior de la página. Ese elemento más grande puede ser una imagen, un video o un bloque de texto. Viene asociado al FCP (First Contentful Pain) que rastrea el comienzo de la experiencia de carga, mientras que LCP rastrea su culminación. Para una buena experiencia de usuario, un FCP óptimo es 0,9 segundos o menos.
Si no consigues buenos resultados en LCP solo minificando y optimizando imágenes, Autoptimize posee la opción de resolver el CSS Crítico. El CSS crítico es una técnica que implica encontrar el CSS responsable de diseñar el contenido relacionado con el LCP e incluirlo en la etiqueta de encabezado de su página. CSS crítico es, en otras palabras, el CSS que se aplica a los elementos de la mitad superior de la página. Es el CSS responsable del contenido que es inmediatamente visible cuando un usuario abre su sitio web. Este problema también está relacionado con "Eliminar recursos que bloquean el renderizado", típico en Pages Speed Insights. Esto implica que hay recursos que bloquean el primer renderizado de la página y se recomienda que se muestren los elementos de JavaScript y CSS críticos insertados y se pospongan todos los que no sean esenciales. Más información: Eliminate render-blocking resources.
En SiteGround, activa las siguientes opciones, dentro de la pestaña «Optimización de portada» en la configuración del plugin SG Optimizer.
- Minimizar la salida HTML
- Minimizar archivos JavaScript
- Minimizar archivos CSS
- Combinar archivos CSS
Si no estás en SiteGround, instala, activa y configura el plugin Autoptimize. Aprende a configurar Autoptimize en las Notas acerca de ajustes finos de WPO y en el punto 13 de esta checklist.. También es posible hacerlo con los plugins WP Rocket (de pago) o W3 Total Cache, aunque en la mayoría de los casos será suficiente empleando Autoptimize.
La minificaación que realiza SG Optimizer es incompatible con la de cualquier otro plugin. SG Optimizer desactiva sus opciones cuando detecta que hay otro plugin (como Autoptimize) realizando dicha tarea.
En caso de que no estés en SiteGround y necesites mejorar el rendimiento con W3 Total Cache, te recomiendo el plugin A2 Optimized que lo configura automáticamente. O prueba también Nitropack (de pago).
Enable gzip compression
Activando la compresión del contenido que se envía a los navegadores de los visitantes, se mejora los tiempo de carga de tu sitio.
Todos los hostings pueden servir archivos GZIP. Para ello, si estás en SiteGround, simplemente activa la opción siguiente, dentro del apartado «Optimización del entorno».
- Compresión GZIP
En caso de que no seas cliente de SiteGround, puedes modificar el archivo .htaccess. También puedes lograr la compresión GZIP con plugins como WP Rocket (de pago) o W3 Total Cache.
Comprobador de compresión Gzip : comprueba rápidamente si tu sitio web ya está comprimido con gzip.
Más información: Cómo habilitar fácilmente la compresión Gzip en WordPress (¡5 formas!)
Leverage Browser Caching
En español «Especificar la cache del navegador». Significa que hay que agregar reglas de almacenamiento en la caché del navegador de los visitantes para mantener el contenido estático un período más largo para un mejor rendimiento de la web. Este error se resuelve especificando el tiempo mínimo de la caché del navegador. Esta caché es donde se guarda una copia de las páginas que han sido accedidas con el navegador, por lo que no se necesita descargar sus recursos cada vez.
Usar una memoria caché supone que cuando alguien visita tu web, no tenga que volver a cargar los archivos comunes de varias páginas, utilizando así una versión previamente guardada de ese archivo (generalmente, archivos JavaScript y CSS).
En SiteGround, activa la siguiente opción, dentro del apartado «Optimización del entorno».
- Caché del navegador
Si no eres usuario de SiteGround, este problema se resuelve con plugins como W3 Total Cache o Nitropack. También puedes modificar el archivo .htaccess.
Sin embargo, con ello solo podrás solventar problemas relacionados con recursos internos. Si tienes algún plugin o script (como Google Analytics) que utilice recursos externos no vas a poder corregirlo. Veremos más adelante en esta guía cómo corregir, por ejemplo, el caso de Google Analytics.
Remove Query String URL from static resources
En español, «Eliminar cadenas de petición de recursos estáticos». Se debe eliminar la cadena de peticiones de tus recursos estáticos para mejorar la caché de esos recursos.
Si estás en SiteGround, activa la siguiente opción, dentro del apartado «Optimización de portada».
- Eliminar cadenas de petición de recursos estáticos
Si no tienes tu web alojada en SiteGround, puedes modificar el archivo .htaccess.
Puedes usar también Autoptimize, pero ten en cuenta lo siguiente:
- En «Scripts a excluir de Autoptimize» (pestaña Opciones de Javascript), quitar todos los scripts. Si tu theme usa, por ejemplo JQuery, dejarán de funcionar algunas cosas. En este caso, vuelve a añadir el script en esta opción, a costa de perder un poquito de optimización.
- Selecciona «Quitar las Google Fonts» dentro del apartado «Google Fonts» en la pestaña «Extra». Si tu theme usa alguna fuente de Google, éstas no se verán. Vuelve a quitar la opción a costa de perder un poquito de optimización o cárga las fuentes de Google manualmente. En esta guía se explica cómo hacerlo.
Defer parsing of JavaScript
En español, «Retrasa la carga de Javascript». Google considera importante dar prioridad al contenido visible. Por esa razón, es necesario aplazar no solo carga de los JavaScript sino también la de los CSS. Esto significa cargar los CSS críticos para que la web se vea bien primero, y dejar para el final los que no sean críticos, para así no bloquear la carga de tu página. En el caso de los JavaScript igual: mover los que se cargan en el header, al final de tu página, para que no bloqueen la carga.
En SiteGround, está la siguiente opción, en el apartado «optimización del entorno» para añadir el parámetro async a los archivos JavaScript cargados en la sección de cabecera de tu sitio para que no bloqueen la visualización de tu página.
- Carga asíncrona de los archivos JavaScript que bloquean la visualización
En el caso de que estés fuera de SiteGround, puedes resolver esto con Autoptimize. También WP-Rocket parece eficiente en esta tarea. Aunque técnicamente, este problema es difícil de resolver siempre que el theme no esté bien desarrollado o utilices muchos recursos externos.
Errores relacionados con imágenes
Hay dos problemas principales relacionados con las imágenes.
- Optimize images. Significa que el peso en KBs de la imagen (su codificación) es demasiado grande.
- Serve scaled images. Quiere decir que el tamaño (dimensiones) no es el adecuado. Debes averiguar el tamaño con el que se visualiza en la web, eliminar los atributos de redimensión y subir una imagen con el tamaño igual al que se muestra.
En SiteGround, posees el mecanismo adecuado para tener todas las imágenes optimizadas en peso (codificación). Para ello, simplemente activa la opción siguiente, dentro del apartado «Optimización de imágenes».
- Optimización de nuevas imágenes
De esa forma, se optimizarán automáticamente todas las nuevas imágenes que se suban a la biblioteca de medios y te despreocupas y no tienes que emplear herramientas externas o plugins de WordPress para tener imágenes optimizadas. Ten en cuenta que WordPress ya optimiza imágenes grandes automáticamente.
También puedes optimizar las imágenes antiguas que existan en tu web, activando en el mismo apartado la opción siguiente. Se optimizarán todas las imágenes con un pérdida mínima o nula de calidad. Ten en cuenta que esto sobreescribirá las imágenes originales.
- Optimización de imágenes existentes
Es conveniente también, en SiteGround, activar la opción siguiente, dentro del mismo apartado.
- Carga diferida de imágenes
Con ello, se carga las imágenes solo cuando son visibles en el navegador.
Si no estás en SiteGround, instala el plugin EWWW Image Optimizer o usa la herramienta online Squoosh.app. Ten en cuenta que WordPress ya optimiza imágenes grandes automáticamente y es muy probable que no necesites ningún recurso adicional para optimizar imágenes.
Para más información, consulta este post.
Reducir el tiempo de respuesta del servidor
Este era un error clásico que aparecía en la versión anterior de PageSpeed Insights. Y tampoco lo verás en GTmetrix.
En cualquier caso, tenemos el plugin Cache Enabler, compatible con Autoptimize y que mejora sensiblemente los tiempos de respuesta del servidor.
Las mejoras que realiza SG Optimizer con su sistema propio de almacenamiento en caché son presumiblemente incompatibles con la de cualquier otro plugin. SG Optimizer te avisa de que puede existir algún problema cuando detecta que hay otro plugin (como Cache Enabler) realizando dicha tarea. El mensaje de aviso se muestra en la cabecera del dashboard de WordPress y dice lo siguiente.
Advertencia importante del plugin SG Optimizer: Hemos detectado que hay funcionalidades duplicadas con otros plugins instalados en tu sitio: Cache Enabler. Por favor, ten en cuenta que tener dos plugins de caché puede en realidad disminuir el rendimiento de tu sitio y perjudicar los tiempos de carga de tus páginas, así que recomendamos que dejes activo solo uno de los plugins.
Si ves que no se mejoran notablemente los tiempos de respuesta, es preferible que desinstales Cache Enabler. En las pruebas que hemos realizado, hemos optimizado al 100 % webs con SuperCacher (el sistema de caché de SiteGround) y Cache Enabler funcionando al mismo tiempo sin problemas.
Sistema de almacenamiento en caché
Si estás en SiteGround, revisa si tienes activas las siguiente opciones en el apartado «Ajustes de Supercacher».
- Caché dinámica
La caché estática se activa por defecto y para activar la memcaché debes primero hacerlo desde la opción correspondiente de cPanel.
Si no tienes alojada la web en SiteGround, quizá te sirva solo con el plugin Cache Enabler. O, en caso contrario, instalar y activar WP Rocket o Nitropack (de pago) o A2 Optimized (que instala automáticamente el plugin W3 Total Cache).