¡Que lo disfrutes!
¡Hola a tod@s!
Mi nombre es Danyel Perales y soy diseñador web freelance. En este tutorial paso a paso, os voy a enseñar cómo conseguir un resultado de 100/100 en Google Page Speed Insights poniendo como ejemplo práctico la página home de mi web y portfolio de diseño web y gráfico.
Cosas a tener en cuenta antes de empezar:
- No es bueno obsesionarse con conseguir un resultado de 100/100 en Page Speed. Es una métrica más dentro de muchas que debes tener en cuenta en tu web o blog y no siempre será posible conseguirla si usas determinados servicios (hotjar, pixel de Facebook, …)
- Un buen resultado en Google Page Speed no está reñido con un buen diseño web.
- No todas las empresas de hosting permiten implementar todas las mejoras necesarias para conseguir un 100/100 en Google PageSpeed Insights. Si es tu caso, contacta con el servicio técnico para que implementen esas mejoras por ti. Ante una negativa, mi recomendación es cambiar de compañía. Aquí tienes la comparativa entre los dos hosting que recomiendo.
- Los valores de Google Page Speed Insights son orientativos . Lo importante es la velocidad real de carga de tu web. Recuerda que cada segundo cuenta.
AVISO: Mientras buscas los plugins o recursos que se detallan en este artículo, te aparecerán otros plugins para instalar que pueden tener muy buena pinta y prometerte el cielo en unos pocos clicks. Muchos de ellos son muy buenos y otros no tanto, pero déjame decirte, que ya que estás leyendo esto, entiendo que te interesa la optimización de la velocidad de carga de una web o Web Performance Optimization (WPO) ¿cierto?
Pues bien, el principal enemigo de la WPO es precisamente esto, los temas / plugins Multi Feature / Multi Purpose / Todo en 1 … (¿Se entiende no?..)
Mi consejo es que por supuesto, pruebes todos los plugins y temas que quieras, pero en la medida de lo posible, intentes siempre elegir los que sean lo más específicos posible (sobre todo en lo referente a los plugins).
Es mucho mejor tener 4 plugins pequeños y que hacen 4 funcionalidades concretas que 2 plugins famosos que cargan tu web con 50 funcionalidades de las que al final sólo terminas usando 5.
Una vez dicho esto, si conoces o encuentras alternativas mejores a los plugins comentados en este artículo, por favor ¡compártelos en los comentarios!
Contenidos del Post
¿Qué es Google PageSpeed Insights?
PageSpeed Insights es una herramienta de Google que mide la velocidad de carga de tu página web.
Aquí vas a aprender cómo funciona y cómo conseguir los mejores resultados para que tu web cargue rápidamente, mejore la experiencia de usuario y subas posiciones en los buscadores.
Debes tener en cuenta que es importante no obsesionarse con conseguir una puntuación perfecta, ya que en muchos casos, es imposible según el tipo de web o tema de WordPress que estemos utilizando conseguir un 100/100 en PageSpeed ya que esto afectaría al aspecto o funcionalidad de la página y por tanto empeoraría la experiencia de usuario que es lo último que queremos. Aquí tienes un artículo para elegir un tema de WordPress perfecto según tu web.
Una vez dicho esto, lo ideal es intentar conseguir un valor por encima de 85 en ambos, pero sobre todo debemos priorizar la velocidad y conseguir la máxima puntuación posible para la carga en móviles, ya que estos suelen acceder a internet con conexiones más limitadas por norma general que los ordenadores.
Antes de seguir, ten en cuenta que como la propia herramienta de Google Page Speed Insights indica en su pie de página, los resultados que genera, son almacenados en la cache durante 30 segundos, por lo que debemos esperar este tiempo tras cada cambio para ver las mejoras correctamente.
Cómo usar Google Page Speed Insights y puntuación inicial
Lo primero que tenemos que hacer es abrir la herramienta de Google PageSpeed Insights.
Introducir la URL de la página web que queremos analizar en el campo de texto y analizará las áreas ya optimizadas de nuestra web y en las que tenemos que mejorar para que vaya lo más rápido posible.
Nada más introducir la URL y analizarla, la herramienta se divide en 2 pestañas, una para analizar la velocidad de carga en móvil y otra para el ordenador.
El color de las puntuaciones va cambiando en función de lo bien que esté optimizada nuestra web.
En el caso de mi portfolio web, los resultados más bajos que he conseguido obtener sin ponerme a llorar han sido estos:
Y las recomendaciones que Google Page Speed Insights nos sugiere que corrijamos son (todas las posibles :D):
- Optimizar Imágenes
- Habilitar Compresión
- Eliminar el Javascript que bloquea la visualización y el CSS del contenido de la mitad superior de la página
- Reducir el tiempo de respuesta del servidor
- Minificar CSS
- Minificar JavaScript
- Especificar caché de navegador
No te asustes si tu web obtiene una puntuación inicial más baja.
Esto es muy probable, sobre todo porque tendrás una mayor cantidad de archivos CSS y JS, imágenes sin comprimir etc.
En este tutorial vamos a conseguir corregir paso a paso todos los aspectos negativos sin importar el punto de partida.
¡Vamos a ello!
1. Optimizar Imágenes
Vamos a empezar este tutorial para conseguir la mejor puntuación en Google Page Speed Insights por la optimización de imágenes, ya que es el apartado que más penaliza la carga de cualquier página web.
Optimizar las imágenes de tu web tiene múltiples beneficios pero te dejo estos 3 que estoy seguro que te convencerán para dar el paso:
- Tu web será más rápida, por lo que aumentará la experiencia de usuario, las páginas vistas y el tiempo de permanencia de tus visitantes y por lo tanto el posicionamiento de tu web en Google.
- Al mejorar tu posicionamiento web, aumentarán tus visitantes y al aumentar tus visitantes, aumentarán tus ingresos.
- Al ocupar menos espacio en tu servidor, tardarás más en tener que pasar a un plan superior (y más caro) en tu empresa de hosting por lo que ahorrarás dinero.
Se podría decir entonces que optimizar tus imágenes es una de las mejores correcciones que puedes hacer no sólo por tu página web o blog, si no también por tu bolsillo.
¿Ya te ha picado la curiosidad?, ¿quieres saber cómo optimizar tus imágenes? Sigue leyendo:
Cómo optimizar las imágenes de mi web
Como te comentaba antes, este paso es bastante importante, por lo que yo me lo tomo bastante en serio y evito el uso de plugins o atajos en este sentido, ahorrando además recursos en el servidor de mi web.
Mi recomendación para tener bien optimizadas las imágenes de tu web son las siguientes:
- Crea tus imágenes con el tamaño exacto en el que se vayan a mostrar en tu web utilizando alguna herramienta de edición de imágenes.
- Además de esto, si trabajas en WordPress, ten bien especificados los tamaños en los que se muestran tus imágenes en tu panel de administración (Ajustes > Medios). Evita cargar imágenes de mayor tamaño de lo que se muestra en la web.
- Utiliza servicios de compresión en línea como TinyPNG o programas de software de compresión de imágenes como ImageOptim (a mí me gusta combinar los 2).
- Si prefieres la vía rápida, tienes varios plugins gratuitos (con opción a Premium) para tu WordPress como por ejemplo: WP Smush, EWWW Image Optimizer o Imagify
Como ves hay bastantes servicios a tu disposición para comprimir y optimizar imágenes. Lo único que debes tener en cuenta es que la compresión de las imágenes no suponga una pérdida de calidad en las mismas.
Por supuesto, en Bloggeris ya tienes un artículo mucho más a fondo sobre optimizar imágenes para WordPress.
IMPORTANTE: El filtro de Google Page Speed Insights para la compresión de imágenes es bastante estricto.
Por suerte, si no consigues eliminar por completo el aviso de “Optimizar Imágenes”, es el propio Google quien te ayudará a solucionarlo de una forma algo lenta, pero efectiva.
Abajo del todo de su herramienta para analizar la velocidad de nuestra web, encontraremos una opción que dice “Descarga los recursos de imagen, JavaScript y CSS optimizados para esta página”.
De esta manera, descargaremos nuestras imágenes descomprimidas como a Google le gustan y ya “sólo” tendremos que subirlas a nuestra carpeta uploads (tuweb.com/wp-content/uploads) de nuestro servidor mediante algún programa FTP gratuito como Filezilla sustituyendo eso sí a las actuales con el mismo nombre, para que funcionen bien la ruta de llamada a esas imágenes.
Tras realizar estos ajustes, vuelvo a pasar mi web por la herramienta de Google Page Speed Inisghts y nos devuelve los siguientes valores:
Además, si revisamos las optimizaciones posibles a realizar, veremos que optimizar imágenes ya no es una de ellas y ahora se encuentra en el apartado Optimizaciones encontradas.
¡Next!
2. Cómo eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página
Este problema suele aparecer al escanear el 99% de las páginas web por lo que no te asustes si tras revisar tu web Google Page Speed Inisights te dice que hay recursos JavaScript o CSS que bloquean la visualización del contenido de la mitad superior de la página.
IMPORTANTE: Este apartado puede causar problemas de funcionamiento en tu web por lo que es importante que realizas las pruebas en un horario con pocas visitas o en un servidor de pruebas antes de lanzarlo.
Eliminar el Javascript y CSS que bloquean la visualización de la mitad superior de la página con un plugin de WordPress
Para realizar este ajuste, tenemos a nuestra disposición el plugin Async JS and CSS.
Su función simplemente es aprovechar la carga asíncrona de los scripts y del css para que todo el contenido cargue antes.
Como podréis ver al acceder a la página del plugin, su código no se ha actualizado en los últimos años, pero os aseguro que sigue funcionando perfectamente hasta la fecha y sus más de 10.000 instalaciones activas lo avalan.
Descarga y activa el plugin Async JS and CSS
Este plugin para eliminar el Javascript y CSS de la mitad superior de la página es bastante sencillo de usar (pero no por eso menos efectivo), así que veremos su funcionamiento rápidamente:
- Entra en tu panel de administración de WordPress y dirígete a la pestaña “Plugins”.
- En la parte superior, pulsa el botón “Añadir nuevo”
- Utiliza el buscador de la parte superior derecha para buscar “Async JS and CSS”
- Una vez hagas la búsqueda por el nombre del plugin, baja un poco en el listado de resultados para encontrar el plugin. Asegúrate que escoges el correcto, por si te sirve, el autor es “elCHAVALdelaWEB”.
- Instala y activa el plugin
Como habrás podido observar al buscar, hay bastantes plugins que ofrecen este tipo de funcionalidades, a mi personalmente, el que más me funciona es este, ya que cumple con su misión sin sobre cargar de código innecesario la web de forma simple y efectiva.
Si conoces otro plugin para eliminar el CSS y Javascript de la parte superior de tu página web o te animas a probar otro diferente, pásate por la zona de comentarios y cuéntanos tu experiencia.
Cómo usar el plugin Async JS and CSS
Una vez activado, podrás encontrar el plugin en el desplegable de la pestaña “Ajustes” dentro de tu panel de administración de WordPress.
Como verás, hay varias opciones que puedes configurar. Mi recomendación es que lo dejes tal cual viene configurado por defecto (salvo que sepas lo que estás haciendo), así que pulsamos “Guardar cambios”.
Como bonus, este plugin también minifica tus archivos CSS por lo que es un fantástico 2×1.
Es muy importante que lo siguiente que hagas a continuación es revisar a fondo que tu web sigue viéndose y funcionando perfectamente tras activar este plugin, ya que según el tema o plugins que uses, alguna funcionalidad puede dejar de funcionar.
Si todo funciona bien, fantástico, si no es así, no te preocupes, una de las cosas que más me gustan de este plugin es el apartado “Excepciones”, en el que puedes añadir algún archivo concreto que te de problemas para evitar que aplique cambios y seguir optimizando el resto de archivos para mejorar la velocidad en lo posible.
Ahora sí, vamos a Google Page Speed para ver los avances y…
Resultados de Eliminar el Javascript y CSS que bloquean la visualización de la mitad superior de la página
¡BOOM! Notable alto como recompensa a nuestro trabajo y encima para subirnos aún más la moral ¡el apartado en PC ya está en verde!
Pues yo aún tengo problemas para conseguir Eliminar el Javascript y CSS que bloquean la visualización de mi página
Espera… ¿Qué? Qué no has conseguido estos resultados y aún te sale el error..
¡No te preocupes que aún no hemos dicho la última palabra!
La parte negativa es que cada web es un mundo, y sería imposible listar aquí la solución a todos los conflictos que pueden surgir.
La parte positiva, es que en mi experiencia el principal problema con el que se encuentra cualquier webmaster o blogger una vez llegados a este punto es que Google no carga de forma eficiente las fuentes o tipografías de … ¡¡el propio Google!!
¿La solución? Sigue leyendo.
Cómo conseguir un 100/100 en Google Page Speed Insights usando Google Fonts
Como siempre, dos opciones, una fácil y rápida y otra óptima un poco más elaborada:
- Plugin de WordPress: Utiliza el plugin Google Webfont Optimizer. Instala, activa y a funcionar, no hay que configurar nada. (De nuevo vuelve a ser un plugin sin mantenimiento desde hace tiempo, pero esto es debido a que su misión es tan específica, que no lo requiere).
- Mediante código: Copia en tu navegador la URL que genera la aplicación de Google Fonts, pasa el css que verás por un compresor de css online y pégalo tal cual en tu archivo «header.php» entre etiquetas <style></style>.
¿Listo? Sigue con el siguiente apartado para alcanzar la gloria del 100/100 ¡ya hemos conseguido lo más difícil! .
¿Aún tienes algún problema?
Deja un comentario con el error que te aparece en Google Page Speed Insights y trataré de ayudarte.
3. Minificar Javascript para conseguir un 100/100 en Google PageSpeed
En este caso a falta de una te traigo 3 posibles soluciones:
La mejor opción para minificar el Javascript
La mejor solución de nuevo nos la da el propio Google ofreciéndonos la posibilidad de descargar los archivos ya minificados en la opción de descargar los archivos optimizados en la parte inferior de la página.
Una vez descargados, sube esos archivos a la ruta correcta mediante un programa FTP.
Minifica tu código Javascript manualmente
La siguiente opción para evitar sobre cargar la web con más plugins, es que manualmente pases tus archivos Javascript por una herramienta de compresión online como jscompress.com.
Los pasos son los siguientes:
- Detecta qué archivos necesitan ser comprimidos según Google Page Speed
- Encuentra esos archivos en tu servidor mediante un programa FTP, ábrelos y copia el contenido.
- Pasa ese contenido por el compresor online y vuélvelo a pegar de nuevo en el archivo original uno a uno y con cuidado de no mezclarlos.
Plugin gratuito de WordPress para minificar Javascript
¿El código no es lo tuyo? No te preocupes, como siempre, puedes usar un plugin gratuito como Autoptimize para minificar tus archivos JS y HTML.
Su uso es muy sencillo, simplemente actívalo y marca en ajustes el contenido que quieras minificar.
Recuerda que ya minificamos previamente los archivos CSS con el plugin Async JS and CSS por lo que no debes activar esa opción para evitar conflictos.
¿Ya estás por aquí? Genial; como premio, este rápido paso nos deja con una fantástica puntuación a las puertas del sobresaliente.
¿Te vienes a por la matrícula?
4. Habilitar compresión GZIP
Esta parte es una mejora bastante rápida y sencilla de realizar, y además, nos hará ganar varios puntos en el test de Google Page Speed Insights por lo que vamos a por ello.
La función de la compresión gzip o deflate es como su nombre indica comprimir los archivos para reducir su tamaño antes de que sean descargados por el visitante, de forma que al tener un peso de archivo menor, tarde menos y por lo tanto nuestra página web cargue más rápido.
Código para implementar la compresión GZIP en htaccess
Como siempre, te recomiendo que en la medida de lo posible, realices estas mejoras implementando el código que te adjunto a continuación, de esta manera no dependerás de plugins de terceros que tendrás que mantener actualizados etc.
Para añadir este código a tu web y aprovecharte de las ventajas de la compresión gzip, debes acceder mediante FTP de nuevo, y en este caso buscar en la raíz de tu dominio un archivo llamado “.htaccess”.
Normalmente lo encontrarás en la carpeta “public_html” de tu servidor.
Una vez abierto, pega el siguiente código en el archivo htaccess, dale a guardar y listo.
<IfModule mod_deflate.c> <IfModule mod_headers.c> Header append Vary User-Agent env=!dont-vary </IfModule> AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/x-component AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/x-js AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/richtext AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xsd AddOutputFilterByType DEFLATE text/xsl AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE image/bmp AddOutputFilterByType DEFLATE application/java AddOutputFilterByType DEFLATE application/msword AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-msdownload AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE application/json AddOutputFilterByType DEFLATE application/vnd.ms-access AddOutputFilterByType DEFLATE application/vnd.ms-project AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/vnd.ms-opentype AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.database AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.chart AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.formula AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.graphics AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.presentation AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.spreadsheet AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.text AddOutputFilterByType DEFLATE audio/ogg AddOutputFilterByType DEFLATE application/pdf AddOutputFilterByType DEFLATE application/vnd.ms-powerpoint AddOutputFilterByType DEFLATE application/x-shockwave-flash AddOutputFilterByType DEFLATE image/tiff AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/vnd.ms-opentype AddOutputFilterByType DEFLATE audio/wav AddOutputFilterByType DEFLATE application/vnd.ms-write AddOutputFilterByType DEFLATE application/font-woff AddOutputFilterByType DEFLATE application/font-woff2 AddOutputFilterByType DEFLATE application/vnd.ms-excel <IfModule mod_mime.c> # DEFLATE by extension AddOutputFilter DEFLATE js css htm html xml </IfModule> </IfModule>
Acabas de añadir compresión gzip o deflate en tu sitio web. ¡Enhorabuena!
Si tras implementar el siguiente código correctamente, no ves que desaparezca el aviso de falta de compresión, deberás contactar con tu proveedor de hosting para que realicen este cambio por ti, ya que en algunas empresas (te miro a ti 1&1 y compañía), no se permite a los usuarios hacer este tipo de ajustes.
Plugin WordPress para habilitar la compresión GZIP
Como no podía ser de otra forma, te dejo un par de alternativas en forma de plugins de WordPress por si prefieres no tocar el código de tu web.
Para realizar esta tarea tenemos el archi-conocido W3 Total Cache (W3TC) o WP Super Cache tal y como se recomienda en este artículo con los mejores plugins gratis para WordPress.
Ambos son 2 plugins muy conocidos y con gran cantidad de tutoriales que puedes buscar en google o youtube para su correcta configuración por lo que, si te parece, no nos entretenemos con eso aquí para no alargar el post en exceso.
¿Aún no sabes lo que es la cache?
Simplificando, la caché de un navegador (Chrome, Firefox, Internet Explorer, Ópera …) es una función que almacena partes de una web que visitas, para que cuando vuelves a visitar esa misma web, no tengas que volver a cargar la web al completo.
Por lo tanto, tener la caché del navegador bien configurada en tu página web, hará que esta cargue más rápido, que consigamos una mejor puntuación en Google Page Speed Insights y en definitiva mejores tu SEO y posiblemente tus ingresos.
Al igual que los anteriores este paso es muy sencillo y rápido de implementar.
Si usas WordPress, tienes la opción de instalar algún plugin para solucionar esta advertencia. El más famoso es W3 Total Cache, mencionado antes, aunque te recomiendo que realices tú mismo los ajustes mediante código si sabes cómo hacerlo.
Sólo tienes que acceder a tu servidor mediante FTP y abre de nuevo el archivo llamado .htaccess que encontrarás posiblemente en la raíz de web (normalmente public_html, o la carpeta que contenga tu proyecto dentro de tu hosting).
Una vez abierto, copia y pega este código al final del todo, que es el que añadiría el plugin W3TC si te decides por usar esta via (nota: algún código lo verás cortado debido a su anchura, no obstante copia y pega TODO):
# BEGIN W3TC Browser Cache <IfModule mod_mime.c> AddType text/css .css AddType text/x-component .htc AddType application/x-javascript .js AddType application/javascript .js2 AddType text/javascript .js3 AddType text/x-js .js4 AddType text/html .html .htm AddType text/richtext .rtf .rtx AddType image/svg+xml .svg .svgz AddType text/plain .txt AddType text/xsd .xsd AddType text/xsl .xsl AddType text/xml .xml AddType video/asf .asf .asx .wax .wmv .wmx AddType video/avi .avi AddType image/bmp .bmp AddType application/java .class AddType video/divx .divx AddType application/msword .doc .docx AddType application/vnd.ms-fontobject .eot AddType application/x-msdownload .exe AddType image/gif .gif AddType application/x-gzip .gz .gzip AddType image/x-icon .ico AddType image/jpeg .jpg .jpeg .jpe AddType application/json .json AddType application/vnd.ms-access .mdb AddType audio/midi .mid .midi AddType video/quicktime .mov .qt AddType audio/mpeg .mp3 .m4a AddType video/mp4 .mp4 .m4v AddType video/mpeg .mpeg .mpg .mpe AddType application/vnd.ms-project .mpp AddType application/x-font-otf .otf AddType application/vnd.ms-opentype ._otf AddType application/vnd.oasis.opendocument.database .odb AddType application/vnd.oasis.opendocument.chart .odc AddType application/vnd.oasis.opendocument.formula .odf AddType application/vnd.oasis.opendocument.graphics .odg AddType application/vnd.oasis.opendocument.presentation .odp AddType application/vnd.oasis.opendocument.spreadsheet .ods AddType application/vnd.oasis.opendocument.text .odt AddType audio/ogg .ogg AddType application/pdf .pdf AddType image/png .png AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx AddType audio/x-realaudio .ra .ram AddType application/x-shockwave-flash .swf AddType application/x-tar .tar AddType image/tiff .tif .tiff AddType application/x-font-ttf .ttf .ttc AddType application/vnd.ms-opentype ._ttf AddType audio/wav .wav AddType audio/wma .wma AddType application/vnd.ms-write .wri AddType application/font-woff .woff AddType application/font-woff2 .woff2 AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw AddType application/zip .zip </IfModule> <IfModule mod_expires.c> ExpiresActive On ExpiresByType text/css A31536000 ExpiresByType text/x-component A31536000 ExpiresByType application/x-javascript A31536000 ExpiresByType application/javascript A31536000 ExpiresByType text/javascript A31536000 ExpiresByType text/x-js A31536000 ExpiresByType text/html A3600 ExpiresByType text/richtext A3600 ExpiresByType image/svg+xml A3600 ExpiresByType text/plain A3600 ExpiresByType text/xsd A3600 ExpiresByType text/xsl A3600 ExpiresByType text/xml A3600 ExpiresByType video/asf A31536000 ExpiresByType video/avi A31536000 ExpiresByType image/bmp A31536000 ExpiresByType application/java A31536000 ExpiresByType video/divx A31536000 ExpiresByType application/msword A31536000 ExpiresByType application/vnd.ms-fontobject A31536000 ExpiresByType application/x-msdownload A31536000 ExpiresByType image/gif A31536000 ExpiresByType application/x-gzip A31536000 ExpiresByType image/x-icon A31536000 ExpiresByType image/jpeg A31536000 ExpiresByType application/json A31536000 ExpiresByType application/vnd.ms-access A31536000 ExpiresByType audio/midi A31536000 ExpiresByType video/quicktime A31536000 ExpiresByType audio/mpeg A31536000 ExpiresByType video/mp4 A31536000 ExpiresByType video/mpeg A31536000 ExpiresByType application/vnd.ms-project A31536000 ExpiresByType application/x-font-otf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType application/vnd.oasis.opendocument.database A31536000 ExpiresByType application/vnd.oasis.opendocument.chart A31536000 ExpiresByType application/vnd.oasis.opendocument.formula A31536000 ExpiresByType application/vnd.oasis.opendocument.graphics A31536000 ExpiresByType application/vnd.oasis.opendocument.presentation A31536000 ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000 ExpiresByType application/vnd.oasis.opendocument.text A31536000 ExpiresByType audio/ogg A31536000 ExpiresByType application/pdf A31536000 ExpiresByType image/png A31536000 ExpiresByType application/vnd.ms-powerpoint A31536000 ExpiresByType audio/x-realaudio A31536000 ExpiresByType image/svg+xml A31536000 ExpiresByType application/x-shockwave-flash A31536000 ExpiresByType application/x-tar A31536000 ExpiresByType image/tiff A31536000 ExpiresByType application/x-font-ttf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType audio/wav A31536000 ExpiresByType audio/wma A31536000 ExpiresByType application/vnd.ms-write A31536000 ExpiresByType application/font-woff A31536000 ExpiresByType application/font-woff2 A31536000 ExpiresByType application/vnd.ms-excel A31536000 ExpiresByType application/zip A31536000 </IfModule> <IfModule mod_deflate.c> <IfModule mod_headers.c> Header append Vary User-Agent env=!dont-vary </IfModule> AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon application/json application/vnd.ms-access application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint application/x-shockwave-flash image/tiff application/x-font-ttf application/vnd.ms-opentype audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel <IfModule mod_mime.c> # DEFLATE by extension AddOutputFilter DEFLATE js css htm html xml </IfModule> </IfModule> <FilesMatch "\.(css|htc|less|js|js2|js3|js4|CSS|HTC|LESS|JS|JS2|JS3|JS4)$"> FileETag MTime Size <IfModule mod_headers.c> Header set Pragma "public" Header append Cache-Control "public" </IfModule> </FilesMatch> <FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|SVGZ|TXT|XSD|XSL|XML)$"> FileETag MTime Size <IfModule mod_headers.c> Header set Pragma "public" Header append Cache-Control "public" </IfModule> </FilesMatch> <FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|_ttf|wav|wma|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|JSON|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|_TTF|WAV|WMA|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW|ZIP)$"> FileETag MTime Size <IfModule mod_headers.c> Header set Pragma "public" Header append Cache-Control "public" </IfModule> </FilesMatch> <FilesMatch "\.(bmp|class|doc|docx|eot|exe|ico|json|mdb|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|pot|pps|ppt|pptx|svg|svgz|swf|tif|tiff|ttf|ttc|_ttf|wav|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|BMP|CLASS|DOC|DOCX|EOT|EXE|ICO|JSON|MDB|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|POT|PPS|PPT|PPTX|SVG|SVGZ|SWF|TIF|TIFF|TTF|TTC|_TTF|WAV|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW)$"> <IfModule mod_headers.c> Header unset Last-Modified </IfModule> </FilesMatch> # END W3TC Browser Cache
En caso de que estés usando un servidor Nginx, el ejemplo de código para controlar el caché de navegador según Google Page Speed Insights es:
location ~* \.(js|css|png|jpg|svg|jpeg|gif|ico)$ { expires 2d; add_header Cache-Control "public, no-transform"; }
Una de las incidencias más comunes que no se solucionaría con los códigos que tienes arriba, sería si estás usando los avatares para los comentario de tu blog generados por Gravatar.
Para solucionarlo, tienes a tu disposición el plugin FV Gravatar Caché. Instala, activa y listo.
Si has llegado hasta aquí y aún no ha desaparecido el aviso de especificar caché del navegador, no desesperes. Lo más probable es que si abres la pestaña de esta advertencia encuentres que hay un archivo que está dando problemas.
Algo tal que así:
«https://www.google-analytics.com/analytics.js (2 horas)»
En efecto, el código de Google Analytics que tienes implementado en tu web para controlar todo lo que ocurre en ella impide eliminar esta alerta de Google Page Speed Insights.
¿Irónico verdad?
El motivo es que como ves en la herramienta, la duración de este archivo en cache, es de tan sólo 2 horas y no es suficiente para la herramienta de Page Speed para aceptarlo como aprobado.
La mala noticia es que Google ya ha dicho que no tiene intención de modificarlo, así que nos toca buscar alternativas.
La buena noticia es que existen varias alternativas para solventarlo y conseguir nuestro 100/100 en Google Page Speed Insights:
Descargar Google Analytics localmente
Esta práctica no está aprobada por Google.
Bastaría con crear un archivo en tu web con el código que genera el facilitado por Google (https://www.google-analytics.com/analytics.js), por desgracia, esto es una práctica que no está recomendada por Google ya que suelen hacer cambios cada cierto tiempo y sería muy fácil que te quedases obsoleto rápidamente.
Usar una versión Lite de Google Analytics
Tu segunda opción, es usar una versión reducida y cacheable de Google Analytics llamada GA Lite y creada por Jesse Luoto.
Este código Javascript usa la API soportada por Google y mediante un script, se va actualizando si hubiese cambios.
La instalación de GA Lite es similar a la habitual. Tan sólo hay que pegar el código que encontrarás en su página de github al final de la etiqueta <body> de tu HTML o en el archivo footer.php de tu WordPress.
Por supuesto, también puedes hacer una llamada a este archivo a través del CDN que tengas configurado (aquí tienes un tutorial de la CDN Cloudflare).
Por último, la opción más rápida y cómoda seguramente sea instalar el magnífico plugin Complete Analytics Optimization Suite (CAOS) creado por Daan van den Bergh.
Este plugin se encarga de resolver el conflicto entre Google Analytics y Google Page Speed Insights permitiéndote alojar localmente el código de google Analytics y a la vez lo mantiene actualizado mediante la función nativa de WordPress wp_cron().
Además, ofrece algunas funcionalidades extra como decidir si quieres cargar tu código en el header o footer de tu web (te recomiendo esto último).
Como te comentaba al principio del artículo, hay ciertos aspectos que no podemos corregir y por eso mismo no es bueno obsesionarse con conseguir un 100 en Google Page Speed insights si no en que la velocidad de carga real de la web sea rápida.
Algunos de estos archivos de los que no se puede eliminar la advertencia de la caché del navegador o Leverage Browser Caching son:
- El pixel de Facebook
- Hotjar
- Twitter widgets oficiales
- CrazyEgg
6. Reducir el tiempo de respuesta del servidor en Google Page Speed Insights
Respuesta corta: Plugin Cache Enabler
Respuesta larga:
Este error aparece normalmente en hosting compartidos (sobre todo en los planes inferiores), donde la capacidad del servidor es limitada.
Tu servidor no carga todo lo rápido que le gusta a Google y esto te penaliza en tu camino hacia el 100 en Google Page Speed.
Por desgracia no podemos hacer que tu servidor vaya más rápido, pero sí podemos ponerle las cosas fáciles para que tenga menos trabajo y por lo tanto un mejor rendimiento.
Como te comentaba antes, yo utilizo el plugin de WordPress Cache Enabler (de la gente de KeyCDN) en las webs que tengo en servidores de este tipo.
Es un plugin de cache muy ligero que minifica y comprime tu web para servirla más rápidamente de forma que Google no detecte que tu servidor no tiene la velocidad deseada.
Descarga, activa y listo.
100/100 en Google Page Speed Insights ¡Conseguido!
Para terminar, pasamos por última vez nuestra web por el analizador de Google Page Speed Insights y …
¡Puntuación de 100 conseguida!
Enhorabuena a todos los que halláis llegado hasta aquí.
A los que estéis usando algún servicio que no os permita alcanzar el 100, ¡tranquilos!.
Como comentábamos al principio, el resultado de Page Speed Insights de Google es sólo una guía genérica de cosas a optimizar, lo realmente es importante es la velocidad de carga de tu web en tiempo, no en puntos de ninguna herramienta.
Si te ha gustado el tema de la optimización de la velocidad de carga o web performnace optimization, déjame recordarte, que esto que hemos visto es una forma básica de mejorar la puntuación en Google Page Speed Insights, y que hay todo un mundo de optimizaciones esperándote ahí fuera para todos aquellos que se tomen sus proyectos online en serio.
Otras acciones más avanzadas que se pueden llevar a cabo y me gusta implementar en las páginas web que desarrollo para mis clientes son:
- Mejorar la velocidad real de la página web (en segundos) consiguiendo altísimas puntuaciones en Pingdom, GTMetrix, TestMySite with Google etc..
- Cargar las imágenes con lazyload (sobre todo en imágenes pesadas o usadas como fondo)
- Implementar srcset para servir las imágenes más apropiadas para cada dispositivo
- Usar la función wp_is_mobile nativa de WordPress para crear condicionales y sólo cargar lo realmente importante en dispositivos móviles
- Implementar AMP en tu sitio web
- Realizar las mejoras vistas y adicionales mediante código, evitando así sobrecargar la web con plugins innecesarios que requieren mantenimiento, actualizaciones etc..
- Evitar la carga innecesaria de archivos (woocommerce, contactform7 e infinidad de plugins o temas cargan archivos que tu web no necesita, evítalo) Incluso el propio CMS WordPress en sí mismo carga muchísimos archivos que no necesitas y que ralentizan tu web.
- Implementa las funciones habituales mediante código en lugar de plugins (formularios de contacto, botones compartir redes sociales etc), tu web lo agradecerá.
- Hay otras muchas mejoras en función de cada proyecto, recursos y necesidades.
Por último, si te interesa mejorar la velocidad de tu web desde cualquier nivel, pero no tienes el tiempo o los conocimientos necesarios y prefieres dejarlo en manos de un profesional del diseño y desarrollo web se encargue de optimizar el diseño, la velocidad o la estructura de tu web te sugiero que solicites un presupuesto para tu web sin compromiso.
Dicho esto, me despido agradeciendo a David la oportunidad de escribir en su magnífico blog, agradeciéndote a ti tu visita y rogándote que dejes un comentario con tu puntuación final, con las dudas que puedas tener o con tu opinión sobre Google Pagespeed Insights, así como compartirlo en las redes sociales para poder llegar a más gente.
¡Nos leemos en los comentarios!
Un saludo, Danyel Perales.
Muy buena guía, tocará poner en práctica algunas cosas que no había probado nunca a ver que tal va.
Un saludo!
A darle caña!
Gracias por pasarte a comentar y ánimo con tu proyecto!
Muchas gracias !!
Si tienes cualquier duda, pásate de nuevo por el artículo y deja un comentario con los detalles
Prometo responder lo antes posible 🙂
Excelente guía, de 50/100 pase a 99/100 , el único detalle es que al usar el plugin Async JS and CSS con el theme Frontend de woocommerce y el child boutique se pierde la configuración de colores en la cabecera, alguna idea para solucionarlo? gracias.
Enhorabuena! En el propio artículo puedes ver que hay temas que se pueden desconfigurar al poner ese plugin.
Mi recomendación es que valores si realmente te merece la pena llegar al 100/100 o tener la web mejor diseñada aunque no llegues al 100.
Saludos!
Hola Geovanni, perdona la tardanza en contestar, estoy con una carga de trabajo altísima estos días.
El plugin Async JS and CSS lo que hace es poner todos los estilos de tu web en línea en la cabecera para que cargue más rápido.
Así por encima sin ver la web, apostaría a que o bien no está cogiendo los colores personalzados y no los está cargando o que algún otro plugin o archivo está cargando a posteriori estilos css que sobreescriben a los que crea Async JS/CSS.
Si no te apetece tocar mucho código, se me ocurre que bastaría con añadir en el footer los estilos que quieras personalizar también en línea. Si necesitas ayuda, pásame la web por privado y un día de esta semana le doy una vuelta (en mi web tienes como contactarme)
saludos y enhorabuena por el resultado!
Wuau! Súper post, estoy deseando probarlo
Muchas gracias Álvaro
Cualquier duda, por aquí estamos 🙂
Gracias por compartir. una duda, al optimizar la velocidad muchas veces ocurre que al refrescar la pagina, al principio por unos segundos se carga sin estilo, sin fotos, se ve puro blanco con links. hay algo que podemos hacer para evitarlo? gracias
Hola lilach!
Eso suele ser porque se carga antes el contenido que los estilos. Es lo mejor para cargarla rápido y no suele durar más de unas décimas de segundo.
Hola lilach
Yo para evitar eso, tengo una pequeño efecto en la carga sólo con CSS que carga rapidísimo y nunca (o casi casi nunca) llega a verse la página en blanco. Después al final del css, tengo una clase que hace desaparecer esa página de carga y da paso a la web normal ya con css cargado.
De todas formas, prueba a incluir los estilos necesarios para visualizar la mitad superior de tu página en linea (entre etiquetas ) lo más arriba que puedas de tu web. A no ser que sea una web muy compleja, debería ser suficiente para la mayoría de casos.
Puedes extraer los estilos necesarios para la mitad superior de la página con esta herramienta: jonassebastianohlsson.com/criticalpathcssgenerator/
Saludos!!
Muy buen post y gracias por ir al grano!! Por fin información de calidad y útil. Probaré muchos de los trucos que has comentado. Y una duda, me puedes recomendar alguna web que muestre funciones para implementar formularios, botón de compartir etc..
Saludos y nos vemos por las redes.
Gracias Pedro!
La verdad es que no sé si habrá alguna web con lo que tú buscas. De todas formas hay plugins específicos para lo que comentas.
Saludos!
Hola Pedro
Muchas gracias por tus palabras.
Para formularios de contacto no conozco ninguna página que permita configurar (tengo algún snippet pero es algo complejo), pero para las redes sociales hay bastantes páginas.
Busca «social share buttons with code» en google y verás varias opciones. Ten en cuenta que tendrás que añadir algo de código PHP (WordPress) para que se genere el título dinámicamente, pero por lo demás funcionan genial y aligeras un montón la velocidad de la web.
Un saludo 🙂 !
Hola
estoy realizando las indicaciones y he tenido un problema con Async JS and CSS se ha quedado en blanco la pantalla
Cómo puedo encontrar el archivo o archivos que dan esos problemas
Hola Pascual, buenos días
La verdad que nunca había visto un error tan ‘heavy’ con ese plugin. Lo normal es que deje de funcionar algún slider, o funcionalidad javascript concreta, pero toda la web ..
Habría que ver el caso concreto, pero lo único que se me ocurre así de primeras es que pienses a lo grande, debe ser algún plugin o código JS que tenga una gran influencia sobre la web, se me ocurre que quizás sea algún constructor o algo parecido (divi, elementor etc..)
Si no lo ves claro, prueba a desactivar plugin a plugin hasta dar con el culpable (recuerda limpiar cache para cada prueba).
PD: Entiendo que con pantalla en blanco, te refieres a completamente en blanco sin texto ni nada.. Si es fondo blanco y te aparecen las letras y eso pero sin diseño, entonces se trata de CSS. Revisa bien la configuración del plugin que no tengas marcado nada raro y me cuentas.
Un saludo!
Me guardo este artículo !! Tiene muchas cosas que habrá que probar poco a poco !! Saludos !!
Gracias Gustavo.
Aquí estamos para cualquier duda
Excelente guía, gracias por el aporte.
Hola!!
Gracias a ti por pasarte a comentar
Un saludo!
Buenos días,
he seguido el artículo hasta la parte de Google Fonts y se han dejado de cargar los Sliders. La mayoría son la versión LITE de HUGE IT (Responsive Silider) y uno de Slider WD.
También ocurre que en PageSpeed Insights mi sitio nos es analizado y es rechazado.
La url es https://www.nuestros-viajes.com
Gracias
Saludos
Deshaz el cambio y optimiza el resto de cosas. Los sliders por lo general no son muy amigos de la optimización.
Hola David,
gracias por responder tan rápido.
Parece evidente pero cómo deshago el cambio, eliminando los plugin?
gracias
Restaurando una copia de seguridad anterior a los cambios 🙂
Hola Mario
Mi primera recomendación, es que en la medida de lo posible trates de eliminar el slider de tu web ya que está demostradísimo que no funcionan y empeoran la experiencia de usuario.
Te recomiendo que visites la web: shouldiuseacarousel.com
Si decides mantenerlo, como comenta David, esta clase de funcionalidades no son muy amigas de la optimización, por lo que tendrás que o bien renunciar a optimizar ese apartado o como explico en el artículo, utilizar el plugin Async JS & CSS para indicar que no quieres que optimice los archivos que hagan referencia al slider (y posiblemente también jquery).
Para volver tu web al estado inicial, desactiva el plugin Async JS & CSS que es casi con total seguridad el que está causando el conflicto, borra la caché del navegador y ya deberías tenerlo.
Un saludo!
Que buen post! Al fin un articulo donde no promocionen los tipicos plugins de optimizacion por eso tengo esta duda ¿Qué opinas de estos plugins me refiero a WP Rocket, WP Fastest Caché y similares? No son la solucion definitiva verdad? Yo uso WP Rocket pero no he obtenido los resultados esperados probaré lo que has publicado aquí. Gracias!
Gracias por comentar Enrique!
Si te soy sincero yo uso Wp Rocket en otro proyecto y no es la panacea que todo el mundo se cree. No obstante, como plugin está genial, pero hay que trabajar muchas más cosas para optimizar a tope la web, y en eso, este post me parece la mejor solución.
Saludos!
Enhorabuena por el pedazo de articulo!!!. Gracias por compartir tan valiosa información a la comunidad wordpress!!!
Gracias Nicolás, todo el mérito es de Danyel
Hola vamos a usar tus recomendaciones muy buenas
gracias
saludos
Interesante artículo. Ya lo he guardado en mis favoritos para aplicación inmediata a mi Web.
Se pierde de vista este artículo y se convierte en referencia para optimizar tu WordPress.
Éxitos.
Gracias! Raúl!
Hola Raúl, muchas gracias por tomarte el tiempo de dejar tu comentario 🙂
Agradecerte tus palabras y recordarte que cualquier duda estoy a tu disposición.
Un saludo!
amigo como estás. buen tutorial subí unos 5 puntos. pero sigo atorado con
Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página
Aprovechar el almacenamiento en caché del navegador (.com/wp-content/cache/minify/afefc.css)
Hice tus recomendaciones y aun siguen apareciendo (google tag manager, google analytics y dos de facebook)
Eliminar el JavaScript a veces da problemas en la web por lo que no siempre es buena opción quitarlo.
Respecto en lo de caché, en el artículo tienes la solución, no obstante solucionar eso no te dará muchos más puntos.
Te recomiendo que te centres en los otros aspectos, sobre todo en las imágenes.
Saludos!
Hola Carlos
Como te dice David, «Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página» es sin duda el factor de Google Page Speed Insights más «conflictivo».
Para solucionarlo, en resumen, tal y como se explica en el artículo en detalle, debes evitar que se carguen múltiples archivos javascript / css evitando la carga de archivos innecesarios y combinando los que sí necesites.
Además, para eliminar el aviso, deberás añadir el css que se aplica a la parte superior de la página en el archivo header.php de tu web.
Para saber cual es el CSS que debes usar, puedes utilizar: jonassebastianohlsson .com/criticalpathcssgenerator/ (todo junto)
El archivo css que no se cachea, lo solucionarás si combinas todos en 1 mismo archivo con el plugin que se comenta arriba.
En cuanto a google tag manager y facebook pixel, tal y como se explica, no vas a poder eliminar esos avisos, así que olvidate y no pierdas tiempo.
En cuanto a Google Analytics, arriba hay un plugin que te ayudará a quitar el aviso (aunque no hará que tu web vaya más rápido).
saludos
¡Hola!
Que gran tutorial 😀 Me encanta. Además lo he encontrado porque ahora estoy intentando aprender lo máximo sobre WPO para aplicarlo en mis proyectos.
Me surge la duda de si hay algunos pasos que quedan «hechos» gracias al plugin WP Rocket. Ya he leído por ahí que lógicamente no es la panacea y que hay que realizar muchas más acciones. Pero por ejemplo en el punto 2 se habla de carga asíncrona de js y es algo que ya por ejemplo viene con WP Rocket no?
En definitiva, qué pasos podríamos considerar que quedan cubiertos con WP Rocket y no sería necesario instalar otros plugins que recomiendas en el artículo.
¡Gracias!
Hola Carlos, gracias por comentar!
Yo no utilizo el plugin WP Rocket pero sí sé que para el punto 2 y creo que el punto 3 este plugin puede ayudarte bastante. Además también tiene la opción de lazy load para las imágenes que te da un plus de velocidad.
Saludos!
Hola Carlos, me alegro que te guste.
La idea del tutorial era conseguir el resultado con plugins gratis, pero si tienes la posibilidad de adquirir versiones premium como por ejemplo WP Rocket, mucho mejor claro 🙂
WP Rocket permite:
– Lazyload de imágenes y video
– Minificación & Concatenación de archivos (Html, css, js, google fonts y alguna cosa más si no recuerdo mal)
– Cache (obviamente :P)
– CDN y alguna cosa más
Respondiendo a tu pregunta, con WP Rocket te ahorras Autoptimize, el plugin de cache, el de lazyload y si usas CDN, el plugin que utilices para configurarlo.
saludos
Perfecto! Muchísimas gracias 🙂
Que luego nos ponemos a instalar plugins y se están chafando unos con otros.
Pues voy a poner en práctica este tutorial paso por paso 😀
Me parece un artículo muy interesante ¿será que me puedes ayudar con una duda que tengo? yo solía utilizar el recurso “Descarga los recursos de imagen, JavaScript y CSS optimizados para esta página”, me gustaba utilizar la propia de google puesto que los otros programas no reducen tanto el tamaño como lo hace el mismo Google o al menos no los que yo he usado, el problema es que con la última actualización del PageSpeed Insights, ya no encuentro esa opción, ¿tal vez sabes en donde se encuentra esta opción en el actual PageSpeed Insights?
Un saludo
Hola Geovanny, esa opción ya no está por lo que tendrás que optimizar las imágenes por ti mismo.
Si usas el buscador del blog encontrarás un artículo donde explico cómo optimizarlas.
Saludos!
Hola Geovanny
Como comenta David, esa opción ya no está disponible, lo que sí tienes, además de las herramientas que recomienda David en su post, es un compresor que ha sacado Google y que parece ser que funciona bastante bien.
Puedes encontrarlo en squoosh .app (Todo junto)
saludos
Pues habra que probarlo!!! Yo lo maximo que llegue a 96 movil 99 pc en una web muy simple casi sin plugings ni imagenes ni nada.
Para optimizar wp-rocket pero no llego ni de broma a esos numero
Hola
Estas recomendaciones funcionan cuando estás usando un constructor de páginas tipo DIVI o Elementor.
Las estoy implementando en DIVI y la verdad es que no veo mejoría apenas .
Alguna solución