La herramienta de google pagespeed insights se utiliza para comprobar que la velocidad de carga sea lo mas rapido posible.
Disponde de dos pestañas movil y ordenador en el que se nos da pistas para mejorar el rendimiento de la pagina.
En este articulo veremos los diferentes errores y avisos y como solucionarlos.
Lo primero que hay que decir de que dependiendo de como esta hecha una web, sera mas o menos costoso llega al 100 del pagespeed insights.
1 ESPECIFICAR CACHÉ DE NAVEGADOR
En una pagina web utilizamos archivos con extension .css .html .jpg .gif .png .js los cuales tenemos que especificarles el tiempo que deseamos que esten en el cache del navegador del usuario.
En la practica esto se soluciona, modificando o añadiendo lineas en el archivo .htaccess
Si desea mas información visite algunas de estas paginas
Archivo htaccess valido para cualquier tipo de web
A TENER EN CUENTA: Si el archivo no esta alojado en tu alojamiento no puedes hacer nada para modificar el cache de ese archivo, la solución consiste en descargar ese archivo y subirlo al alojamiento nuestro.
Esta solución no es posible en todos los casos ya que depende del archivo sobre todo los .js, los cuales suelen hacer referencia a otros archivos .js
2 ELIMINAR EL JAVASCRIPT QUE BLOQUEA LA VISUALIZACIÓN Y EL CSS DEL CONTENIDO DE LA MITAD SUPERIOR DE LA PÁGINA
Si su pagina esta diseñada con un gestor de contenidos Wordpress, Joomla, Pretashop...desactive y elimine todos los plugins, modulos o componentes innecesarios y luego siga los pasos que le describo a continuación.
Este error suele ser el mas problematico de solucionar y consta de dos partes:
¿Como eliminar el javascript que bloquea la visualización?: Mueva todas las lineas que hacen referencia a un script al final de la página una linea antes del /body y añada el parametro async o refer al script.
¿Como eliminar el css que bloquea la visualización?:
Compruebe todos los css que tiene en su web, probablemente tenga uno en la que se carga todo el aspecto de la página y seguramente sera el de mas tamaño.
Edite el contenido de ese archivo y mueva algunas de esas lineas a la propia pagina html, debera insertar esas lineas entre estas dos etiquetas style.../style e insertarlas antes del /header.
La referencia del archivo css sin las lineas anteriores que quedan, muevalo al final del /body.
La cantidad de lineas css a insertar en el html, hacen que aumente el tamaño de la pagina html, intente no sobrepasar los 30K de pagina html.
3 HABILITAR COMPRESIÓN
Activa el modulo Gzip en el htaccess el cual comprime los archivos. Para poder utilizarlo debera estar instalado en su alojamiento o servidor. Si no sabe si lo tiene, debera de preguntar a su proveedor de hosting.
4 OPTIMIZAR IMAGENES
Las imagenes que utiliza debera de editarlas y prepararlas para ser utilizadas dentro de una pagina web. Basicamente lo que hay que hacer es eliminar los metadatos de una imagen, ademas, hacer que el tamaño de la imagen sea el adecuado a la pagina web.
Como norma basica, contra menos bytes ocupe una imagen antes se cargara.
5 REDUCIR EL TIEMPO DE RESPUESTA DEL SERVIDOR
Cuando se produce este aviso es debido a que hacemos demasiadas referencias a archivos externos fuera de nuestro alojamiento, como js, css o imagenes alojados en terceros.
6 MINIFICAR JAVASCRIPT
El contenido de los archivos JS, se puede hacer que ocupen menos espacio eliminando comentarios y espacios en blanco.
7 MINIFICAR HTML
El contenido de los archivos HTML, se puede hacer que ocupen menos espacio eliminando espacios en blanco y lineas vacias.
8 MINIFICAR CSS
El contenido de los archivos CSS, se puede hacer que ocupen menos espacio eliminando comentarios y espacios en blanco.
9 EVITA LOS REDIRECCIONAMIENTOS A PAGINAS DE DESTINO
A google no les gusta que dentro de la pagina exista un redireccionamiento o un frame
10 PRIORIZA EL CONTENIDO VISIBLE
Cuando se produce este aviso normalmente hay que rediseñar la web y en concreto el 25 por ciento de la parte superior de la pagina.
11 APLICAR EL TAMAÑO ADECUADO A LOS BOTONES TÁCTILES
Este aviso se suele producir en la pestaña de movil y suele ser debido a que hay dos hipervinculos uno debajo del otro, como por ejemplo dos botones de redes sociales o dos imagenes muy pequelas con un hipervinculo cada imagen.
