Jueves, 21 de Abril de 2016

Optimizar la velocidad de carga de una web con PageSpeed Insights

Trucos simples y efectivos para mejorar nuestras páginas web

Con la llegada de los móviles como dispositivos para navegar en internet, los programadores web hemos vuelto a tener que luchar con conexiones lentas... y es que dependiendo de donde se encuentre nuestro usuario, la cobertura 3G nos puede hacer recordar aquellos módems de finales de los 90. Puesto que no queremos decepcionar a nadie, las páginas web que programemos y maquetemos hoy en día deberán cumplir con una serie de parámetros para que ningún usuario tenga tiempo de tomarse un café mientras se conecta a nuestras páginas web.

Para optimizar la velocidad de carga de nuestras web, el recurso más efectivo es Google PageSpeed Insights: se trata de una herramienta gratuita del todopoderoso Google que analizará la url que le indiquemos y nos guiará en la resolución de los problemas que pueda encontrar. Cabe destacar que en ningún momento estaremos midiendo la velocidad del servidor, sino únicamente la optimización del código fuente.

Y aquí van una serie de trucos que permiten conseguir dicha optimización y que nuestra web se cargue más rápidamente (y de paso le agrade un poco más a Google ;)

En nuestro fichero .htaccess, declararemos la caché para los elementos estáticos (javascript, css, imágenes etc)

<IfModule mod_expires.c>
<FilesMatch "\.(jpg|gif|png|css|js|ico)$">
ExpiresActive on
ExpiresDefault "access plus 7 day"
</IfModule>

A continuación, en el mismo fichero, forzaremos el envío comprimido de nuestros contenidos

<IfModule mod_deflate.c>
AddOutputFilter DEFLATE js css
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

En nuestro html, en lugar de cargar tropecientas hojas de estilos, intentaremos unificarlas para reducir el número de peticiones al servidor.
En cuanto a javascript, lo moveremos del <head> al final del documento, antes del </body>.
No podremos por lo tanto ejecutar javascript de entrada en ninguna página, ya que nuestras funciones aún no habrán sido declaradas (las hemos puesto al final). Para obviar este pequeño inconveniente, colocaremos las instrucciones a ejecutar inicialmente dentro del $(document).ready(function(){ ... }); que también habremos colocado al final de la página
Si utilizamos fuentes de Google Fonts mi consejo es cargarlas a través del método Javascript propuesto por Google. Y sobretodo, en la hoja de estilo cuando vayamos a utilizar esta fuente, declaremos siempre como segunda opción otra fuente estandard (Verdana, Arial, etc) para que nuestro contenido sea visible enseguida, aunque sea con otra tipo durante unos instantes, sin tener que esperar a que se cargue la fuente definitiva.

Con todos estos pasos en marcha seguro que mejoraremos considerablemente la puntuación otorgada por PageSpeed Insight y nuestras páginas tardarán menos en cargarse: ¡habremos conseguido hacer contentos tanto a nuestros usuarios como a Google!

« Ver todos los artículos

Optimizar la velocidad de carga de una web con PageSpeed Insights

Trucos simples y efectivos para mejorar nuestras páginas web

Déjanos tu opinión:

Compártelo

¿De qué se habla en esta web?