🔥 Optimizar

PageSpeed
De caracol a liebre. Cómo hacer que tu página web sea la más rápida

Cómo mejorar el índice de Google PageSpeed de tu página web. Te cuento cómo lo hemos hecho para esta misma página,  www.phpninja.info.

Recopilando información

Lo primero ha sido instalar plugins de WordPress para ver dónde tenemos los cuellos de botella: Query Profiler, P3 Profiler para saber que plugins consumen y donde, y Hummingbird como sistema de cache para WP, después de hacer pruebas con W3Total Cache y WP Fast Cache, Hummingbird me ha dado mejor resultado.

Empezamos por abrir Chrome Developer Tools > Audits. Primera Audit en Desktop, este es el resultado:

Importante quedarse con el botón View Trace.

No son del todo ciertos, porque en este punto ya hice mucho de lo fácil. Optimizar las imágenes, minificar y unificar CSS/JS. Poner JS al final. Te recomiendo mucho este otro post sobre cómo hacer que WordPress vaya más rápido.

Resumiendo lo que tenemos que solucionar en PhpNinja:

  • Issues en las redirecciones con htaccess. Usamos el plugin polylang para idiomas y tenemos habilitado https. Con lo que hay varios pasos. Estoy seguro que puedo ahorrar 1 o 2 pasos. Después de redireccionar http a https, non www a www, nos falta el último paso de redireccionar al idioma correcto, detectado del navegador.
  • Servidor está en Media Temple (California), pero 40% del tráfico viene de España.
  • 4,5 segundos hasta interactivo. 1980ms para la respuesta de servidor.
  • Usamos Semantic UI para el CSS. 500ms para cargar el minificado. He usado otro css para sobre escribir propiedades de Semantic UI. Escribir mal css afecta directamente al tiempo de carga.
  • El Semantic UI Js también requiere unos 300ms y no usamos ni 10%. Habría que recompilar sólo con los módulos css y js que usamos.
  • Imágenes grandes están añadiendo más de 1 segundo y bloqueando la carga de otros recursos.
  • P3 Profile nos muestra que tenemos varios plugins instalados. Realmente usar un plugin entero para insertar el código de seguimiento de google analytics no hace falta. Tampoco hace falta tener los plugins P3 Profile o Query Monitor activos si no estamos optimizando o debugueando nada.

Le damos al botón “view trace” y veremos el siguiente gráfico.

 

Con todo esto ya tenemos perfectamente claro que es lo que debemos arreglar en el front.

Recomiendo muchísimo el otro artículo sobre cómo optimizar WordPress.

Comparando WP Fast Cache y Hummingbird

 

Realmente, no hace falta optimizar mucho WordPress si podemos usar un caché. Hemos pasado a 1,4 segs solo por servir versiones html cacheadas de las páginas.

5- Con WP-Fastest Cache:

Ganador: Hummingbird. Este es el resultado después de usar el caché de Hummingbird, mover los JS al footer y minifcar tanto html, como css y js:

Plugins WordPress

El Plugin P3 Profiler nos da una idea clarísima de los plugins que más ralentizan nuestra página web. Si no son vitales, ni imprescindibles ni los usamos siempre fuera. Activarlos sólo cuando sean necesarios.

Optimizar CSS

Si usas un framework de css, intenta compilarlo tu mismo con los componentes que necesites. Eso es sácate de encima todos los componentes que no uses. A parte de esto intenta un sólo archivo unificado y minificado , con pocos overwrites. Intenta setear las propiedades CSS a sus valores finales lo antes posible.

Tiempo hasta el primer byte

El problema sigue siendo el tiempo hasta el primer byte. Eso es el tiempo que pasa el navegador esperando a que el servidor le mande el primer byte. A parte de optimizar las redirecciones de htaccess, al estar todo cacheado, poco más se puede hacer para mejorar esto que cambiar de servidor o usar un servicio como cloudflare. En Media temple tengo Cloudflare gratis, así que activado.

Menos redirecciones  HTTP -> HTTPS

El peor caso es cuando tenemos que redireccionar phpninja.info a https://www.phpninja.info.
El mejor caso es cuando sólo es http:// => https://. Recomiendo utilizar http://redirectdetective.com/ para saber que es lo que sucede.

Optimizar dependencias

Servir un sólo archivo de CSS y un sólo archivo JS.
Estoy incluyendo la libreria Semantic al completo cuando no uso ni 10%, además esta incluye otra Google Font. El navegador descarga más rápido un archivo de 100Kb que 10 archivos de 10kb.

Resumen

Recopila toda la información que puedas para encontrar los cuellos de botella y verás que no tiene mucho secreto. Usa https://www.webpagetest.orghttps://developers.google.com/speed/pagespeed/insights/ para conocer el rendimiento de tu página web.

 

Quieres mejorar el rating que te da PageSpeed Insights? Podemos ayudarte.

 

Beto López
Beto López
Programador de páginas web "full stack" especializado en el mantenimiento y corrección de errores de Wordpress, Prestashop, HTML, CSS, Javascript, Php y Mysql. También colaborador de proyectos open source. Linkedin  contacto@phpninja.info twitter @betoayesa.

Arreglaremos tu página web, puedes estar tranquilo
Deja tu correo electrónico, teléfono o Skype y nos pondremos en contacto


¿Alguna duda? Contacto

Php Ninja ‐ Arreglamos lo que otros simplemente no pueden
El 96% de nuestros clientes nos recomiendan

© Php Ninja 2018 - All rights reserved. Política de privacidad
Padilla 179, Atico 1. 08034 Barcelona, Spain · contacto@phpninja.info · Estamos online desde 2001
English · Español · Català