Ejecutan las pruebas de velocidad con herramientas como Google PageSpeed Insights , WebPageTest, o de KeyCDN son 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. Mientras que pueden proporcionar información valiosa para ayudar a optimizar su sitio web, no se olvide de rendimiento percibido, específicamente la experiencia del usuario. Con eso se dice, ver cómo fácilmente logró una puntuación de 100/100 con WordPress y Google PageSpeed Insights.
Google PageSpeed Insights – Scoring 100/100 with WordPress
No te obsesiones con las métricas 100/100 Google PageSpeed Insights
Una gran cantidad de personas tratan y se esfuerzan para conseguir la 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 está exigiendo que cumplan con esta métrica (sí, esto sucede más de lo que piensa). Es importante tomar algún tiempo, sin embargo, y pensar en por qué estamos tratando de lograr ese 100/100 puntuación. No pensamos en él exclusivamente desde un punto de vista métricas. La única razón por Google desarrolló PageSpeed Insights era como una directriz sobre las mejores prácticas de rendimiento web para proporcionar recomendaciones para optimizar su sitio. Y siguiendo las directrices esperamos que pueda conseguir un sitio web más rápido.
También es importante recordar que el logro de ese 100/100 puede que no siempre sea posible dependiendo de cómo es su entorno de instalación.
WordPress y Google PageSpeed Insights
Cuando se trata de tratar de acelerar WordPress , a veces puede ser bastante complicado. Todos sabemos que WordPress no es la plataforma de lo más rápido que existe por ahí, especialmente desde el punto de vista de los desarrolladores. Y la forma en que las secuencias de comandos están en cola y los plugins en operando en tercera parte puede hacer esto de alguna manera una pesadilla, especialmente cuando se compara con los marcos independientes. Decidimos experimentar con nuestro sitio de prueba y después de algunos ajustes estábamos fácilmente capacitados de alcanzar una puntuación 100/100 en PageSpeed Insights. Esto incluye una puntuación Experiencia 100/100 en velocidad del usuario en el móvil, así como en escritorio.
Aquí es lo que hicimos a nuestra instalación de WordPress. ¡Siéntase libre de copiarlo! Estamos utilizando el valor por defecto el tema Twenty Fifteen en nuestro ejemplo.
1. Optimizar Imágenes
Google PageSpeed Insights nos está diciendo que necesitamos para optimizar nuestras imágenes. Para solucionar esta advertencia, simplemente instalar y ejecutar un optimizador de imagen Optimus plugin que es desarrollado y mantenido por KeyCDN. Este plugin se centra en la compresión inteligente , lo que significa que utiliza una combinación de ambas técnicas de compresión con pérdida y sin pérdida. Tiene una característica mayor optimización así que después de instalar por primera vez se puede comprimir toda su biblioteca multimedia con un solo clic. Y de ahí en adelante se auto-comprimir sus imágenes durante la subida. También estamos utilizando el plugin ya que convierte nuestras imágenes a .webp. ¡Esto permite que los tiempos de descarga sean aún más rápido!
2. Minimizar Javascript y CSS
Google PageSpeed Insights ahora nos está diciendo que tenemos que minify nuestra JavaScript, CSS y HTML . Para solucionar este problema instalamos la libre plug-in Autoptimize . En los parámetros del plugin tendrá que comprobar lo siguiente:
- Optimizar el código HTML
- Optimizar el código JavaScript
- Optimizar el código CSS
3. Recursos Render bloqueo en la mitad superior
Ahora Google PageSpeed Insights nos está diciendo que tenemos JavaScript y CSS encima de la tapa . Hay tres escenarios Commons mayoría de las personas se producen aquí, y que es el JavaScript / archivos CSS, Font impresionante, y fuentes de Google. Las fuentes se rinda bloqueante como hemos comentado en nuestro estudio de caso sobre el rendimiento de la fuente web.
Archivos
La primera cuestión que hay que tratar es todos nuestros archivos Javascript y CSS que están encima de la tapa, lo que los hacen-bloqueo. Para solucionar este problema en realidad hay que volver a entrar en el plugin Autoptimize que instalamos previamente y guardar los siguientes ajustes.
- En Opciones de JavaScript desmarcar “Forzar JavaScript”
- Bajo CSS opciones de comprobación “en línea todos los CSS”
Fuentes de Google
El tercer problema es con nuestra Fuentes de Google. En el tema de WP Twenty Fifteen que incluyen el tipo de letra serif Noto. Por defecto WordPress utiliza un gancho de llamada wp_enqueue_scripts que carga la fuente en su cabecera. Esto da lugar automáticamente a que se convierta en render bloqueo. Para solucionar este instalamos un plugin gratuito llamado Disable Google Fonts. Si está usando un tema personalizado que esto podría variar ligeramente, o se puede pedir a su desarrollador del tema que le indique cómo desactivar las fuentes de Google.
A continuación, incluimos nuestra fuente de Google con el siguiente código en nuestra pie de página, justo antes de la etiqueta <body>.
<Link href = 'https:? //fonts.googleapis.com/css familia = Noto + Serif: 400,400italic, 700,700italic' rel = 'hoja de estilo' type = 'text / css'>
Nota: Hacer esto dará lugar a Foit, que es un destello de texto invisible.
También podría cargar sus fuentes de Google de forma asincrónica mediante el uso de Google’s Web Font Loader. Basta con colocar el siguiente código a continuación en el pie de página.
<script type=»mce-text / javascript»><br />
WebFontConfig = {<br />
Google: {familias: [ ‘Noto + Serif: 400,400italic, 700,700italic’]}<br />
};<br />
(Function () {<br />
var wf = document.createElement ( ‘script’);<br />
wf.src = ‘https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;<br />
wf.type = ‘text / javascript’;<br />
wf.async = ‘verdadero’;<br />
var s = document.getElementsByTagName ( ‘script’) [0];<br />
s.parentNode.insertBefore (wf, s);<br />
}) (); </ Script><br />
ideas PageSpeed no hacen bloqueante</p>
<p>
</p>
4. El apalancamiento memoria caché del navegador
Archivos
Ahora estamos recibiendo una advertencia sobre el aprovechamiento de la memoria caché del navegador. Estamos utilizando KeyCDN, desplegado con la página gratuita de WordPress CDN Enabler plugin, y esto significa que todos los bienes suministrados desde el CDN ya tienen cabeceras de control de caché . Sin embargo, con el tema Twenty Fifteen había un archivo que no se iba a entregar con la CDN. Para solucionar este problema simplemente se añade cabeceras de control de caché en nuestro servidor de origen al añadir el siguiente código a nuestro .htaccess.
<FilesMatch "(ico | PDF | flv | jpg | SVG | jpeg | png | gif | JS | css | SWF) $"> Conjunto de la cabecera Cache-Control "max-age = 84600, público" </ FilesMatch>
Y aquí está el código si usted está en un servidor Nginx.
ubicación ~ * \. (JS | css | png | jpg | SVG | jpeg | gif | ico) $ {
expira 2d;
add_header Cache-Control "pública, sin transformar";
}
Google Analytics
Otra cuestión nos encontramos es con Google Analytics. Lo curioso es que esto es una advertencia de su propio guión. http://www.google-analytics.com/analytics.js. El problema se produce debido a que su escritura tiene una duración de la caché de sólo 2 horas. Google ya ha dicho que no van a solucionar este problema. Lo que deja casi todo el mundo corriendo de análisis con una advertencia de que no pueden arreglar. La parte más frustrante de esto es probablemente para las personas que se ocupan de los clientes que piden mejoras de Google PageSpeed Insights. Contar a un cliente que no puede arreglar algo porque Google no le dejará en su propia herramienta suena un poco loco.
Una solución que hemos encontrado hasta ahora para solucionar este problema es de Jesse Luoto guión ga-Lite , un pequeño subconjunto de Google Analytics que utiliza la API de Google Analytics para la medición. Puede usar su versión liberada de jsdelivr, que patrocina a KeyCDN. Esto establece automáticamente los encabezados correspondientes a la secuencia de comandos para que pueda obtener el problema resuelto GA restante. Copia el siguiente código abajo en su pie de página, justo antes de la etiqueta. Asegúrese de actualizar con su UA ID de seguimiento.
< Guión src = "https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js" asíncrono > </ escritura > < secuencia de comandos > var Galite = Galite || {}; galite.UA = ' UA-XXXXXX ' ; // Introducir aquí el código de seguimiento </ escritura >
Nota: hay algunas cuestiones a tener en cuenta con este script. Pero parece que no funciona muy bien para páginas vistas.
Otra solución sería el anfitrión de una versión local de analytics.js . Google no recomienda este pero si configura una secuencia de comandos para obtener la última versión que probablemente no sería un problema. Hay un plugin llamado Host Analytics.js Locally que establece una tarea programada para sincronizar periódicamente a través de la última versión del analytics.js. Esto entonces también le permite servir desde su propio CDN. Ya sea que utilice el guión ga-lite o host de una copia local, esto va a deshacerse de la “palanca de almacenamiento en caché del navegador”, advirtiendo con Google Analytics.
5. Habilitar la compresión
Ya teníamos Gzip habilitada en nuestro servidor de origen y por defecto Gzip está habilitado en todos los servidores desde donde se entregan los bienes. A continuación se presentan las instrucciones si es necesario tener en su servidor origen.
<IfModule mod_deflate.c> # Comprimir HTML, CSS, JavaScript, texto, XML y fuentes AddOutputFilterByType DESINFLE application / javascript aplicación DEFLATE AddOutputFilterByType / rss + xml aplicación AddOutputFilterByType DEFLATE / vnd.ms-fontobject AddOutputFilterByType aplicación DEFLATE / x-fuente AddOutputFilterByType aplicación DEFLATE / x-font-opentype AddOutputFilterByType aplicación DEFLATE / x-font-OTF AddOutputFilterByType aplicación DEFLATE / x-font-TrueType AddOutputFilterByType aplicación DEFLATE / x-font-ttf AddOutputFilterByType aplicación DEFLATE / x-javascript aplicación DEFLATE AddOutputFilterByType / xhtml + xml AddOutputFilterByType DESINFLE application / xml AddOutputFilterByType DESINFLE fuente / opentype AddOutputFilterByType DESINFLE fuente / OTF AddOutputFilterByType DESINFLE fuente / ttf AddOutputFilterByType DESINFLE imagen / svg + xml imagen AddOutputFilterByType DESINFLE / x-icon AddOutputFilterByType DESINFLE text / css texto AddOutputFilterByType DESINFLE / html AddOutputFilterByType DESINFLE text / javascript texto AddOutputFilterByType DESINFLE / plain AddOutputFilterByType DESINFLE text / xml # Quitar los errores del navegador (sólo es necesario para realmente navegadores antiguos) BrowserMatch ^ Mozilla / 4 gzip de sólo-text / html BrowserMatch ^ Mozilla / 4 \ 0,0 [678] no-gzip BrowserMatch \ bMSIE! No-gzip! Gzip de sólo-text / html Header append Vary User-Agent </ IfModule>
Nginx
Puede habilitar la compresión añadiendo lo siguiente a su nginx.confarchivo.
gzip en;
gzip_comp_level 2;
gzip_http_version 1,0;
gzip_proxied cualquier;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types texto / texto plano / texto html / aplicación css / x-javascript texto / xml aplicación / xml application / xml + rss text / javascript;
gzip_disable «MSIE [1-6]. (* SV1?!.)»;
gzip_vary on;
6. Reducir el tiempo de respuesta del servidor
Y, por último, la advertencia de reducir el tiempo de respuesta del servidor. Las mejores recomendaciones para esto es utilizar un servicio de alojamiento web rápido y también poner en práctica un CDN.
¡Y eso es! Si fueron capaces de seguir todo lo anterior, debería tener ahora un 100/100 en Google PageSpeed Insights con su sitio de WordPress.
7. Retire cadenas de consulta – Paso opcional
Otra cosa que recomendamos es eliminar las cadenas de consulta de sus recursos estáticos. Recursos con un “?” En la URL no se almacenan en caché por algunos servidores de almacenamiento en caché de proxy o CDNS, lo que podría resultar en una gran oportunidad perdida para una mayor velocidad. Una forma de hacer esto sería añadir lo siguiente a su functions.phparchivo.
_remove_script_version función ($ src) {
$ = partes explotan (, $ src 'ver?');
devolver $ partes [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 plugin gratuito como Query strings remover. .
Este plugin quita las cadenas de consulta de sus recursos estáticos como archivos CSS y JavaScript. Además, mejorará el rendimiento de la memoria caché y la puntuación global en Google PageSpeed Insights, YSlow, Pingdom y GTmetrix. Sólo tiene que instalar y olvidarse de todo, ya que no hay necesidad de configuración. Pero asegúrese de borrar la memoria caché después de instalar este plugin.
Antes y después
También lo que hace en realidad 100/100 es ayudarnos a alcanzar una velocidad de página más rápido. De hecho todas las optimizaciones que hemos aplicado por las recomendaciones de Google PageSpeed Insights hicieron disminuir el tiempo de carga. Nos pareció que tenía un sitio bastante rápido ya, pero ir manualmente a través de cada uno de ellos y tratarlos como una lista de verificación hizo reducir algún tiempo adicional.
Resumen
Como se puede ver, las recomendaciones de Google PageSpeed Insights son valiosas y si se sigue puede ayudar a optimizar su sitio. Una vez más, no recomendamos obsesionarse con estos números. Si no puede marcar un 100/100 no es el fin del mundo. Nuestro mejor consejo es simplemente aplicar tantas optimizaciones como sea posible en su entorno individual. Y no se olvide de probar la experiencia del usuario. El hecho de que una herramienta diga que su sitio carga rápido, podría hacer exactamente lo contrario de la experiencia de una persona real que navega por su sitio.