¿Cómo Sacar 100/100 en Google PageSpeed Insights con WordPress?

Actualizado July 18, 2018

Aquí en Kinsta trabajamos con un montón de agencias y freelancers que se ocupan de los clientes sobre una base diaria. No es raro que los clientes o incluso que un CEO de una empresa pida a su agencia o desarrollador de WordPress aumentar su puntuación de Google PageSpeed Insights. Google hace un buen trabajo en la comercialización de esta herramienta para los consumidores y muchas veces, no siempre entienden que una puntuación perfecta no es el fin del mundo. Esto puede ser definitivamente frustrante a veces. Sin embargo, hoy queremos compartir con ustedes algunos consejos y estrategias que pueden ayudarles a obtener un 100/100 en Google PageSpeed Insights con su sitio de WordPress.

¿Qué Tan Importante Es Google PageSpeed Insights?

Google PageSpeed Insights es una herramienta de rendimiento web creada por Google para ayudarle a identificar fácilmente formas de hacer que su sitio sea más rápido y más móvil, siguiendo las recomendaciones de las mejores prácticas web. Una cosa muy importante a recordar sin embargo es que usted no debe obsesionar siempre sobre obtener una puntuación de 100/100 la cual puede resultar imposible en algunos de los escenarios, dependiendo de cómo se configura el sitio de WordPress. Con un montón de temas polivalentes y sitios con decenas de scripts externos, simplemente se encontrará en un situación casi imposible tratando de lograr una puntuación perfecta. Lo cual está perfectamente bien.

Recomendamos preferir la velocidad de su sitio, más que las puntuaciones. Las puntuaciones con herramientas como Pingdom, GTMetrix y Google PageSpeed Insights a veces pueden conducirle por mal camino. Especialmente porque algunas de ellas ni siquiera son compatibles con HTTP/2 todavía. Lo que realmente importa es asegurar que su sitio se cargue rápidamente y que el rendimiento percibido también esté a la par. El rendimiento percibido es qué tan rápido se siente su sitio web cuando se carga a los usuarios.

¿Google usa PageSpeed Insights cuando se trata de SEO y el factor de clasificación de velocidad de página o velocidad de respuesta pura? Esta fue una pregunta interesante planteada por un SEO en FDP Group Leeds y se discutió sobre la Mesa Redonda de Motor de Búsqueda. Gary Illyes, Analista de Tendencias de Webmaster para Google, respondió diciendo “Voy a ir con ambos.”

Esto es parcialmente debido al hecho de que en la mayoría de los casos cuando usted tiene un sitio web lento, es más probable que va a tener un montón de advertencias en Google PageSpeed Insights. Muchas de las recomendaciones se relacionan con sus tiempos de respuesta puros. No siempre un 100%, pero lo que Gary más probable está diciendo es que si usted tiene un sitio web lento, sí, probablemente afectará a su clasificación.

Sacando 100/100 en Hosting Compartido y en Kinsta

Pensamos que sería divertido explorar el nuevo tema Twenty Seventeen en WordPress 4.7. ¡Este es el primer tema por defecto de WordPress que está dirigido a las empresas en lugar de un blog típico, que es emocionante! Así que hoy vamos a mostrarle cómo anotar ese 100/100 perfecto tanto en escritorio como en móvil. Hemos instalado herramientas y servicios comunes que muchos sitios de WordPress utilizan, como Google Analytics, Akismet, Yoast SEO, etc. Hicimos pruebas tanto en un host compartido de bajo presupuesto como en Kinsta para mostrarte cuánta diferencia puede haber cuando se trata de ajustes finos de hospedaje en Google Cloud vs un ambiente de hospedaje compartido.

Si bien este es un sitio pequeño, es una buena base para, al menos entender un poco sobre cómo Google PageSpeed Insights funciona. Si está interesado en ver algunas optimizaciones en un tema de multiuso más amplio, consulte nuestra publicación sobre la optimización del tema de WordPress Total.

100/100 en Google PageSpeed Insights

