google page speed 100

Pagespeed insight de Google. Guía para conseguir el 100/100

Pagespeed insight de Google. Guía para conseguir el 100/100
5 (100%) 2 votes

Conseguir 100 en el PageSpeed de Google no es fácil pese a que todos buscamos que nuestra página posicione de la mejor manera en Google. Para ello es necesario tener en cuenta un montón de factores, tanto propios como externos, a nuestra web. Sin embargo, cuantos menos motivos le demos a Google para que nos sancione mejor para nuestro site. Uno de estos factores On site es la velocidad de carga de nuestra web, la cual toma como referencia los valores de Pagespeed de Google. En esta ocasión voy a daros una serie de trucos para que consigáis sino el 100%, el 90% en el PageSpeed de Google. ¿Porque no os puedo asegurar el 100%? pues porque depende de muchos factores externos, como por ejemplo vuestro servidor, el theme que uséis, vuestros plugins, etc. Sin embargo, con estos consejos mejoraréis sustancialmente vuestra nota y lograréis casi el 100% en esta aplicación de Google. Sino siempre podéis consultarme.

¿Por que es útil Page Speed de google?

Sencillo, porque es una nota que Google usa para posicionar vuestra página web de manera orgánica (SEO) . Si vuestra web es lenta en cargar repercutirá en vuestro posicionamiento web. Por lo tanto, es un tema muy importante ya no solo por el posicionamiento, sino de cara a los visitantes futuros de vuestra web. Pero sin perder más el tiempo vamos al grano. Lo primero de todo necesitamos analizar la velocidad de carga de nuestra web con Page Speed Insight, una vez hecho esto analizaremos los principales errores:

Activar la compresión

Si os salta un mensaje del tipo de que necesitáis activar la compresión en tu sitio web lo primero que debes de hacer es ir a la carpeta raíz de tu site WordPress y modificar tu archivo .htaccess escribiendo las siguientes lineas al final del archivo:

<FilesMatch "\.(css|js|ico|pdf|jpg|jpeg|png|gif|php|woff)$">
SetOutputFilter DEFLATE
</FilesMatch>

Con la propiedad DEFLATE indicas que los archivos estarán comprimidos a partir de ahora. Puedes llegar a tener problemas aunque apliques este código, sobre todo si usas servidores del estilo 1&1. Cada Hosting usa un tipo de compresión por lo que está solución servirá para gran parte de ellos. Por ello yo siempre recomiendo el hosting Siteground, para evitarte esta clase de problemas.

Especificar el caché

Al igual que en el anterior caso modificaremos nuestro archivo .htaccess y escribiremos las siguientes líneas de código justo debajo de lo que habíamos escrito anteriormente.

<FilesMatch "\.(css|js|ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4)$">
Header set Cache-Control "public"
Header set Expires "Thu, 15 Apr 2020 20:00:00 GMT"
</FilesMatch>

De esta forma hemos especificado que los archivos descritos expirarán en 2020. En caso de usar otro tipo más de archivo simplemente deberíamos de escribir la extensión de este junto a los anteriores. Tan simple como eso ¡A por el siguiente paso!

Minimizar JAVASCRIPT y CSS

En este caso lo que haremos será reducir los espacios en blanco y contenido innecesario en nuestros archivos CSS y JS de WordPress. Esto lo que hará será agilizar la velocidad de carga puesto que los archivos reducen su tamaño. Para ello instalaremos el plugin Autoptimize y una vez dentro del plugin marcaremos las casillas de optimizar HTML, CSS y JAVASCRIPT. Tan simple y sencillo como eso.

css3, javascrip y wordpress

Reducir el tiempo de respuesta del servidor

Para ello iremos al panel de control de nuestro hosting y buscaremos un apartado en el que ponga algo como “PHP” o “Configurar PHP”. Normalmente, cada hosting tiene su propio panel de administración y por eso no te puedo asegurar como estará escrito. Una vez dentro actualizaremos la versión de PHP hasta la versión más reciente (ahora ya van por la 7). Recomiendo no utilizar la más reciente de todas para evitar fallos.

Una vez hecho, esto el error puede seguir persistiendo pero es por que Google es demasiado pesado con esto y para él nunca es suficiente. Si nos fijamos el tiempo de respuesta se ha reducido considerablemente. Por mucho que queramos no podemos hacer mucho más si nuestro Hosting es malo. Por eso yo siempre recomiendo uno de los mejores en España: Siteground.

Optimizar imágenes

