19/07/2017
Caso de estudio: este blog. Web performance
Bueno, para mi es hot topic, es algo que siempre me ha interesado/preocupado pero que ahora es top priority, así que como los resultados están bien, explico lo que he hecho en este blog.
Como disclaimer decir que este caso es especial en el sentido de que es una página muy sencilla y que como está toda hecha por mi (backend y frontend) y sin utilizar ningún framework/CMS pues he podido hacer lo que me ha dado la gana. Todo un gustazo.
Y como tl;dr: PageSpeed Insights => 99/100; Web Page Test => todo «A»s; YSlow => 97%; Tiempo de carga en 3G => 2s; ...
Número de peticiones
Esto es clave, a menor número de peticiones mejor velocidad de carga, de cajón. Este blog hace 6 peticiones en la primera carga y tres en las siguientes:
- El documento en sí (esta no hay manera de salvarla, se repite en cada petición)
- Web fonts (uso dos familias, así que cuenta como dos)
- Google analytics (hace dos peticiones, una para el javascript y otra para una imagen «fantasma», se repiten en cada petición)
- Una imagen de fondo (una textura sutil, a lo loco)
Podría llamar la atención que no hay hoja de estilos, bueno, en mi proceso de generación del sitio (es un generador de sitios estáticos) aprovecho para embeber el CSS, de momento el tiempo necesario para generar todo el sitio es de un segundo y medio, me lo puedo permitir, además, con eso consigo que no me riñan por tener recursos que bloquean la carga de la página...
Utilizo unos iconos, utilizo SVG y también lo tengo embebido, así me ahorro otra petición.
Y creo que ya, eso es todo.
Caché de recursos estáticos
Añadir cabeceras de expiración lejanas. Tengo un mes, podría tener más, tengo preparado el versionado de los archivos, pero de momento así está bien. El único que me penaliza aquí es el javascript de Google analytics, pero les perdono, no pasa nada.
Imágenes «responsives»
Tampoco tengo muchísimas imágenes, pero cuando las tengo utilizo srcset y sizes para indicar al navegador los tamaños de mis imágenes, cuatro tamaños: 375px, 700px y 940px de ancho. Todo con un proceso automático (si no no se hace). Y bueno, ya que me pongo pues si son jpgs los hago progresivos que mola más (no uso webp, no sé porqué).
Minificación y compresión
Sí, a todo. Lo único que no hago es minificar el HTML, el mótivo es sencillo, me gusta mirar el código fuente, normalmente uso las herramientas de desarrollo del navegador, pero para echar un ojo rápido de manera general pues peco de ctr+u (Firefox FTW) y como no hagas a los demás lo que no quieres...
HTTP/2
Porque puedo. Tampoco es una ventaja abismal en mi caso, es más, no utilizo una de sus mayores ventajas (¡tengo el CSS embebido!), pero tengo un mini problema con mi servidor a la hora de servir la página y con HTTP/2 reduje ese tiempo un poco, aún así, ¡500ms TTFB en una página estática! ¡Inaceptable!
Y eso es basicamente lo que he hecho de manera especial, lo demás viene un poco de serie al hacer las cosas con cuidado, a mano y de manera «artesanal».