100/100 en Google PageSpeed Insights

100/100 en Google PageSpeed Insights con Host Compartido

En nuestro primer sitio de prueba, tenemos WordPress 4.7 con el Twenty Seventeen ejecutándose en un popular host de bajo presupuesto compartido (Apache). SSL está configurado y los siguientes complementos están instalados.

  • Yoast SEO
  • Akismet

También tenemos Google Analytics funcionando dentro del <body> de nuestro archivo header.php. La única modificación que hemos hecho es que añadimos una imagen destacada a la publicación ” ¡Hola mundo!”. Ejecutamos nuestro sitio de prueba a través de Google PageSpeed Insights e inmediatamente obtenemos una puntuación de escritorio 69/100 y una puntuación móvil de 58/100. Así que definitivamente tenemos algunas mejoras que deben hacerse aquí. Exploremos cada una de ellas para ver cómo podemos solucionarlas.

Compartir puntuación en Google PageSpeed Insight

Compartir puntuación en Google PageSpeed Insight

Habilitar Compresión

Comenzaremos con el escritorio primero pues muchas de las correcciones también se aplicarán para el móvil. La primera recomendación de Google PageSpeed Insights que debemos corregir es la de Habilitar Advertencia de Compresión.

Habilitar advertencia de compresión

Habilitar advertencia de compresión

Según Google, para arreglar esto necesitamos habilitar compresión Gzip . Desafortunadamente, el host compartido no tiene esta habilitada automáticamente en sus servidores, así que tenemos que hacerlo manualmente.

Todos los navegadores modernos admiten y apoyan automáticamente la compresión Gzip  para todas las solicitudes HTTP. Habilitar la compresión de Gzip puede reducir el tamaño de la respuesta transferida hasta en un 90%, lo que puede reducir significativamente la cantidad de tiempo para descargar el recurso, reducir el uso de datos para el cliente y mejorar el tiempo de provisión de sus páginas.

Hay un par de maneras en que usted puede hacer esto. La primera y una de las más fáciles es usando un plugin de cache que admite la activación Gzip. WP Rocket por ejemplo añade reglas de compresión Gzip en su archivo .htaccess automáticamente usando el modulo mod_deflate . W3 Total Cache también tiene una manera de habilitar esto para usted bajo su sección de rendimiento.

La segunda manera de habilitar compresión Gzip es al editar su archivo .htaccess.  La mayoría de los hosts compartidos utilizan Apache, en el que simplemente puede agregar el código a continuación a su archivo .htaccess. Puede encontrar su archivo .htaccess en la raíz de tu sitio de WordPress vía FTP.

<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>

Asegúrese de agregarlo por debajo del contenido actual de su archivo .htaccess. Ejemplo a continuación:

Añadir código GZIP

Añadir código GZIP

Si se ejecuta en NGINX, simplemente agregue esto a su archivo nginx.conf.

36 gzip on;

37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

Una herramienta como  Check Gzip Compression puede realmente mostrarle cómo mis bytes han sido ahorrados al habilitar la compresión Gzip. A continuación se muestra un ejemplo de lo que hemos ahorrado en nuestro sitio de prueba.

Ahorro de GZIP

Ahorro de GZIP

Si ejecutamos nuestro sitio a través de Google PageSpeed Insights otra vez podemos ver que la advertencia de compresión Gzip se ha ido y ha aumentado nuestra puntuación de escritorio de 69 a 80/100 y nuestra puntuación de móvil de 58 a 67/100.

PageSpeed Insights después de GZIP

PageSpeed Insights después de GZIP

Optimizar Imágenes

La siguiente recomendación de Google PageSpeed Insights que debemos corregir es la advertencia Optimizar imágenes. Nuestra publicación de blog “Hello world!” Por defecto tiene una imagen destacada que está causando este error.

Optimizar imágenes

Optimizar imágenes