De nuevo este es un tema controvertido por buscar el equilibrio perfecto entre calidad de imagen y funcionalidad. Cuanto más calidad tiene una imagen más pesa y viceversa, de ahí el dilema. Será imposible que elimines este problema si tus imágenes no están optimizadas, y, aún así, seguramente Google te pida más.

Yo primero recomiendo optimizar las imágenes con Phostohop y bajarlas la calidad lo máximo sin comprometer la calidad. Además has de recordar los formatos web usados para cada tipo de imágenes. Te los recuerdo por si acaso:

  • GIF: Para animaciones
  • PNG: Para archivos de muy pocos colores, esencial para logos o iconos
  • JPG: Para el resto de imágenes como fotografías

Acto seguido de subirlas ya optimizadas a tu sitio te recomiendo que utilices el plugin Smush Image Compression and Optimization. Este plugin lo que hace es optimizar aún más tus imágenes reduciéndolas al máximo sin perder calidad. Te lo hará automáticamente con las primeras 50 imágenes y luego lo tendrás que hacer de manera manual si no quieres comprar el plugin.

Eliminar el JAVASCRIPT que bloquea la visualización y el CSS del contenido de la mitad superior de la página

Básicamente este error nos dice que la página web tarda en cargar todo porque primero tiene que cargar el CSS y el JAVASCRIPT por estar en el header de esta. Bien, de nuevo instalaremos un nuevo plugin llamado Above The Fold Optimization. Deberéis tener mucho cuidado con este plugin ya que es para usuarios “avanzados”. Bien configurado este plugin os dará un salto cualitativo en puntuación.

Por su alta complejidad nos limitaremos ha elegir las opciones “Optimize CSS Delivery”, “Optimize Web Fonts”, “Optimize Javascript Loading” y “Lazy Load Scripts”. Al hacer esto puede que nuestra web sufra modificaciones. Sino tienes un nivel óptimo de programación web te recomiendo que vayas probando el juego de opciones hasta que tengas el mayor numero de ellas marcadas sin modificaciones en tu web. Si tienes dudas con el plugin comentalas abajo y yo mismo te ayudaré con ellas.

AMP O Páginas Móviles Aceleradas en PageSpeed

Después de todo esto nos faltaría optimizar la página web para móviles. Sí, pese a que usemos un diseño responsive nuestra página web se puede optimizar mucho más para móviles. Todo esto lo haremos gracias a la tecnología AMP (Accelerated Mobile Pages). De esta manera matamos dos pájaros de un tiro: mejoramos la velocidad de carga y la experiencia del usuario.
Para que nos entendamos, la tecnología AMP no es una sustitución de las páginas responsive, sino un complemento. Esta actúa quitando la mayoría de elementos innecesarios de la web como la estructura, fondos o scripts. Para ello solo necesitamos instalar este plugin y ¡listo! Página web optimizada.

Para finalizar y como he recordado durante el post no conviene obsesionarse con el PageSpeed de Google. Existen otras herramientas como Pingdom o GT Metrix que te darán mayor información sobre la velocidad de carga de tu web si realmente quieres obtener la mejor puntuación posible. No obstante recordarte que a partir de valores superiores a 85% tu página está más que optimizada a nivel de carga.

pagespeed insight

¿Es tan importante el Google Page Speed Insight?

Si y no, me explicaré. Realmente viene bien tener una alta puntuación en esta herramienta ya que al fin y al cabo es Google Page Insight. Es decir, si queremos posicionar en Google tendremos que pasar por sus filtros queramos o no.

Sin embargo, existen numerosas herramientas online que miden con mayor precisión la velocidad de carga de tu web como GT Metrix o Pingdom. Gracias a estas herramientas podremos saber que archivos son los que más pesan en nuestra web y nos darán sugerencias para que los solucionemos.

Método interno de wordpress para medir la velocidad de carga de tu web mejor que el Page Insight de Google

A veces con las herramientas anteriores mencionadas y el Page Speed de Google no es suficiente para extraer todos los datos necesarios sobre la velocidad de la web. Pese a que factores externos como el servidor estén lo más optimizados posibles la carga de nuestra web puede seguir siendo lenta y esto se deberá a un alto porcentaje de plugins pesados.

Está información no nos la dará el Page Insight de Google sino que nos la proporcionará el plugin P3. Su funcionamiento es simple:

  1. Instalas el plugin
  2. Una vez instalado y en el panel de plugin pinchas justo debajo del nombre en “Scan Now”
  3. Obtienes las estadísticas sobre tus plugins ordenados por colores
  4. Desactivas el plugin una vez usado para ahorrar recursos en tu web

Nos leemos! 🙂

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa su navegación esta aceptando nuestra política de cookies. ACEPTAR
Aviso de cookies