Consejos simples y útiles que le permitirán maximizar su sitio web sin tener que profundizar en las métricas de Google PageSpeed y Lighthouse.
Javascript- En lugar de JavaScript, intente usar etiquetas HTML5 con más frecuencia: <input type = date>, <input type = time>, Detalles / Resumen , etc.
Muy a menudo olvidamos o ni siquiera sabemos acerca de las soluciones preparadas integradas en los navegadores que funcionarán mejor en diferentes dispositivos y que no requieren código JavaScript adicional. - Utiliza la minificación del código JavaScript.
- Intente poner todo su código JavaScript en el pie de página o en la carga retrasada, y cuanto menos JavaScript haya en <head>, mejor será el rendimiento en Google PageSpeed.
- <script src = "file-path"> requiere acceso adicional al servidor, recuerde esto.
Si en lugar de un archivo JavaScript, inserte el contenido del archivo en el pie de página:
<script> </script>
Entonces, la primera descarga será más rápida, pero no habrá almacenamiento en caché del archivo JavaScript.
Carga retrasada- Utilice la carga diferida (diferida) para imágenes, iframe, video, audio, javascript y otros objetos similares. Debe incluirse para los elementos que están en ventanas emergentes o en la segunda y siguientes pantallas de la página.
Para estos fines, hay muchas bibliotecas: lazyload, lazysizes, autoload, etc. - Puede usar la carga diferida nativa en Chrome.
- VK ofrece colocar una conexión de código JavaScript en <head> para que su widget de comentarios funcione, pero esto reduce la velocidad de la página de Google y la velocidad de carga de la página.
En lugar del código que ofrece VK:
<script type="text/javascript" src="https://vk.com/js/api/openapi.js?162"></script> <script type="text/javascript"> VK.init({apiId: ID, onlyWidgets: true}); </script> <div id="vk_comments"></div> <script type="text/javascript"> VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"}); </script>
Pegue el código ligeramente modificado debajo de la descarga retrasada:
<div id="vk_comments"></div> <script onload="showvk()" data-aload data-original="https://vk.com/js/api/openapi.js?162"></script> <script> function showvk() { VK.init({apiId: ID, onlyWidgets: true}); VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"}); } </script>
Como resultado, obtenemos un código que se cargará solo cuando la pantalla se desplace al widget.
El código de mapa que Google ofrece para insertar en el sitio:
<iframe src="https://www.google.com/maps/embed?pb=!1m14" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
Si la tarjeta está en una ventana emergente o lejos en el pie de página, entonces una persona que visite su página inmediatamente comenzará a cargar una gran cantidad adicional de este marco y la velocidad de carga de dicha página será muy lenta, ¡Google PageSpeed le dará un signo negativo y uno grande!
Pegue el código ligeramente modificado debajo de la descarga retrasada:
<iframe data-aload data-original="https://www.google.com/maps/embed?pb=!1m14" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
Todo se reduce a no darle al navegador src = "" de inmediato, sino solo cuando una persona realmente lo necesita. ¡Y así con todos los objetos!
Jquery- Si es posible, no use Jquery en sus proyectos y esto aumentará significativamente la velocidad de su sitio, pero si ya lo está usando, reemplácelo gradualmente con JavaScript nativo puro.
- Si conecta Jquery a <head>, esto bloquea la visualización de la página, ya que el navegador espera hasta que se cargue todo lo que está en <head>, y solo entonces muestra la página. Pero dado que la biblioteca en sí es pequeña, e Internet es rápido para todos, esto tiene poco efecto en la velocidad, Google si baja la calificación, entonces es de 0.5, aunque antes de 10 o 20 puntos se disparó por eso ...
- Todo el código jquery que escribió o las bibliotecas jquery que usa se ubican mejor en el pie de página del sitio, debido al bloqueo de la pantalla. Si no puede transferirlo al pie de página, entonces tal vez debería usar la ejecución de código retrasada, un artículo sobre este tema: Uso seguro .ready () antes de incluir jQuery .
Fuentes- Fuentes de Google
- Si Google ha estado conectando la fuente durante mucho tiempo, asegúrese de conectarla nuevamente, ya que la presencia de & display = swap en la URL es importante: esta es una nueva opción que afecta a Google PageSpeed y le permite mostrar texto en la página antes de cargar la fuente ... no siempre es hermosa, pero aumenta velocidad de visualización del sitio ... y afecta a Google PageSpeed
- Si es posible reemplazar las fuentes de Google con sus propias fuentes, entonces hágalo, es mejor si las fuentes están en su servidor, esto también aumenta la velocidad.
- Al elegir una fuente en Google Fonts, intente elegir el mínimo de opciones, elija solo lo que necesita, y si no usa una fuente inclinada o un grosor de 200 en el sitio, no seleccione esto en la configuración, ya que esto afectará la velocidad de descarga.
- Fuentes personalizadas
- Verifique el estilo de fuente css-display: swap; en sus fuentes, Google PageSpeed presta atención a esto y subestima si este estilo no vale la pena:
@font-face { font-family: 'Saira Condensed'; src: url(sairacondensed.woff2) format('woff2'); font-display: swap; }
- Si conecta las fuentes a través de una hoja de estilo separada, esto afecta el tiempo de la primera representación y reduce el rendimiento de Google PageSpeed, es mejor no hacerlo:
<link href="/fonts.css" rel="stylesheet">
Si inserta una conexión de fuente en <head> a través de la etiqueta <style>, y no a través de <link>, esto mejorará la velocidad de descarga y el rendimiento de Google PageSpeed, ya que el navegador no necesitará acceder por separado a su hoja de estilo:
<head> <title>Demo</title> <style> @font-face { font-family: 'Saira Condensed'; src: url(sairacondensed.woff2) format('woff2'); font-display: swap; } </style> </head>
- Si es posible, elimine todas las cosas innecesarias que no esté utilizando de sus archivos de fuentes para aumentar la velocidad de descarga.
- Puede realizar la carga de fuentes en dos pasos: Desarrollar una estrategia sólida de carga de fuentes para trucos CSS
CSS- Intente deshacerse del exceso de código CSS para los navegadores antiguos, incluidos los prefijos -moz- -o- -ms- -webkit-
- Intente no cargar estilos que no se usan en esta página, pero se usan en otras páginas del sitio.
- Si es posible, vale la pena cargar piezas de código CSS y HTML a través de la carga retrasada.
- Para cargar estilos con <link href = 'st.css' rel = 'stylesheet'> ralentiza la carga de la primera página y su representación, pero hace posible que el navegador almacene en caché este archivo.
Si tiene estilos únicos para cada página o más importantes para usted que la carga de la primera página es un poco más rápida, entonces insertamos la etiqueta de estilo en lugar del archivo:
<style> </style>
- Utilice la minificación CSS, como Cssresizer u otras herramientas similares.
HTML- Cuantas más etiquetas HTML en la página, más recursos necesita el navegador para representar la página, y esto afecta el rendimiento de Google PageSpeed, pero solo si su página está demasiado sobrecargada con etiquetas.
- Evite anidar en exceso las etiquetas HTML; Google PageSpeed también presta atención a esto.
- Vale la pena limpiar su HTML del código para navegadores antiguos, ya que generalmente es ese código el que crea una gran cantidad de etiquetas adicionales y anidadas.
- La cantidad de etiquetas y el anidamiento afectan especialmente a Google PageSpeed para dispositivos móviles.
Imágenes- Use la etiqueta <picture> para usar formatos de imagen modernos (JPEG 2000, JPEG XR y WebP). Google PageSpeed presta atención a esto si no tiene una carga lenta de imágenes.
<picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt=""> </picture>
También puede usar medios y sustituir diferentes imágenes para diferentes resoluciones y diferentes densidades de píxeles.
<source media="(max-width: 640px)" srcset="image.png, image-retina.png 2x">
Esto es útil tanto para imágenes como para videos.
Menos: necesita mucho espacio, ya que tendrá que almacenar diferentes formatos de imagen (video) y con diferentes resoluciones. - Utilice la carga diferida para todas las imágenes que están en ventanas emergentes o en la segunda y siguiente pantalla de la página.
- Utilice la compresión máxima de imágenes, Google PageSpeed también llama la atención sobre esto. Hay muchas herramientas de compresión, una por ejemplo: compressor.io
Configuraciones del servidor- Habilite el almacenamiento en caché de archivos estáticos (fuentes, scripts, imágenes, CSS, etc.), mientras configura el año de almacenamiento en caché, de lo contrario, Google jura.
- Habilitar la compresión gzip.
- Utilice los encabezados HTTP Last-Modified y If-Modified-Since para almacenar en caché las páginas.
Comunicación- Los resultados dependen en gran medida de qué tan lejos esté su servidor de usted. Si está en Hawai y el servidor está en Moscú, los resultados para usted serán desastrosos.
- Los resultados dependen de su servidor y computadora, y si durante las pruebas el servidor o la computadora se sobrecargó con algo, entonces el resultado será malo.
ConclusiónEs imposible exprimir PageSpeed 108 o más puntos :)
No tiene sentido apretar incluso 100 puntos debajo del móvil. ¡Debemos luchar por 100 y no caer en la paranoia! Este es solo uno de los muchos indicadores que son importantes para el sitio.
Puede ver
un ejemplo de una página donde los indicadores para móviles son 97-98 y 100 para una computadora.
En esta página hay 2 videos de YouTube en ventanas emergentes y el video se activa solo cuando la ventana emergente está abierta.
Todas las imágenes se colocan en carga diferida.
Todo JavaScript se representa desde <head> en el pie de página de la página.
Pero al mismo tiempo, los siguientes están conectados a <head>: contadores Jquery, GoogleFonts y Yandex (Google).
Los estilos se insertan en la etiqueta <style> de códigos de estilo </style>.
<imagen> no se utiliza en esta página.
Hay varias secciones en la página que están presentes en la página, pero solo son accesibles a través de un enlace directo para los clientes, deberán cargarse según sea necesario, lo que reducirá la cantidad de código html y css.
Gracias por su atencion!