Esta es una advertencia muy importante y útil. De acuerdo con el Archivo HTTP, a partir de noviembre de 2016, las imágenes compusieron en promedio 65% del peso total de las páginas web. Optimizar sus imágenes puede ser una de las maneras más fáciles para ver mejoras de rendimiento con su sitio web de WordPress.

Hay un par de maneras de arreglar esto. La primera es utilizar un plugin de optimización de imágenes. Un plugin realmente puede repasar por su biblioteca de WordPress en masa y también optimizarlas automáticamente cuando las cargue. En realidad tenemos un guía completa sobre cómo optimizar sus imágenes de WordPress . A continuación presentamos algunos plugins de optimización de imagen populares:

Esos complementos solucionarán el problema o también es posible comprimir las imágenes antes de cargarlas en una herramienta como Adobe Photoshop, Gimp o Affinity Photo. A continuación se muestra la imagen destacada que está mostrando esa advertencia. Podemos comprimirla de antemano, tanto reduciendo su tamaño como reduciendo la calidad. Lo mejor es mantener sus imágenes las más pequeñas posibles. Esta imagen era originalmente 2.32 MB, después de disminuir su calidad y tamaño, ahora es 99.38 kB. Recuerde, lo mejor es cargar imágenes escaladas y no confiar en CSS para cambiar el tamaño de ellas. Esto ralentiza su sitio.

Comprimir imágenes con Affinity Photo

Comprimir imágenes con Affinity Photo

Si ejecutamos nuestro sitio a través de Google PageSpeed Insights nuevamente podemos ver que la advertencia Optimizar imágenes ya se ha ido y ha aumentado nuestra puntuación de escritorio de 80 a 88/100 y nuestra puntuación de móvil de 67 a 73/100. ¡Estamos progresando!

PageSpeed Insights después de compresión

PageSpeed Insights después de compresión

Eliminar el Bloqueo del JavaScript de Renderización y el Contenido de CSS “Above-the-fold”

La siguiente recomendación de Google PageSpeed Insights que debemos corregir es la eliminación de bloqueo de JavaScript y contenido CSS “above-the-fold”. En realidad, tenemos una publicación muy detallada sobre el problema del bloqueo de JavaScript y CSS.

Eliminar bloqueadores de visualización JS y CSS

Eliminar bloqueadores de visualización JS y CSS

Cuando un navegador carga una página web, los recursos JavaScript y CSS normalmente impiden que se muestre la página web hasta que se descarguen y procesen por el navegador. Algunos recursos deben ser descargados y procesados antes de mostrar cualquier cosa. Sin embargo, muchos recursos CSS y JavaScript son condicionales -es decir, sólo se aplican en casos específicos- o simplemente no son necesarios para presentar el contenido above-the-fold. Para producir la experiencia más rápida posible para sus usuarios, debe intentar eliminar cualquier recurso innecesario que bloquea la carga del dicho contenido.

En cuanto a Javascript bloqueador de renderización, Google tiene tres recomendaciones:

  1. Si no tiene mucho JavaScript, usted puede introducirlo en el código para deshacerse de esta advertencia. Puede poner en línea JavaScript con un plugin como Autoptimize. Sin embargo, esto es realmente sólo válido para sitios muy pequeños. La mayoría de los sitios de WordPress tienen suficiente JavaScript donde esto deterioraría le velocidad de su sitio.
  2. El segundo es para cargar su JavaScript asincrónicamente. Async Javascript esencialmente descarga el archivo durante el análisis HTML y hará una pausa en el analizador HTML para ejecutarlo cuando haya finalizado la descarga.
  3. El tercero es diferir su JavaScript. El atributo defer también descarga el archivo durante el análisis HTML, pero sólo lo ejecuta después de que el análisis se haya completado. Además, los scripts con este atributo se ejecutan en el orden de aparición en la página. Más información sobre las diferencias entre async y defer.

