Hoy les vengo hablar sobre la herramienta de Google Page Speed Insight.
Esta herramienta fue lanzada al mercado por Google para dar información sobre la velocidad de carga de cada página web de forma totalmente gratuita.
Hay que tener en cuenta que cuanto más rápido sea tu sitio web, los usuarios encontrarán antes lo que buscan y el bot de Google podrá rastrear toda tu web con mayor facilidad, mejorando tu posicionamiento web.
Ahora lo que haremos será realizar un análisis a nuestro sitio web con esta herramienta, que lo podéis hacer desde aquí.
Es importante no obsesionarse con conseguir el 100/100, con tener un 85% tu web ya se considerara optimizada y es rápida a la hora de cargarla.
Veremos algunos consejos para mejorar considerablemente esta puntuación:
Activar la compresión GZIP en tu .htaccess
Accede a la carpeta raíz donde está alojado tu sitio web, localiza el archivo .htaccess y lo editamos con tu editor de texto favorito.
# BEGIN GZIP
mod_gzip_on Yes
mod_gzip_item_include file .html$
mod_gzip_item_include file .php$
mod_gzip_item_include file .css$
mod_gzip_item_include file .js$
mod_gzip_item_include mime ^application/javascript$
mod_gzip_item_include mime ^application/x-javascript$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include handler ^application/x-httpd-php
mod_gzip_item_exclude mime ^image/.*
# END GZIP
Si falla # BEGIN GZIP utilizaremos el siguiente fragmento
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
# END GZIP
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 ^application/javascript$
mod_gzip_item_include mime ^application/x-javascript$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include handler ^application/x-httpd-php
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
Especificar el caché de tus archivos
El caché lo que hace es guardar archivos en tu ordenador (temporalmente) cada vez que visitas una página web. De esta manera, la próxima vez que visites esa misma página web tardará menos en cargar puesto que ya tenías algunos archivos de esa web guardados en tu ordenador.
Accede a la carpeta raíz donde está alojado tu sitio web, localiza el archivo .htaccess y lo editamos con tu editor de texto favorito.
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"
Minimizar el JAVASCRIPT, HTML y CSS de tu web
Si utilizas sublime text como editor de texto, puedes instalar el package Minify o bien utilizar https://www.willpeavy.com/minifier/ que minifica todo el código.
Y si trabajais con Wordpress, podeis utilizar el plugin gratuito Autoptimize.
Cuando le hayas instalado, simplemente marca las casillas de optimizar HTML, CSS y JavaScript.
Reducir el tiempo de respuesta del servidor
Accediendo a vuestro panel de hosting, es importante utilizar siempre la versión más reciente de PHP, ya que mejora considerablemente la manera en la que se gestiona desde el servidor el número de peticiones de PHP. Tienes que utilizar las versiones 7.* en adelante.
Optimizar al máximo las imágenes
Cuanta más calidad tengan tus imágenes más pesarán y más lenta será tu sitio web. Por lo tanto, lo mejor que puedes hacer es reducir su tamaño hasta que la calidad de la foto te lo permita.
- 1. Reduzco el tamaño de la imagen lo máximo posible.
- 2. Guardo la foto en el formato correspondiente y me aseguro de que la imagen no pese más de 100KB.
- 3. Utilizo la herramienta online compressor.io para reducir aún más el tamaño de la imagen sin que pierda calidad
Tipos de formatos de imágenes:
- GIF: Para animaciones.
- PNG: Para archivos de muy pocos colores, esencial para logos o iconos.
- JPG: Para el resto de imágenes como fotografías.
Una vez tratadas y subidas las imágenes a tu WordPress te recomiendo que utilices el plugin Smush Image Compression and Optimization. Este plugin lo que hace es optimizar aún más tus imágenes sin que pierdan calidad. Tambien puedes utilizar esta herramienta en línea para optimizar las imágenes sin perder calidad: https://compressor.io/
Elimina el JAVASCRIPT que bloquea la visualización y el CSS del contenido de la mitad superior de la página
Este error te indica que la página tarda demasiado en cargar ya que primero tiene que cargar el CSS y el JAVASCRIPT antes que el contenido en sí.
Para solucionar este fallo y cargar ambos archivos de manera asíncrona tendrás que instalar el siguiente plugin.
Con el conseguirás realizar la famosa carga asíncrona de scripts y que lo primero que se cargue en tu web sea el contenido HTML.
Conclusión
Lo importante será que tu sitio web cargue. Por lo tanto, céntrate en contratar un buen hosting de calidad, utilizar el menor número de plugins posible y comprar una plantilla de WordPress optimizada para SEO (en caso de utilizar Wordpress). En caso de ser una web a diseño, deberás quitar todos los fragmentos de javascript que no se utilicen para conseguir un código limpio y optimizado.
