Post Top Ad

Your Ad Spot

martes, 21 de abril de 2020

Google PageSpeed ​​Insights - Puntuación 100/100 con WordPress

Ejecutar pruebas de velocidad con herramientas como Google PageSpeed ​​Insights , WebPageTest o KeyCDN's Website Speed ​​Test es siempre una buena manera de ayudar a medir el rendimiento de su sitio web. Si bien estas métricas pueden ser muy útiles, también es importante mantener estos datos en perspectiva. Si bien pueden proporcionar información valiosa para ayudar a optimizar su sitio web, no se olvide del rendimiento percibido, específicamente la experiencia del usuario. Dicho esto, vea cómo logramos fácilmente una puntuación de 100/100 con WordPress y Google PageSpeed ​​Insights .

¿Por qué preocuparse por la velocidad de la página?# #

Hay una multitud de razones por las que debería preocuparse por la velocidad de la página. Todo, desde el ranking más alto en los resultados de búsqueda de Google hasta proporcionar a sus visitantes una mejor experiencia de usuario, lo que aumenta las conversiones, todo entra en juego.
Lo hemos dicho antes, pero vale la pena reiterar que a medida que aumentan los tiempos de carga de la página web, también aumenta la probabilidad de que sus visitantes reboten . Tome estas estadísticas de los puntos de referencia de la industria de Google para la guía de velocidad de la página móvil:
Lo hemos dicho antes, pero vale la pena reiterar que a medida que aumentan los tiempos de carga de la página web, también aumenta la probabilidad de sus visitantes. Tome estas estadísticas de los puntos de referencia de la industria de Google para la velocidad de la página móvil :
page load bounce rate
Esa misma guía también entra en detalles sobre la velocidad de la página, el peso de la página, así como información adicional sobre industrias específicas, como la automotriz, la tecnología y el comercio minorista. Según Google, la mejor práctica para la velocidad de un sitio web es mantenerlo en menos de 3 segundos de tiempo de carga. Como podemos ver en el gráfico a continuación, esta mejor práctica está lejos de cumplirse para los sitios con sede en los Estados Unidos.
google speed industry benchmark
Además, a medida que continúa el crecimiento del tamaño de la página web , las mejores prácticas recomendadas por Google para mantener un sitio web de menos de 500 KB tampoco se cumplen, en promedio.
google weight industry benchmark
El crecimiento constante en el tamaño de la página web es probablemente un factor que contribuye a por qué los sitios estáticos han ido aumentando su popularidad en los últimos tiempos. Los sitios estáticos no requieren un backend o una base de datos y son mucho más simples de administrar. También son, en promedio, mucho más pequeños en tamaño. Por lo tanto, si su sitio no requiere contenido dinámico, pasar a un sitio completamente estático puede ayudar drásticamente a mejorar la velocidad y el peso de la página en general. Obtenga más información sobre los generadores de sitios estáticos y sobre cómo alojar un sitio estático con un CDN .

Cómo afecta la velocidad de la página al resultado final#

Como ya hemos comentado, la velocidad de la página afecta a muchas áreas de un sitio web que pueden cambiar (para bien o para mal) la cantidad de ingresos que su negocio produce en línea (dado que está vendiendo algo). Sin embargo, saber cuánto dinero está perdiendo potencialmente su negocio proporciona un incentivo mucho mayor para luego hacer un cambio.
Es por eso que Google creó una calculadora de ingresos de rendimiento que estima cuántos ingresos adicionales podría obtener si su sitio fuera más rápido. Tome el ejemplo a continuación, por ejemplo. Un sitio que se carga en 2.6 segundos, tiene 200,000 visitantes mensuales, recolecta un valor de orden promedio de $ 20 y tiene una tasa de conversión del 2%. Si el propietario del sitio mejorara la velocidad de ese sitio en solo 1 segundo, podría aumentar sus ingresos anuales en casi $ 44,000 USD .
speed revenue calculator
Es una buena cantidad de dinero por hacer algo que no requiere demasiado esfuerzo. Dicho esto, existen muchas sugerencias de optimización diferentes y saber cómo implementarlas puede llevar algún tiempo. Sin embargo, como se menciona en la sección a continuación, no base sus esfuerzos únicamente en las métricas de PageSpeed ​​Insights. Su objetivo aquí no es obtener un puntaje de 100/100 solo por el hecho de tener 100/100, el objetivo es mejorar el rendimiento general de su sitio.