En nuestro ejemplo, vamos a hacer nuestra carga JavaScript de forma asíncrona. Para hacer esto vamos a usar un complemento gratuito llamado Async JavaScript. Puede descargarlo desde el repositorio de WordPress o buscarlo en su panel de control de WordPress en la sección plugins  “Añadir Nuevo”. Al escribir este artículo, actualmente tiene más de 9,000 instalaciones activas con una clasificación de 4.2 de 5 estrellas. Esencialmente, el complemento agrega el atributo ‘async’ o ‘defer’ a todo el JavaScript cargado por la función wp_enqueue_script de WordPress. Los desarrolladores también tienen una versión premium disponible que les permite elegir los scripts que desean hacer asincrónicos o diferirlos.

Ejemplo de Async 

<script src=”file1.js” async></script>

Ejemplo de Defer 

<script src=”file1.js” defer></script>

Después de la instalación, simplemente entre en la configuración y active JavaScript Async..

Async JavaScript

Async JavaScript

Y para sitios más grandes, la exclusión de scripts puede resultar útil o el uso de la versión premium del plugin. No lo necesitaremos en este ejemplo, pero si tiene un sitio con un montón de JavaScript, lo más probable es que termine con cosas rompiéndose si simplemente configura todo en Async o Defer. En este caso tendrá que solucionar los problemas cuando aparezcan.

Exclusiones de Async

Exclusiones de Async

Si no desea utilizar un plugin para esto, existen otras alternativas tal como agregación del siguiente código a su archivo functions.php.

/*function to add async to all scripts*/

