Optimiza la velocidad de tu web con Goggle PageSpeed Insights
Cómo optimizar la velocidad de tu web y mejorar tu puntuación con Google Pagespeed Insights en WordPress
Qué es PageSpeed Insights
PageSpeed Insights es una herramienta de Google para analizar y evaluar la velocidad de carga de una página web. Además, proporciona una serie de interesantes sugerencias y herramientas asociadas para mejorar esta velocidad de carga.
Mide el rendimiento de las páginas para dispositivos móviles y para ordenadores. Obtiene la URL dos veces, una vez con un agente de usuario para móviles, y otra con un agente de usuario para ordenadores.
La puntuación de PageSpeed va de 0 a 100 puntos. Cuanto más alta sea la puntuación, mejor. Por ejemplo, una puntuación de 85 indicaría que el rendimiento de la página es bueno.
Cómo evalúa PageSpeed Insights nuestra página
Para evaluar la carga de nuestra página web, así como nuestra implementación, Page Insights se basa en estas reglas de buenas prácticas que abarca tanto a nivel de front-end (carga de imágenes, archivos JavaScript, CSS, etc) como de configuración de servidor.
Tras analizar nuestra web, nos asignará una puntuación y nos mostrará una serie de recomendaciones clasificadas con los siguientes iconos en función de la prioridad.
Signo de exclamación de color rojo (1)
Mostrará los elementos que recomienda corregir. Si se solucionara esto, se obtendría un impacto medible en el rendimiento de la página.
Signo de exclamación naranja (2)
Muestra los puntos que recomienda corregir. No lo considera prioritario, pero si no es demasiado trabajo, aconseja solucionar estos problemas.
Marca de verificación de color verde (3)
¡Enhorabuena! No se encontraron problemas significativos. ¡Buen trabajo!
Mostrara los detalles de las reglas aprobadas en tu web, cuantas más. mejor.
Como ves en la imagen superior, Google nos lo pone bastante fácil al advertirnos de cuáles son las tareas que debemos modificar para optimizar la velocidad en el proceso de carga de nuestra página web y nos da pistas para realizar estos ajustes. Incluso nos optimiza las imágenes y css para descargarlos y sustituirlos en nuestro sitio (4).
A continuación vamos a ver cómo optimizar, en la medida de lo posible, nuestro site WordPress. Qué podemos hacer para acercarnos a la mayor puntuación posible.
Pasos para mejorar puntuación en PageSpeed Insights en WordPress
1. Compresión Gzip
Gzip es un formato de compresión desarrollado hace ya más de 2 décadas, y que utiliza el algoritmo de “Deflate” para comprimir ficheros. Es muy eficiente y su uso está muy extendido.
La compresión Gzip reduce aproximadamente entre un 50% y un 70% el tamaño del archivo. Esto significa menos tiempo en cargar las páginas y menos ancho de banda consumido por el servidor.
Para habilitar esta opción, lo único que tenemos que hacer es añadir un trozo de código al archivo denominado “.htaccess” que está ubicado en la raíz del servidor.
Si no encuentras dicho archivo, pregunta al servicio de tu hosting.
Solución:
Si estás usando cPanel como panel de control de la cuenta de alojamiento, lo tienes bastante fácil. Simplemente accede al “Panel de control de cPanel” >> “Optimizar el sitio web” >> “Comprimir todo el contenido”, y pulsa en “Actualizar configuración”.
cPanel se encargará de actualizar tu web para que todo el tráfico vaya comprimido con GZIP.
Si no usas cPanel, y estás usando un servidor Web Apache, prueba primero añadiendo este código al final del todo del fichero .htaccess de tu web:
[code lang=»js»] mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*[/code]
Luego pasa el test de Pagespeed nuevamente y comprueba si ya no dice que el contenido no está comprimido. Si ahora ya te avisa de que el contenido está comprimido, ¡enhorabuena!, si el contenido sigue sin estar comprimido en gzip, seguramente tu servidor no tenga instalado el módulo de Apache mod_gzip, borra este código y prueba colocando el siguiente código que te indicamos:
[code lang=»js»] # Con especificamos cache
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[/code]
Información obtenida de webempresa
2. Especificar caché del navegador
El caché son los datos de nuestra web que se almacenan localmente en el ordenador o dispositivo del visitante para aligerar las cargas sucesivas. Esto significa que un usuario de tu sitio web no tiene que volver a cargar el logo, archivos CSS, etc. en su segunda visita y por tanto la carga de las páginas será mucho más rápida.
Solución:
Añadir un poco de código al igual que en el caso anterior, en el archivo “.htaccess” que está ubicado en la raíz del servidor.
En dicho código, debes indicar periodos de tiempo para el almacén de archivos en caché a través de los valores “Expires” y “Last-Modified”, aunque lo mejor es verlo con un ejemplo:
[code lang=»js»] # Con especificamos cache
ExpiresActive On
ExpiresDefault "access plus 10 days"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/plain "access plus 1 week"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/x-icon "access plus 3 months"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/x-icon "access plus 3 months"
# FIN[/code]
Antes de borrar/modificar el contenido de tu archivo crea una copia de seguridad.
Otra opción es instalar el plugin W3 Total Caché.
3. Minificar CSS, HTML y JavaScript
Para optimizar la carga de sitios web se utiliza la compresión o unificación de archivos y la reducción de espacios, sangrados, saltos de línea, tabulaciones, anotaciones y/o comentarios en el código, etc., en resumen la eliminación de bytes innecesarios.
Esto se conoce como minificación de recursos y se aplica a HTML, CSS y JavaScript para conseguir acelerar la descarga reduciendo el tamaño.
Si consideramos que una web puede cargar perfectamente diez o más archivos javascript, de estilos y de lenguaje de etiquetado, podemos pensar que una reducción de peso de esos archivos ayudará a entregar al usuario, en su navegador, los contenidos solicitados más rápidamente.
Solución:
Existen muchas herramientas para minificar estos archivos, sólo tienes que buscarlas en google y encontrarás un montón. Si no quieres complicarte puedes instalar en tu website algún plugin como Cache Enabler – WordPress Cache o el que yo uso y que me va muy bien: Autoptimize.
4. Optimizar imágenes
A Google le gusta (y a mí también) que se optimicen las imágenes que insertamos en las páginas. Un concepto este que debería ser el pan nuestro de cada día y que muchos creadores de sitios web desprecian. ¿Comprarías 1 tonelada de azulejos para arreglas tu cuarto de baño o sólo los necesarios? Muchos diseñadores colocan imágenes en su web que bien podrían servir para alicatar un baño completo. Es importante seleccionar las dimensiones óptimas de nuestra imagen y un equilibrio entre la compresión que le damos a la imagen y la calidad de la imagen.
Solución:
PageSpeed, cuando analiza nuestra web, nos permite descargar los recursos de imagen (también JavaScript y CSS) ya optimizados listos para sustituir en nuestra web por los no optimizados.
Por supuesto, existen muchas herramientas online para comprimir nuestras imágenes y muchos programas de edición de imagen desde donde guardar las imágenes optimizadas (photoshop, fireworks, etc.).
Cómo mejorar la experiencia de usuario en PageSpeed Insights
Es muy importante que nuestro site tenga diseño responsive, esto es, que su visualización sea correcta en distintos dispositivos, para que podamos partir de un buena puntuación. Para saber si tu web está optimizada correctamente para móviles visita esta página de google para analizarla.
Google nos sugiere 5 reglas que debemos cumplir:
1. Aplicar el tamaño adecuado a los botones táctiles
Puede que algunos enlaces y botones de la página web sean demasiado pequeños para que los usuarios puedan tocarlos en una pantalla táctil. Quizás debas aplicar un tamaño más grande a los botones táctiles para proporcionar una experiencia de usuario mejor.
Intenta dejar sufiente espacio entre botones y que tengan un tamaño suficiente para poder pulsarlos sin problemas en un smartphone.
2. Evitar los plugins
Esta regla se activa cuando PageSpeed Insights detecta el uso de plugins en tu página.
Los plugins permiten a los navegadores procesar tipos de contenido web especiales, como Flash, Silverlight y Java. Los plugins no son compatibles con la mayoría de los dispositivos móviles y son la causa principal de bloqueos, errores y problemas de seguridad en los navegadores compatibles. Por este motivo, muchos navegadores de ordenador limitan el uso de estos plugins
Pues eso, intenta no usar flash, silverlight (alternativa de microsoft a flash) o java. Testea tu página con las herramientas de google o de terceros para comprobar la compatibilidad de tu página en los dispositivos móviles.
3. Utilizar tamaños de fuente que se puedan leer
El texto de tu página debe ser legible. Un texto es legible cuando es fácil de leer. Por eso, la legibilidad, la capacidad del texto para ser leído, es clave y depende de muchos factores (no sólo de la calidad de la redacción) como la longitud de las frases, del tamaño de la letra, el contraste…
4. Adaptación del contenido a la ventana gráfica
Esta regla se activa cuando PageSpeed Insights detecta que el contenido de la página no se ajusta horizontalmente dentro del tamaño de la ventana gráfica especificada, lo que obliga al usuario a desplazarse horizontalmente para ver todo el contenido. O sea, debemos evitar quye aparezca el scroll horizontal, todo el contenido de la página debe verse en el ancho del dispositivo. Esta regla y la siguiente están relacionadas con el diseñoi responsive de tu web.
5. Configurar ventana gráfica
Si PageSpeed Insights detecta que la página no especifica una ventana gráfica, o sí la especifica pero no se adapta a los diferentes dispositivos, se activa esta regla.
Las páginas optimizadas para dispositivos móviles deben incluir una metaetiqueta de ventana gráfica en la cabecera (head) del documento con el siguiente formato: width=device-width, initial-scale=1.
<meta name=viewport content="width=device-width, initial-scale=1">