No te obsesiones con la métrica 100/100#

google pagespeed insights 100
Mucha gente trata de alcanzar esa puntuación de 100/100 en Google PageSpeed ​​Insights. Algunos lo hacen porque están tratando de acelerar su sitio y otros porque un cliente exige que cumplan con esta métrica (sí, esto sucede más de lo que piensas). Es importante tomarse un tiempo y pensar por qué estamos tratando de lograr ese puntaje de 100/100. No pienses en ello únicamente desde un punto de vista métrico. La razón por la que Google desarrolló PageSpeed ​​Insights fue como una guía sobre las mejores prácticas de rendimiento web para proporcionar recomendaciones para optimizar su sitio y, siguiendo las pautas, esperamos que logre un sitio web más rápido.
También es importante recordar que lograr ese 100/100 no siempre es posible dependiendo de cómo esté configurado su entorno.

WordPress y Google PageSpeed ​​Insights#

Cuando se trata de acelerar WordPress , a veces puede ser bastante complicado. Todos sabemos que WordPress no es la plataforma más rápida, especialmente desde el punto de vista de los desarrolladores. La forma en que los scripts se ponen en cola y los complementos de terceros operan puede hacer que esto sea una pesadilla, especialmente en comparación con los marcos independientes. Decidimos experimentar con nuestro sitio de prueba y después de algunos ajustes, pudimos lograr fácilmente una puntuación de 100/100 en PageSpeed ​​Insights. Esto incluye una puntuación de 100/100 de velocidad y 100/100 de experiencia de usuario en dispositivos móviles, así como un resumen de sugerencias de escritorio 100/100.
optimus pagespeed insights 100 score
Esto es lo que le hicimos a nuestra instalación de WordPress. ¡Siéntase libre de copiarlo!

1. Optimizar imágenes#

google pagespeed insights optimize images
Google PageSpeed ​​Insights nos dice que necesitamos optimizar nuestras imágenes. Para solucionar esta advertencia, simplemente instalamos y ejecutamos el complemento Optimus , que es un complemento de optimización de imagen desarrollado y mantenido por KeyCDN. Este complemento se centra en la compresión inteligente , lo que significa que utiliza una combinación de técnicas de compresión sin pérdida y con pérdida. Tiene una función de optimización masiva, por lo que después de que se instala por primera vez, puede comprimir toda su biblioteca multimedia con un solo clic. A partir de ahí, comprimirá automáticamente sus imágenes al cargarlas. También estamos usando el complemento porque convierte nuestras imágenes al formato WebP. ¡Esto permite tiempos de descarga aún más rápidos!
pagespeed insights optimize images
Tenga en cuenta que PageSpeed ​​Insights puede mostrar dos recomendaciones diferentes para la optimización de imágenes, que incluyen:
  1. Optimizar imágenes: "Comprimir ... podría ahorrar 4,7 KiB (reducción del 30%)".
  2. Optimice las imágenes: "Comprimir y cambiar el tamaño ... podría ahorrar 5.8 KiB (reducción del 51%)".
La primera recomendación se centra únicamente en comprimir la imagen, mientras que la segunda se centra en la compresión y el cambio de tamaño. Si las dimensiones de su imagen son demasiado grandes y deben reducirse para el navegador, esta recomendación se activará. Aquí hay más información sobre las sugerencias de optimización de imagen de PageSpeed ​​Insights .

2. Minify JavaScript y CSS#

minify javascript css html
Google PageSpeed ​​Insights ahora nos dice que debemos minimizar nuestro JavaScript, CSS y HTML . Para solucionar este problema, instalamos el complemento gratuito Autoptimize . En la configuración del complemento, querrá verificar lo siguiente:
  • Optimizar código HTML
  • Optimizar código JavaScript
  • Optimizar código CSS