function js_async_attr($tag){
 # Add async to all remaining scripts
 return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Aquí hay dos publicaciones adicionales que discuten la adición de async o diferir sin un plugin:

Ejecutamos nuestro sitio a través de Google PageSpeed Insights nuevamente y como puede ver, el bloqueo del JavaScript se arregló y quedamos con el aviso de Optimizar entrega de CSS.

Optimizar la entrega de CSS

Optimizar la entrega de CSS

Se puede ver que el primer CSS que necesitamos optimizar es nuestro tipo de letra (fonts) de Google (fonts.googleapis.com). CSS por defecto bloquea la renderización que incluye CSS procedentes de los fonts de la web. Para arreglar esto vamos a instalar el plugin gratuito de Disable Google Fonts. El autor del plugin, Milan Dinić, acaba de actualizar esto para incluir el nuevo tipo de letra Twenty Seventeen Libre Franklin. Después de instalar el plugin, obviamente los fonts de Google se romperán. Así que usted deberá ir a Google Fonts y agarrar el código de embebido manualmente. Seleccionamos los mismos pesos de fuente (font weights) que están incluidos de forma predeterminada en el tema Twenty Seventeen.

<link href=”https://fonts.googleapis.com/css?family=Libre+Franklin:300,300i,400,400i,600,600i,800,800i” rel=”stylesheet”>

Embeber Fuentes de Google

Embeber Fuentes de Google

A continuación, tendrá que agregar a su archivo footer.php, justo antes de la etiqueta </body>. Nota: Hacerlo de esta manera resultará en FOUT, lo que ellos llaman como flash de un texto sin nombre. Al mismo también se deshará del problema de bloqueo de renderización. Usted debe decidir en su propio sitio si FOUT es una experiencia de usuario aceptable para sus visitantes. También puede utilizar el Web Font Loader de Google.

Fuentes de Google en WP footer

Fuentes de Google en WP footer

Ejecutamos nuestro sitio de prueba a través de Google PageSpeed Insights otra vez y ahora bajo la advertencia Optimizar entrega CSS sólo quedamos con una cosa, y ese es el archivo style.css.

Optimizar la entrega de CSS y cadenas de consulta

Optimizar la entrega de CSS y cadenas de consulta

Una de las maneras más fáciles de arreglar esto es usar un plugin gratuito de WordPress llamado Autoptimize, desarrollado por Frank Goossens.

Autoptimize WordPress plugin

Autoptimize WordPress plugin

Este complemento es bastante ligero, sólo 176 KB para ser exacto. Al escribir esto, actualmente tiene más de 200,000 instalaciones activas con un 4.7 de 5 estrellas. El complemento le ayuda con la concatenación de sus scripts, minificación, caducidad de las cabeceras, la posibilidad de mover estilos a su encabezado y scripts a su pie de página. Este plugin es completamente compatible con el plugin de Async JavaScript que ya había utilizado antes.

Después de instalar el plugin, haga clic en la configuración y seleccione “Optimizar código CSS”. Después, haga clic en la pestaña avanzada y también habilitar “agregar CSS en línea” y “Poner en Línea CSS.” Nota, dependiendo del tema en el que está haciendo esto, no se recomienda utilizar este método. Para sitios grandes, la introducción en el código puede ser malo, en cuyo caso sería mejor simplemente ignorar esa advertencia específica de Google PageSpeed Insights. Y recuerde que con HTTP / 2, la concatenación a veces puede ralentizar su sitio.

Optimizar código CSS

Optimizar código CSS

También recomendamos activar la opción de código HTML optimizado.

Optimizar código HTML

Optimizar código HTML

Si ejecutamos nuestro sitio a través de Google PageSpeed Insights nuevamente, ¡podemos ver que la advertencia de la eliminación del bloqueo de JavaScript y CSS de renderización ahora está completamente desaparecido! También se arregló la advertencia Minify CSS que estaba más abajo y ni siquiera hemos llegado hasta allí. Hemos aumentado nuestra puntuación de escritorio de 88 a 92/100 y nuestra puntuación de móvil de 73/100 a 89/100. Estamos casi allí.

PageSpeed Insights después de optimización de JS y CSS

PageSpeed Insights después de optimización de JS y CSS

Leverage Browser Caching

La siguiente recomendación de Google PageSpeed Insights que debemos corregir es la advertencia del Leverage Browser Caching. En realidad, tenemos una publicación en profundidad sobre el problema de leverage browser caching que corresponde a WordPress.

Leverage browser caching

Leverage browser caching

La razón más común por la que se activa el aviso Leverage Browser Cache es que su servidor web no tiene las cabeceras adecuadas en su lugar. En la captura de pantalla anterior puede ver que todos nuestros scripts internos tienen una caducidad y no se especifica advertencia. Cuando se trata de la memoria cache hay dos métodos principales que se utilizan, Cabeceras de Control de Cache y Cabeceras de Expiración. Si bien la cabecera de Control de Cache activa la cache del cliente y establece la máxima edad de un recurso, la cabecera de expiración se utiliza para especificar un punto específico en el tiempo desde que el recurso ya no es válido.

No es necesario agregar las dos cabeceras, ya que esto es un poco redundante. Cache-Control es más reciente y usualmente el método recomendado sin embargo, algunas herramientas de rendimiento web como GTMetrix aún comprueban la expiración de las cabeceras. Estos son todos ejemplos se puede cambiar tipos de archivos, caducar tiempos, etc. según sus necesidades. Aquí hay algunas opciones a continuación. Simplemente agregamos cabeceras de expiración en Apache en nuestro host compartido para este tutorial.

Adición de cabeceras de Cache-Control en Nginx

Se puede agregar cabeceras de Cache-Control en Nginx añadiendo lo siguiente a la ubicación o bloque de la configuración de su servidor.

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {

expires 2d;
add_header Cache-Control "public, no-transform";
}

Adición de Cabeceras de Expiración en Nginx

Puede agregar cabeceras de Expiración en Nginx agregando lo siguiente al bloque de su servidor. En este ejemplo, puede ver cómo especificar diferentes tiempos de expiración basados en tipos de archivo.

location ~* \.(jpg|jpeg|gif|png)$ {

expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}

Adición de Cabeceras de Control de Cache en Apache   

Puede agregar cabeceras de control de cache en Apache agregando lo siguiente a su archivo .htaccess.

<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>

Header set Cache-Control "max-age=604800, public"
</filesMatch>

Adición de Cabeceras de Expiración en Apache

Puede agregar cabeceras de Expiración en Apache agregando lo siguiente a su archivo .htaccess.

## EXPIRES HEADER CACHING ##

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

¿Recuerda que hemos activado la compresión Gzip anteriormente? A continuación se muestra cómo nuestro archivo .htaccess se ve después de añadir también las cabeceras de expiración. Simplemente lo colocamos debajo del bloque de compresión.

Expiración de cabeceras

Expiración de cabeceras

Ejecutamos nuestro sitio de prueba a través de Google PageSpeed Insights otra vez y ahora bajo la advertencia de Leverage Browser Caching sólo nos quedamos con un factor que será el script de Google Analytic. Esto es un poco irónico ya que este es el propio guión de Google. El problema es que establecen un tiempo de cache bajo de 2 horas en su activo, como se ve en la captura de pantalla abajo. Probablemente esto pasa porque si por alguna razón modificaran algo en su extremo pretenderán que todos los usuarios obtengan los cambios lo más rápido posible. Sin embargo, hay una manera de evitar esto y mediante el alojamiento de Google Analytics script localmente. Tenga en cuenta, sin embargo, que esto es no apoyado por Google.

Leverage browser caching con Google Analytics

Leverage browser caching con Google Analytics

Hay un plugin genial gratuito llamado Complete Analytics Optimization Suite, creado y desarrollado por Daan van den Bergh, que le permite alojar Google Analytics localmente en su sitio web WordPress.

CAOS WordPress plugin

CAOS WordPress plugin

Usted puede descargar Complete Analytics Optimization Suite, desde el repositorio de WordPress o buscándolo en la sección plugins y después “Añadir Nuevos” en su panel de control de WordPress. Al momento de escribir esto el plugin tiene más de 1,000 instalaciones activas con un 5 de 5 estrellas. El plugin le permite alojar su archivo JavaScript de Google Analytics (analytics.js) localmente y mantenerlo actualizado mediante wp_cron (). Otras características le permiten ser capaz de anonimizar fácilmente la dirección IP de sus visitantes, establecer una tasa de rebote ajustada y colocar el script (cabecera o pie de página).

Simplemente instale el plugin, ingrese su ID de seguimiento de Google Analytics y el complemento agrega el código de seguimiento necesario para Google Analytics a su sitio web de WordPress, descarga y guarda el archivo analytics.js en su servidor y lo mantiene actualizado mediante un script programado en wp_cron(). Recomendamos configurar el script que se cargue en el pie de la página. Nota: Este plugin no funcionará con otros complementos de WordPress de Google Analytics.

Google Analytics local

Google Analytics local

Si ejecutamos nuestro sitio a través de Google PageSpeed Insights otra vez, podemos ver que la advertencia de Leverage Browser Caching está completamente eliminada. Y hemos aumentado nuestra puntuación de escritorio de 92 a 97/100 y nuestra puntuación móvil de 89 a 96/100. Tan cerca que casi se puede saborear.

PageSpeed Insights después de corregir leverage browser caching

PageSpeed Insights después de corregir leverage browser caching

Reducir el Tiempo de Respuesta del Servidor

La siguiente recomendación de Google PageSpeed Insights que necesitamos corregir es la advertencia de reducir el tiempo de respuesta del servidor. Muchas veces esto sucede cuando uno tiene un plan de hosting de presupuesto limitado. El servidor no es rápido y Google lo sabe. Así que para solucionar esto necesitamos implementar algún tipo de cache para acelerar las cosas. Hay un montón de grandes plugins de caching por ahí. En nuestro ejemplo vamos a utilizar el plugin Cache Enabler gratuito del equipo en KeyCDN.

Cache Enabler WordPress plugin

Cache Enabler WordPress plugin

Al momento de escribir esto Cache Enabler tiene más de 10,000 instalaciones activas con una clasificación de 4.6 de 5 estrellas. Se trata de un plugin de caching de peso ligero para WordPress que hace su sitio web más rápido mediante la generación de archivos HTML estáticos, más soporte de WebP. No hay ajustes para activar, simplemente instale y quedará listo. Este plugin es compatible completamente con los plugins Async JavaScript y Autoptimize que hemos utilizado antes. Si desea más velocidad, recomendamos añadir el snippet avanzado para sobrepasar PHP.

Si ejecutamos nuestro sitio a través de Google PageSpeed Insights otra vez, podemos ver que el tiempo de respuesta del servidor Reduce se ha ido completamente! Y hemos aumentado nuestra puntuación de escritorio de 97 a 99/100 y nuestra puntuación de móvil de 96 a 99/100. Estamos a punto de colgarse la medalla de oro.

PageSpeed Insights después de reducir tiempo de respuesta

PageSpeed Insights después de reducir tiempo de respuesta

Típicamente usted no verá la recomendación de “reducir el tiempo de respuesta del servidor” en Kinsta. Pero es importante notar que hay docenas de factores potenciales los cuales pueden ralentizar la respuesta de su servidor incluyendo consultas lentas a la base de datos de parte de plugins, marcos, bibliotecas, carencia de CPUs o de memoria. Utilizamos New Relic para ayudar a los clientes determinar de donde viene el problema.

Minimizar JavaScript

La última recomendación de Google PageSpeed Insights que debemos corregir es la advertencia de la Minificación del JavaScript.

Minimizar JS

Minimizar JS

Para solucionar esto, en realidad vamos a volver a la configuración del plugin Autoptimize y simplemente habilitar la opción Optimizar código JavaScript. Dado que ahora tiene un plugin de cache en ejecución es posible que también tenga que borrar su cache después de hacer esto para ver los resultados.

Optimizar código JS

Optimizar código JS

¡Y eso es! Ahora hemos llevado con éxito el tema WordPress Twenty Seventeen de 69/100 a 100/100 tanto en el móvil como en el escritorio en un host compartido de bajo presupuesto.

100/100 en Google PageSpeed Insights

100/100 en Google PageSpeed Insights

Aquí están los resultados móviles, no tuvimos que hacer nada. Conseguir la versión de escritorio a 100/100 aumentó automáticamente nuestra versión móvil y las puntuaciones de experiencia de usuario a 100/100 también.

100/100 en Google PageSpeed Insights en móvil

100/100 en Google PageSpeed Insights en móvil

También tenemos un antes y un después con pruebas de velocidad de Pingdom.

Prueba de Velocidad Antes de las Optimizaciones de PageSpeed Insights

Aquí hay una prueba de velocidad de Pingdom antes de realizar cualquier optimización en el host compartido.pastedGraphic.png

Prueba de velocidad antes de las optimizaciones

Prueba de velocidad antes de las optimizaciones

Prueba de Velocidad Después de las Optimizaciones de PageSpeed Insights

Aquí hay una prueba de velocidad desde Pingdom después de realizar las optimizaciones en el host compartido.

Prueba de velocidad después de las optimizaciones

Prueba de velocidad después de las optimizaciones

100/100 en Google PageSpeed Insights con Kinsta

Nuestro segundo sitio de prueba está configurado de la misma manera que el primero. Simplemente está en un dominio diferente. Tenemos WordPress 4.7 con el tema Twenty Seventeen ejecutándose en los servidores de Kinsta (NGINX). SSL está configurado y los siguientes complementos están instalados.

  • Yoast SEO
  • Akismet

Tenemos Google Analytics funcionando dentro del <body> de nuestro archivo header.php. La única modificación que hemos hecho es que añadimos una imagen destacada a la publicación “Hello world!”. Ejecutamos nuestro sitio de prueba a través de

Google PageSpeed Insights e inmediatamente, obtenemos un puntaje 73/100 de escritorio y una puntuación móvil de 63/100. Es importante tener en cuenta que en comparación con el sitio de prueba de host compartido anterior, ya hay un montón de advertencias que ya están arreglados de inmediato, tales como:

  • Habilitar la compresión (Kinsta ya tiene Gzip habilitado en todos los servidores, no es necesario habilitarlo)
  • Reducir el tiempo de respuesta del servidor (Kinsta ya es bastante rápido, ya está dentro de los parámetros aceptables de Google sin ninguna optimización)
  • Cabeceras de Expiración (no es necesario habilitarlas porque Kinsta tiene cabeceras de caching habilitadas a nivel del servidor)
PageSpeed Insights con WP host gestionado

PageSpeed Insights con WP host gestionado

En Kinsta usted deberá seguir sólo algunas de las mismas recomendaciones que antes:

En Kinsta nos tardó menos de la mitad del tiempo obtener una puntuación de 100/100 porque había simplemente menos cosas que hacer.

100/100 pagespeed insights kinsta desktop

Aquí están los resultados móviles.

100 100 pagespeed insights kinsta mobile

También tenemos un antes y un después con pruebas de velocidad de Pingdom.

Prueba de Velocidad Antes de las Optimizaciones de PageSpeed Insights

Aquí hay una prueba de velocidad de Pingdom Antes de realizar cualquier optimización en Kinsta. ¡Tenga en cuenta que el sitio no optimizado en Kinsta fue más de 200ms más rápido que el host compartido optimizado!pastedGraphic.png

before pagespeed optimizations speed test kinsta

Prueba de Velocidad Después de las Optimizaciones de PageSpeed Insights

Aquí hay una prueba de velocidad de Pingdom después de que las optimizaciones fueron hechas en Kinsta.

after pagespeed optimizations speed test kinsta

Mejoras Adicionales de PageSpeed

Hemos optimizado simplemente para Google PageSpeed Insights en este tutorial. De hecho, podríamos haber quitado más de nuestros tiempos de carga si también hubiésemos hecho lo siguiente:

Y por supuesto, tenemos muchos consejos adicionales en nuestra guía de principiantes para optimización de velocidad de sitio web.

Resumen

El objetivo de este tutorial era explicar mejor y entender lo que significan las advertencias de Google PageSpeed Insights y lo que puede hacer para solucionarlas. Una vez que las entienda mejor, puede ir aplicando algunas de estas estrategias a sus sitios más grandes. Por supuesto, con los sitios grandes probablemente no va a marcar ese perfecto 100/100, ¡lo cual está perfectamente bien! O si lo hace, necesitará bastante trabajo. Simplemente recomendamos implementar lo que pueda y lo más probable es que vea mejoras en la velocidad. Recuerde que la velocidad de su sitio, junto con el rendimiento percibido es lo que realmente importa. No se obsesione demasiado sobre las puntuaciones.

También es importante tener en cuenta las diferencias anteriores cuando se trata de alojamiento compartido y el entorno de WordPress configurado de Kinsta. Somos más rápidos de inmediato que la mayoría de los hosts compartidos después de la optimización. Usted debe preguntarse, ¿cuánto vale realmente su tiempo? Si simplemente quiere salir rápido inmediatamente, el entorno de hosting gestionado de Kinsta puede hacer eso por usted.

La próxima vez que un cliente le pida que mejore sus puntuaciones, ahora tiene algunos consejos actualizados sobre cómo hacerlo. Y si hemos perdido algo importante, háganoslo saber a continuación en los comentarios. Manténgase atento para estudios de caso a mayor escala con Google PageSpeed Insights que estaremos haciendo en el futuro.

Este artículo fue escrito por Brian Jackson
Brian is the Chief Marketing Officer at Kinsta. He focuses on everything from developing new online growth strategies, content creation, technical SEO, and outreach within the community. He has a huge passion for WordPress, has been using it for 8+ years, and even develops a couple premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.

Artículos relacionados

  1. Gravatar for this comment's author
    Anaïs julio 22, 2017 at 4:55 am

    Gracias!!

Deja un comentario

kinsta newsletter

¿Utilizas WordPress?

¡Únete a más de 20.000 lectores que ya reciben nuestro newsletter semanal GRATUITO con consejos de WordPress sobre cómo generar más tráfico e ingresos para tu negocio!

Consent

You have Successfully Subscribed!

Send this to a friend