Optimización del sitio web para GooglePage Speed ​​(todas las funciones se tienen en cuenta después de su actualización) Parte 1

Este artículo será interesante para cualquier persona que se enfrentó a todo tipo de problemas después de actualizar Google PageSpeed ​​y las reclamaciones de los clientes o del jefe, por qué cayó la pelota o hubo tantos comentarios. Y también para aquellos que hacen la optimización del sitio.
En primer lugar, vale la pena mencionar que en este artículo , en mi opinión, todo está pintado de manera muy competente y accesible.

Yo mismo agregaré más consejos prácticos , y también será interesante escuchar su punto de vista y ver sus mejores prácticas.

Voy a enumerar de qué hablaré en este artículo:

1. CSS y JS
   
   • conexión de archivo
   • cargando bibliotecas
   • trucos
   
   
2. Fuentes
   
   • conexión de fuente
   • mostrar fuentes durante la carga de la página
   
   
3. Imágenes
   
   • diferentes formatos (jpg, png, webp, base64)
   • sprite

Y si permaneció en este artículo hasta este momento, lo más probable es que esté interesado (o el botón "atrás" se ha desactivado para usted). A continuación encontrará más detalles sobre cada elemento.

CSS y JS

Js

1. Se requerirá la propiedad asíncrona para los scripts de complementos (excepto jQuery). Esto definitivamente lo salvará del comentario de GPSpeed ​​sobre la carga de scripts asíncronos.
2. El consejo es común, pero es muy sensato: intente utilizar bibliotecas complejas y masivas al mínimo.
3. Es mejor cargar la configuración de la biblioteca js (slick, fancybox) o pequeñas piezas de código que realizan diferentes tareas al servidor con un solo archivo. En mi caso, tanto el script para enviar el correo como la máscara para la entrada y la animación, y todo está en el mismo archivo build.js (al que también configuré de forma asíncrona) .
4. Este consejo es situacional, es decir, mira la situación. Si tiene algún tipo de script ejecutándose justo después de abrir la página en su primera pantalla, será más correcto conectarlo por separado y no darle asíncrono

CSS

1. Aquí un poco más complicado. Deberá agregar dicha propiedad a la etiqueta de enlace .
   
   

   <link media="none" onload="if(media!="all") media="all"" rel="stylesheet" type="text/css", href= main.css> 

   
   Es de esta forma que sus archivos CSS se conectarán solo después del árbol DOM. En términos generales, esto es lo mismo asíncrono para .css solamente
2. ¡Un consejo muy importante y efectivo! Agrega 5 a 10 puntos garantizados. Necesita dividir su main.css en dos archivos . En el primero solo habrá aquellos estilos que se cargan para el contenido que es visible inmediatamente después de abrir la página. Esta es la barra superior, el encabezado, la primera imagen, el primer formulario, etc. En general, lo que pones en la "cara" de tu sitio. En el segundo, todo lo demás ya está.

Fuentes

Descubrí una nueva propiedad css para fuentes

 font-display 

Específicamente, su parámetro de intercambio , que, sin esperar la carga de su fuente hermosa y pesada, muestra el texto en el navegador usando la fuente integrada en el mismo navegador (por ejemplo, sans-serif). Esto elimina inmediatamente uno de los errores en GPSpeed.

Se verá así

  @font-face { font-family: 'FontName'; src: local('FontName'), url('FontName.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } 

También existe un script de este tipo (debe conectar fontfaceobserver.js para su funcionamiento):

 <script> var html = document.documentElement; if (sessionStorage.fontsLoaded) { html.classList.add("fonts-loaded"); } else { var script = document.createElement("script"); script.src = "../js/fontfaceobserver.js"; script.async = true; script.onload = function() { var regular = new FontFaceObserver("FontName"); var bold = new FontFaceObserver("FontName", { weight: "bold" }); var light = new FontFaceObserver("FontName", { weight: "300" }); Promise.all([ regular.load(), bold.load(), light.load() ]).then(function() { html.classList.add("fonts-loaded"); sessionStorage.fontsLoaded = true; }); }; document.head.appendChild(script); } </script> 

Personalmente, realmente no ayudé, pero intenta, tal vez puedas controlarlo mejor. Después de todo, lo encontré en el vasto, y la gente decía que eso realmente ayuda.

Conexión de fuente

1. Básicamente, hay dos tipos de conexión: usar un enlace (por ejemplo, a fuentes de Google, o localmente, en el servidor. Entonces, con respecto al segundo método, también se puede dividir en 2: un archivo css separado (usando el enlace conectamos fonts.css ) y directamente a través del código (a través de su style.css).
   Y como ahora estamos hablando de optimizar el sitio para GPSpeed, estaba convencido de que es mejor conectar las fuentes a través de su archivo css principal.
2. Y otro consejo que ayuda es colocar los archivos de fuente (woff, ttf, etc.) al lado de su archivo css que lo solicita. Solía ​​tener una carpeta separada en el servidor para las fuentes, pero luego las moví, la velocidad de carga de las fuentes aumentó 2 veces. (según GPSpeed, me tomó 180 ms conectar la fuente Muller antes, ahora 70-90 ms)

Imágenes, fotos, etc.

Doy fe de los siguientes 2 consejos, me ayudaron no solo a mí, sino a toda la oficina e incluso a mis amigos a trabajar de forma remota.

1. Descargue absolutamente todas las imágenes <img > usando lazyloading. Se verá así

 <img class="yourClass lazy" data-src="../images/image.jpg" alt=""/> 

Y no olvides conectar lazyload.min.js

2. Si tiene muchos elementos sv g en la página, entonces es mejor agregarlos con código limpio , sin el uso innecesario de la etiqueta img. Además, svg debe exprimirse, por ejemplo, usando este sitio jakearchibald.imtqy.com/svgomg (no publicidad).

3. Trillado, pero no olvides apretar TODAS las fotos en el sitio. Incluso aquellos que pesan 5kb. Aunque estos 3 kb que ganes no afectarán la velocidad de descarga de ninguna manera, eliminarás el error en GPSpeed ​​y te sumarás hasta 10 puntos.

! Ahora el punto problemático son los formatos de imagen. A saber, estamos preocupados por webp, JPEG 2000, JPEG XR . De hecho, ahora es una de las extensiones de GPSpeed ​​recomendadas. Como saben, todavía no son compatibles con algunos navegadores, entre los que se encuentra el bastante popular Mozila Firefox. Aunque anunciaron que en marzo habrá soporte completo para este formato, aún tenemos que esperar otro año hasta que todos los usuarios de este navegador se actualicen a la última versión ... Rebusqué en un montón de sitios, un montón de scripts, pero no encontré nada sensato. Así que ahora es mi momento para hacerle una pregunta: ¿está utilizando el formato webp o algún otro formato de imagen nuevo? Y como lo haces