También estamos utilizando el complemento de habilitación de caché gratuito de KeyCDN para entregar las imágenes formateadas de WebP que convertimos anteriormente para tiempos de descarga más rápidos. En la configuración, asegúrese de marcar la opción "Crear una versión en caché adicional para el soporte de imágenes WebP".
google pagespeed insights minification

3. Recursos de bloqueo de procesamiento sobre el pliegue#

pagespeed insights render blocking resources
Google PageSpeed ​​Insights ahora nos dice que tenemos JavaScript y CSS en la mitad superior de la página . Hay tres escenarios comunes en los que la mayoría de las personas se encuentran aquí, y esos son sus archivos JavaScript / CSS, Font Awesome y Google Fonts. Las fuentes bloquean el renderizado, como lo discutimos en nuestro estudio de caso sobre el rendimiento de fuentes web .

Archivos#

El primer problema con el que tenemos que lidiar es con todos nuestros archivos JavaScript y CSS que están por encima del pliegue, lo que los hace de bloqueo de renderizado. Para solucionar esto, volvemos al plugin Autoptimize que instalamos anteriormente y guardamos la siguiente configuración.
  1. En Opciones de JavaScript, desmarque "¿Forzar JavaScript en <head>?"
  2. En Opciones de CSS marque "¿Inline all CSS?"

Font Awesome#

Muchas personas que usan Font Awesome toman el archivo CSS y lo colocan en su encabezado. El problema es que si coloca esto en su encabezado, se convierte en bloqueo de renderizado ya que CSS lo está . En su lugar, tomamos el siguiente código y lo movemos a nuestro pie de página, justo antes de la </body>etiqueta.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/fontawesome.min.css" rel="stylesheet">
Nota: Hacer esto dará como resultado FOUT, que es un destello de texto sin estilo.

Google Fonts#

ppagespeed insights google fonts
El tercer problema es con nuestras fuentes de Google. Por defecto, WordPress usa un gancho llamado wp_enqueue_scriptsque carga la fuente en su encabezado. Esto automáticamente hace que se convierta en bloqueo de renderizado. Para solucionar esto, instalamos un complemento gratuito llamado Disable Google Fonts . Si está utilizando un tema personalizado, esto puede variar ligeramente, o puede preguntarle a su desarrollador de temas cómo deshabilitar Google Fonts.
Luego incluimos nuestra Fuente de Google con el siguiente código en nuestro pie de página, justo antes de la </body>etiqueta.
<link href='https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
Nota: Hacer esto dará como resultado FOIT, que es un destello de texto invisible.
También puede cargar sus fuentes de Google de forma asincrónica utilizando el cargador de fuentes web de Google Simplemente coloque el siguiente código a continuación en su pie de página.
<script type="text/javascript">
    WebFontConfig = {
        google: { families: [ 'Noto+Serif:400,400italic,700,700italic' ] }
    };

    (function() {
        var wf = document.createElement('script');
        wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
    })();
</script>
pagespeed insights no render-blocking

4. Aproveche el almacenamiento encaché del navegador#

pagespeed insights leverage browser caching

Archivos#

Ahora estamos recibiendo una advertencia sobre cómo aprovechar el almacenamiento en caché del navegador. Estamos utilizando KeyCDN, integrado con nuestro complemento gratuito CDN Enabler , y esto significa que cualquier activo entregado desde CDN ya tiene Cache-Controlencabezados. Sin embargo, había un archivo que no se entregaba con el CDN. Para solucionar esto, simplemente agregamos Cache-Controlencabezados a nuestro servidor de origen agregando el siguiente código a nuestro .htaccessarchivo.
<filesMatch ".(ico|pdf|flv|jpg|svg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=604800, public"
</filesMatch>
Aquí está el código si está en un servidor Nginx.
location ~* \.(js|css|png|jpg|svg|jpeg|gif|ico)$ {
    expires 7d;
    add_header Cache-Control "public, no-transform";
}

Google Analytics#

