 | Es posible que algunas de las fuentes enumeradas en este artículo no sean confiables . ( Marzo de 2017 ) ( Obtenga información sobre cómo y cuándo eliminar este mensaje de plantilla ) |
Google PageSpeed es una familia de herramientas de Google Inc , diseñada para ayudar a optimizar el rendimiento de un sitio web . [1] Se presentó en la Conferencia de desarrolladores de 2010. [2] [3] Hay cuatro componentes principales de las herramientas de la familia PageSpeed : Módulo PageSpeed , que consta de mod_pagespeed [4] para el servidor HTTP Apache y ngx_pagespeed [5] para Nginx , [6] PageSpeed Insights , PageSpeed Service y PageSpeed Chrome DevToolsextensión. Todos estos componentes están diseñados para identificar fallas en el cumplimiento de un sitio web con las mejores prácticas de rendimiento web de Google, así como para automatizar el proceso de ajuste.
Módulos PageSpeed [ editar ]
Los módulos PageSpeed son los módulos de servidor web Apache HTTP o servidores web Nginx de código abierto , que aplican automáticamente los filtros elegidos a las páginas y los activos asociados, como hojas de estilo , JavaScript y archivos HTML , así como a las imágenes y los requisitos de caché del sitio web . La mayor ventaja de estos módulos es que no requieren modificaciones en el contenido o flujo de trabajo existente, [7] lo que significa que todas las optimizaciones internas y cambios en los archivos se realizan en el lado del servidor, presentando los archivos modificados directamente al usuario. Cada uno de los más de 40 filtros corresponde a una de las reglas de prácticas recomendadas de rendimiento web de Google.
Dado que el módulo PageSpeed es una biblioteca de código abierto, numerosos desarrolladores de todo el mundo lo actualizan con frecuencia y cualquier sitio, proveedor de alojamiento o CDN puede implementarlo . [8]
La instalación es relativamente fácil y se puede realizar de dos formas: a partir de paquetes o compilar desde el código fuente en las siguientes plataformas compatibles:
- CentOS / Fedora , tanto de 32 bits como de 64 bits
- Debian / Ubuntu , tanto de 32 bits como de 64 bits
Puertos [ editar ]
Otros servidores que ofrecen un módulo de optimización de PageSpeed basado en el SDK de PageSpeed de Google:
- Servidor de tráfico Apache : ats_pagespeed [9]
- Servicios de información de Internet de Microsoft - IIS WebSpeed ← [10]
Filtros [ editar ]
Los filtros del módulo de velocidad de página son configuraciones, en función de las cuales se aplica una regla de optimización de la página web. Se pueden dividir en cinco categorías principales:
- Optimizaciones de hojas de estilo ;
- Optimizaciones de archivos Javascript ;
- Optimizaciones de imágenes ;
- Optimizaciones HTML ;
- Filtros de seguimiento de actividad .
Optimizaciones de hojas de estilo [ editar ]
Estos filtros cambian los archivos CSS a versiones optimizadas haciéndolos más pequeños, combinando varios en uno o extendiendo la vida útil de la caché:
| Nombre del filtro | Descripción |
|---|---|
| Combinar CSS | Si una página requiere varias hojas de estilo , este filtro las combina en una hoja de estilo, lo que reduce el número de solicitudes a un servidor web. |
| Ampliar caché para hojas de estilo | Aumenta el tiempo que los archivos CSS almacenados en caché deben mantenerse en el almacenamiento local , lo que evita solicitudes adicionales y carga de datos cuando un usuario regresa a la misma página web. |
| Aplanar importaciones de CSS | Reemplaza todas las reglas "@import" con el contenido de los archivos importados, si el tamaño de los archivos de hoja de estilo afectados es menor que el número de bytes predeterminados establecidos por el subfiltro "CssFlattenMaxBytes". Esta optimización está diseñada para reducir el número de solicitudes del navegador web. |
| Inline @import To Link | Transforma las reglas "@import" en las etiquetas "<link>" correspondientes . Se utiliza principalmente para el trabajo adecuado de los filtros aplicados posteriormente. |
| CSS en línea | Inserta el contenido de pequeños archivos de hoja de estilo externos directamente en el documento HTML , lo que reduce el número de solicitudes. Este filtro se aplica solo a las hojas de estilo que son más pequeñas que un tamaño establecido por el subfiltro "CssInlineMaxBytes" |
| CSS de la API de fuentes de Google en línea | Inserta las hojas de estilo que utiliza la API de fuentes de Google , si son más pequeñas que un valor, que se establece mediante el subfiltro "CssInlineMaxBytes". |
| Mover CSS por encima de los scripts | Reorganiza el orden de carga de las hojas de estilo y los archivos javascript , asegurando que los scripts no bloqueen los recursos CSS. Mejora la representación de una página web, lo que reduce los tiempos de carga [11] |
| Mover CSS a la cabeza | Coloca la inclusión de hojas de estilo antes de que se introduzca cualquier elemento <body>, lo que reduce el tiempo de carga al eliminar los reflujos de una página web [12] |
| Esquema de CSS | Filtro experimental que coloca reglas CSS integradas en un recurso externo. La idea detrás de esto es crear conexiones paralelas a diferentes servidores en lugar de consecutivas al mismo host. Este filtro intentará delinear solo las hojas de estilo más grandes que las establecidas por el subfiltro "CssOutlineMinBytes" |
| Priorizar CSS crítico | Reemplaza las hojas de estilo con reglas CSS en línea , que contienen solo las reglas necesarias para la ventana gráfica inicial , y difiere el resto de las reglas CSS para que se carguen después de que la página esté completamente cargada. |
| Reescribir CSS | Permite aplicar otros filtros relacionados con la imagen y la hoja de estilo a las hojas de estilo locales. Además, este filtro minimiza todo el CSS. Tiene impacto en el tamaño de la carga útil |
| Reescribir atributos de estilo | Implementa la misma optimización que el filtro "Reescribir CSS" en todas las reglas, declaradas en los atributos "<estilo>" |
Optimizaciones de archivos JavaScript [ editar ]
Estos filtros se aplican a los archivos Javascript, volviéndolos a referir a archivos optimizados:
| Nombre del filtro | Descripción |
|---|---|
| Canonicalizar las bibliotecas de Javascript | Reemplaza las bibliotecas javascript populares con las últimas versiones gratuitas remotas, de las bibliotecas alojadas de Google de forma predeterminada. Esto potencialmente reduce la cantidad de solicitudes a los servidores en el futuro, ya que estas bibliotecas pueden estar en la memoria caché del navegador del usuario desde cualquier otro sitio web. |
| Combinar Javascript | Combina varios archivos javascript en uno, lo que reduce el número total de solicitudes de un navegador |
| Aplazar Javascript | Pospone la carga y ejecución de archivos javascript hasta que se carga una página. Esto asegura que la carga de contenido visible no se interrumpa |
| Extender la caché para Javascript | Aumenta el período de tiempo en el que los archivos javascript almacenados en caché deben mantenerse en el almacenamiento local, lo que evita solicitudes adicionales y carga de datos cuando el usuario regresa a la misma página web. |
| Incluir mapas de código fuente de Javascript | Crea el "mapa" entre archivos javascript minificados y originales para mejorar la legibilidad durante el proceso de depuración |
| Javascript en línea | Inserta el contenido de pequeños archivos javascript externos directamente en el documento HTML, reduciendo así el número de solicitudes. Este filtro se aplica solo a archivos javascript más pequeños que el tamaño establecido por el subfiltro "JsInlineMaxBytes" |
| Minify External Javascript, Minify Internal Javascript | Elimina todos los comentarios, espacios en blanco, reglas redundantes y obsoletas, lo que reduce el número total de bytes cargados |
| Esquema de Javascript | Filtro experimental que coloca javascript en línea en un recurso externo. La idea detrás de esto es crear conexiones paralelas a diferentes servidores en lugar de consecutivas al mismo host. Este filtro solo intentará delinear scripts más grandes que el tamaño establecido por el subfiltro "JsOutlineMinBytes" |
Optimizaciones de imágenes [ editar ]
Los filtros de optimización de imágenes están diseñados para reducir el tamaño de los gráficos de carga:
| Nombre del filtro | Descripción |
|---|---|
| Deduplicar imágenes en línea | Elimina la carga repetitiva de datos de las mismas imágenes en línea , mejorando la cantidad de solicitudes y el tamaño de la transferencia. |
| Ampliar caché para imágenes | Aumenta el tiempo que las imágenes almacenadas en caché deben mantenerse en el almacenamiento local , lo que evita solicitudes adicionales y carga de datos cuando el usuario regresa a la misma página web. |
| Imágenes de vista previa en línea | Genera versiones de baja calidad de una serie de imágenes en línea establecidas por el subfiltro “MaxInlinedPreviewImagesIndex”, a menos que el tamaño de las imágenes sea mayor que el valor establecido por el subfiltro “MinImageSizeLowResolutionBytes”, mejorando la experiencia del usuario. Una vez que la página está completamente cargada, las imágenes se cambian a una calidad superior |
| Imágenes de carga diferida | Pospone la carga de imágenes , que no se encuentran en la ventana gráfica inicial del usuario , lo que reduce el número de solicitudes del navegador. |
| Imágenes en línea | Proporciona una forma de incluir datos de imágenes en el código de la página web real como si una imagen fuera un recurso externo, eliminando conexiones adicionales para recuperar datos de imágenes. |
| Convertir GIF a PNG | Convierte sin pérdida los gifs no animados en png , lo que reduce el tamaño de los datos |
| Convierta archivos JPEG a JPEG progresivos | Transforma imágenes jpeg no progresivas más grandes generadas automáticamente en un tipo progresivo más pequeño |
| Recomprimir archivos JPEG | Recomprime imágenes jpeg generadas automáticamente si su calidad de compresión original era superior al valor, establecido por los subfiltros “ImageRecompressionQuality” o “JpegRecompressionQuality”. Esto permite una disminución de la carga útil. |
| Volver a comprimir archivos PNG | Convierte sin pérdidas imágenes png en imágenes con mayor compresión |
| Recomprimir WEBPs | Reemplaza las imágenes webp con versiones comprimidas más pequeñas en los navegadores que admiten el formato webp |
| Perfil de color de imagen de tira | Elimina la información del perfil de color de todas las imágenes , ya que no es compatible con la mayoría de los navegadores. |
| Eliminar metadatos de imágenes | Elimina los metadatos EXIF de todos los archivos de imagen de una página web |
| Reducir el submuestreo de JPEG | Reduce la frecuencia de muestreo de color a 4: 2: 0 debido a la sensibilidad de la visión humana a los cambios en el brillo, pero no en el tono o la saturación. Esto permite reducir significativamente el tamaño de la imagen. |
| Convertir PNG a JPEG | Sustituye imágenes png sin canal de transparencia con equivalentes jpeg más pequeños |
| Cambiar el tamaño de las imágenes | Reemplaza cualquier imagen con dimensiones mayores que ciertos atributos de "ancho" y "alto" por uno más pequeño. |
| Convierta archivos JPEG a WEBP | Convierte imágenes jpeg en un formato webp mucho más pequeño si es compatible con el navegador |
| Convierta archivos JPEG a WEBP sin pérdida | Convierte imágenes jpeg en un formato webp mucho más pequeño si es compatible con el navegador y si la imagen es insensible al ruido de compresión |
| Insertar dimensiones de imagen | Agrega automáticamente atributos de "ancho" y "alto" para las etiquetas "<img>" si no estaban presentes |
| Cambiar el tamaño de las imágenes a dimensiones renderizadas | Intenta cambiar el tamaño de cualquier imagen a sus dimensiones renderizadas, ignorando cualquier atributo de "ancho" o "alto". |
| Imágenes de Sprite | Combina todas las imágenes de fondo de las reglas de la hoja de estilo en una imagen grande para reducir la cantidad de solicitudes del navegador |
Optimizaciones HTML [ editar ]
Este grupo de filtros simplemente reescribe el contenido de los archivos HTML para reducir su tamaño y asegurar el cumplimiento de las mejores prácticas web más recientes.
| Nombre del filtro | Descripción |
|---|---|
| Agregar cabeza | Agrega una etiqueta html <head> si no se encuentra antes de la etiqueta html <body>, necesaria principalmente para que otros filtros funcionen correctamente, ya que algunos de ellos agregan o modifican datos en el área marcada con la etiqueta <head> |
| Contraer espacio en blanco | Elimina espacios en blanco adicionales e innecesarios entre operadores en código html |
| Combinar cabezas | Agrupa el contenido de varias etiquetas <head> en una si hay varias etiquetas, evitando un flujo de trabajo incorrecto del navegador |
| Convertir metaetiquetas | Agrega un encabezado de respuesta coincidente con las metaetiquetas actuales, lo que evita retrasos en el análisis debido a los requisitos del atributo "http-equiv" de algunos navegadores |
| Atributos de elide | Elimina los atributos de las etiquetas html con valores iguales a los valores predeterminados, lo que reduce la cantidad total de datos transferidos |
| Caché de almacenamiento local | Guarda recursos en línea en el almacenamiento local del navegador en la primera vista de una página y los carga desde el almacenamiento local en vistas posteriores en lugar de volver a incluirlos. Esto reduce la cantidad de solicitudes |
| Pedante | Obliga a las optimizaciones del módulo Pagespeed a ser más compatibles con HTML4 |
| Eliminar comentarios | Elimina los comentarios HTML, creados por los desarrolladores para facilitar la lectura y la navegación a través del código HTML. |
| Eliminar cotizaciones | Elimina las comillas de los atributos HTML, reduciendo el tamaño de los archivos html |
| Recortar URL | Sustituye las URL absolutas por las relativas a la URL base de la página. |
Filtros de seguimiento de actividad [ editar ]
La breve lista de filtros a continuación tiene como objetivo optimizar las comunicaciones de seguimiento de Google Analytics con un sitio web
| Nombre del filtro | Descripción |
|---|---|
| Agregar instrumentación | Permite medir el tiempo en el que un cliente carga y renderiza la página, con fines analíticos y de seguimiento. |
| Fragmento asíncrono de Google Analytics | Obliga al código de seguimiento de Google Analytics a cargarse de forma asíncrona, lo que permite que los recursos críticos no se bloqueen durante la carga. |
| Insertar Google Analytics | Agrega seguimiento de código de fragmento asincrónico para rastrear cualquier actividad en el sitio web con las herramientas de informes de Google Analytics |
Otros filtros disponibles [ editar ]
- Reescribir dominios
- Ejecutar módulo de experimento
- DNS resuelto previamente
- Ampliar la caché de PDF
Impacto de velocidad [ editar ]
El módulo PageSpeed mostró el impacto más significativo en la disminución de los tiempos de carga de la página web, el tamaño de la carga útil y el número de solicitudes en comparación con otras opciones de la industria. Según varios investigadores, mod_pagespeed puede reducir los tiempos de carga hasta en un 80%, la cantidad de bytes en un cable se puede reducir en un 30% y el número de solicitudes totales puede reducirse en más de un 20%. Dado que muchos motores de búsqueda, incluido Google, emplean un algoritmo de clasificación que se ve afectado por la velocidad de carga de una página, estas optimizaciones pueden afectar la ubicación de un sitio web en los resultados de búsqueda. [13] [14] A partir de febrero de 2015, Google ha comenzado a probar etiquetas "Lentas" en dispositivos móviles [15] para sitios web que exceden una cierta cantidad de tiempo de carga, lo que incita a los desarrolladores a examinar formas de aumentar la velocidad de carga de una página.
PageSpeed Insights [ editar ]
PageSpeed Insights [16] es una herramienta en línea que ayuda a identificar las mejores prácticas de rendimiento en cualquier sitio web, proporciona sugerencias sobre las optimizaciones de una página web y sugiere ideas generales sobre cómo hacer que un sitio web sea más rápido. [17] Se puede acceder a esta herramienta directamente en cualquier navegador. Por solicitud de URL, califica el rendimiento de la página web en una escala del 1 al 100 y proporciona un informe sobre las optimizaciones sugeridas, divididas en categorías de prioridad alta, media y baja.
Extensión de PageSpeed para Chrome [ editar ]
La extensión Pagespeed es una extensión del navegador Chrome y forma parte de las herramientas para desarrolladores de Google Chrome . Los visitantes que utilizan PageSpeed con regularidad pueden ver todas las métricas proporcionadas por PageSpeed Insights directamente en un navegador y descargar los recursos de la página web, optimizados de acuerdo con las mejores prácticas de rendimiento web. Ahora ha quedado obsoleto [18] y Google recomienda que se utilice en su lugar la versión en línea.
Servicio PageSpeed [ editar ]
El servicio PageSpeed era un producto comercial, proporcionado por Google Inc. El servicio se ofrecía de forma gratuita, ya que todavía estaba oficialmente en versión beta. El servicio incluyó todas las optimizaciones del módulo Pagespeed y el uso de la infraestructura de los servidores de Google. [19] Google anunció la desactivación del servicio PageSpeed el 5 de mayo de 2015 [20] y lo desactivó el 3 de agosto de 2015. [21]
Ver también [ editar ]
- Optimizador de sitios web de Google
Referencias [ editar ]
- ^ Ivanovs, Alex. "Módulo PageSpeed: mejorar el rendimiento de sus sitios web" . huffingtonpost.com/ . El Huffington Post . Consultado el 23 de marzo de 2015 .
- ^ Kerner, Sean Michael. "Google acelera la Web con el módulo de servidor web Apache" . serverwatch.com/news/ . Consultado el 23 de marzo de 2015 .
- ↑ Ram, Ramani (29 de julio de 2011). "Page Speed Service: rendimiento web, entregado" . http://googlecode.blogspot.com/ . Consultado el 17 de marzo de 2015 . Enlace externo en
|website=( ayuda ) - ^ "Github" . https://github.com/ . Google Inc . Consultado el 6 de agosto de 2020 . Enlace externo en
|website=( ayuda ) - ^ "Github" . https://github.com/ . Google Inc . Consultado el 6 de agosto de 2020 . Enlace externo en
|website=( ayuda ) - ^ "Incubadora Apache" . modpagespeed.com/ . Google Inc . Consultado el 6 de agosto de 2020 .
- ↑ Edwards, Ben (28 de julio de 2014). "Creación de CSS crítico en la mitad superior de la página" . https://benedfit.com/ . Consultado el 23 de marzo de 2015 . Enlace externo en
|website=( ayuda ) - ^ "SDK de PageSpeed Insights" . https://code.google.com/ . Google Inc . Consultado el 23 de marzo de 2015 . Enlace externo en
|website=( ayuda ) - ^ "ats_pagespeed" . iispeed.com/ . IISpeed BV Archivado desde el original el 25 de mayo de 2015 . Consultado el 25 de mayo de 2015 .
- ^ "IIS WebSpeed" . iiswebspeed.com/ . IISpeed BV
- ^ Liversidge, Chris (julio de 2014). "Desglose de eventos de velocidad de página para obtener ganancias de SEO" . http://searchengineland.com/ . Search Engine Land . Consultado el 23 de marzo de 2015 . Enlace externo en
|website=( ayuda ) - ^ Andersen, Anders; Jarlund, Tobias (16 de septiembre de 2013). "Abordar el problema de rendimiento de imágenes receptivas: un estudio de caso" . smashingmagazine.com/ . Revista Smashing . Consultado el 23 de marzo de 2015 .
- ↑ Enge, Eric (6 de marzo de 2011). "Estudio de caso: impacto de la limpieza del código en el tráfico del sitio" . http://searchenginewatch.com/ . Observación del motor de búsqueda . Consultado el 23 de marzo de 2015 . Enlace externo en
|website=( ayuda ) - ^ Kuchler, Margaret. "La creciente necesidad de velocidad: cómo el rendimiento del sitio influye cada vez más en las clasificaciones de búsqueda" . retailtouchpoints.com/ . Puntos de contacto minoristas . Consultado el 23 de marzo de 2015 .
- ↑ Barry, Shwartz (25 de febrero de 2015). "Google prueba una etiqueta roja" lenta "en los resultados de búsqueda para sitios más lentos" . http://searchengineland.com/ . Consultado el 17 de marzo de 2015 . Enlace externo en
|website=( ayuda ) - ^ PageSpeed Insights . Google Inc. https://developers.google.com/speed/pagespeed/insights/ . Falta o vacío
|title=( ayuda ) - ↑ Wagner, Janet (15 de enero de 2015). "GOOGLE LANZA PAGESPEED INSIGHTS API V2" . programmableweb.com/ . Web programable . Consultado el 23 de marzo de 2015 .
- ^ "PageSpeed Insights | PageSpeed Insights | Desarrolladores de Google" . Desarrolladores de Google . Consultado el 8 de septiembre de 2016 .
- ^ Lardinois, Frederic. "Google actualiza el servicio PageSpeed, promete" acelerar su sitio web " " . https://techcrunch.com/ . La crisis tecnológica . Consultado el 23 de marzo de 2015 . Enlace externo en
|website=( ayuda ) - ^ "Grupos de Google" . groups.google.com . Consultado el 7 de febrero de 2019 .
- ^ "Información de cobertura para el servicio PageSpeed - Servicio PageSpeed" . Desarrolladores de Google . Consultado el 7 de febrero de 2019 .