pagespeed insights google analytics
Otro problema con el que nos encontramos es con Google Analytics. Lo curioso es que esta es una advertencia de su propio script ( https://www.google-analytics.com/analytics.js). El problema se produce porque su secuencia de comandos tiene una vida útil de caché de solo 2 horas. Google ya ha dicho que no solucionarán esto . Lo que deja a casi todos ejecutando análisis con una advertencia de que no pueden solucionarlo. La parte más frustrante de esto es probablemente para las personas que tratan con clientes que solicitan mejoras de Google PageSpeed ​​Insights. Decirle a un cliente que no puedes arreglar algo porque Google no te deja entrar en su propia herramienta suena un poco loco.
Una solución sería alojar una versión local de analytics.js . Google no recomienda esto, pero si configura un script para obtener la última versión, probablemente no sea un problema. Hay un complemento gratuito de WordPress llamado Complete Analytics Optimization Suite que configura un trabajo cron para sincronizar periódicamente la última versión de analytics.js. Esto también le permite servirlo desde su propia CDN, como KeyCDN. Esto eliminará la advertencia de "aprovechar el almacenamiento en caché del navegador" con Google Analytics.
pagespeed insights cache-control
Lea nuestra publicación detallada sobre cómo alojar Google Analytics localmente .

5. Habilitar eompression#

Ya teníamos habilitado Gzip en nuestro servidor de origen y, de manera predeterminada, Gzip está habilitado en todos los servidores perimetrales KeyCDN desde donde se entregan los activos. A continuación hay instrucciones si necesita habilitarlo en su servidor de origen.

Apache#

Puede habilitar la compresión agregando lo siguiente a su .htaccessarchivo.
<IfModule mod_deflate.c>
    # Compress HTML, CSS, JavaScript, Text, XML and fonts
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml

    # Remove browser bugs (only needed for really old browsers)
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    Header append Vary User-Agent
</IfModule>

Nginx#

Puede habilitar la compresión agregando lo siguiente a su nginx.confarchivo.
gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;
pagespeed insights gzip compression

6. Reduzca el tiempo de respuesta del servidor#

Finalmente, existe la advertencia de reducir el tiempo de respuesta del servidor. Las mejores recomendaciones para esto es usar un servidor web rápido y también implementar un CDN, como KeyCDN.
¡Y eso es! Si pudo seguir todo lo anterior, ahora debería tener un 100/100 en Google PageSpeed ​​Insights con su sitio de WordPress.
optimus pagespeed insights 100 score

7. Eliminar cadenas de consulta (opcional)#

Otra cosa que recomendamos es eliminar las cadenas de consulta de sus recursos estáticos . ?Algunos servidores proxy o CDN no almacenan en la memoria caché los recursos con una URL, lo que podría dar como resultado una gran oportunidad perdida para aumentar la velocidad. Una forma de hacerlo sería agregar lo siguiente a su functions.phparchivo.
function _remove_script_version( $src ){
    $parts = explode( '?ver', $src );
    return $parts[0];
}

add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );
Otra opción sería instalar un complemento gratuito como Eliminar cadenas de consulta de recursos estáticos .
remove query strings plugin
Este complemento elimina cadenas de consulta de sus recursos estáticos, como archivos CSS y JavaScript. Mejorará el rendimiento de la memoria caché y la puntuación general en Google PageSpeed ​​Insights, YSlow, Pingdom y GTmetrix. Simplemente instale y olvide todo, ya que no se necesita configuración. Pero asegúrese de borrar su caché después de instalar este complemento.

Resumen#

Como puede ver, las recomendaciones de Google PageSpeed ​​Insights son valiosas y, si se siguen, pueden ayudar a optimizar su sitio. Nuevamente, no recomendamos obsesionarse con estos números. Si no puedes obtener un puntaje de 100/100, no es el fin del mundo. Nuestro mejor consejo es simplemente implementar tantas optimizaciones como sea posible en su entorno individual. Y no olvide probar la experiencia del usuario. Solo porque una herramienta dice que su sitio se carga rápidamente, podría ser la experiencia exactamente opuesta para una persona real que navega por su sitio.
También recomendamos leer nuestra guía completa sobre cómo acelerar WordPress que contiene consejos de optimización adicionales. El equipo de PageSpeed ​​Insights también lanzó una herramienta de prueba de velocidad del sitio web en think with Google que es posible que desee consultar. Una buena característica son los hermosos informes que genera, que pueden ser excelentes para enviar a los clientes.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas