<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=244227003061217&amp;ev=PageView&amp;noscript=1">

Cómo conseguir un PageSpeed 100 en tu blog de Wordpress

Estar bien posicionado en los resultados de una búsqueda en Google es uno de los principales objetivos de cualquier responsable o gestor de una página web o blog. Pero el hecho de que sea una meta tan común y deseable no significa que su consecución resulte fácil.

Aparecer en las primeras posiciones de las SERPS de Google nos obliga a pensar muy bien y cuidar hasta el más mínimo detalle de nuestro blog, página web o tienda online. Y uno de los aspectos más importantes, y también de los más críticos, es la velocidad de carga, como veremos a lo largo de este post.

Google PageSpeed: una herramienta excelente para diagnosticar la velocidad de nuestra web

Los algoritmos de Google están pensados para premiar aquellas páginas que, por encima de todo, ofrecen contenido de valor a los usuarios y les proporcionan una experiencia de navegación excelente. Dentro de dicha experiencia de usuario, uno de los aspectos más importantes y críticos para Google son los tiempos de carga de las páginas. Por este motivo, los responsables de Google han creado una herramienta propia que permite realizar un diagnóstico de la velocidad de nuestro blog o página web, además de informarnos de las acciones que podemos realizar para mejorarla.

Esta excelente herramienta se llama Google PageSpeed y se caracteriza por ser muy fiable y sencilla de utilizar: basta con indicarle la URL que queremos diagnosticar y nos devolverá una puntuación de 0 a 100. Además, Google valora la navegación desde dispositivo móvil de modo diferente a una página cargada en un navegador de escritorio, lo cual quiere decir que al realizar el diagnóstico lo más probable es que obtengamos dos puntuaciones distintas.

Si tienes una página web realizada en Wordpress y al pasar tu URL por Google PageSpeed has obtenido unas puntuaciones algo desoladoras, no te preocupes. A continuación te proporcionamos algunos consejos para conseguir un resultado de 100 sobre 100.

Aunque no estés utilizando Wordpress, este artículo te va a ayudar igualmente a conseguir una buena puntuación. Te bastará, únicamente, con encontrar algún plugin o extensión equivalente a W3 Total Cache en caso de utilizar otro CMS (Content Management System), o si por el contrario es una página desarrollada a medida, puedes aplicar igualmente todas las acciones con ayuda de un desarrollador o tu proveedor de hosting.

¿Qué necesitamos para poder obtener un PageSpeed 100?

Si queremos aspirar a obtener la máxima puntuación en Google PageSpeed, antes de ponernos manos a la obra debemos asegurarnos de que disponemos de todas las herramientas necesarias y bien configuradas para lograr nuestro objetivo. Vamos a repasarlas a continuación:

W3 Total Cache

Este plugin gratuito es imprescindible para cualquier página web que esté basada en Wordpress, puesto que nos facilitará enormemente la tarea de mejorar la velocidad de nuestro sitio, además de hacerlo a través de una interfaz muy sencilla de utilizar.

Si todavía no los tienes instalado, puedes descargarlo desde la página oficial del plugin del directorio de plugins de Wordpress. Asegúrate de que, además de instalado, se encuentre activo.

Cliente FTP

Es probable que cuando hayamos analizado nuestra página web con Google PageSpeed, dicha herramienta nos indique que tenemos que realizar cambios en algunos archivos de Wordpress para poder optimizar la velocidad de carga de nuestra web.

Aunque de entrada la realización de estos cambios te pueda sonar algo muy técnico, si sigues estos pasos te va a resultar más sencillo de lo que puedas esperar:

  • En primer lugar, para poder editar archivos que se encuentran alojados en un servidor en internet necesitas acceder a este desde un protocolo llamado FTP (File Transfer Protocol). Para ello, solo necesitamos un cliente FTP y hay muchos que funcionan estupendamente y, además, son gratuitos. Para ahorrarte la búsqueda, aquí te sugiero los dos más populares, que además son multiplataforma (funcionan tanto en Windows como en Mac):
    • FileZilla. Es uno de los más populares entre los desarrolladores, pus ofrece una gran cantidad de opciones, es gratuito, multiplataforma y además recibe actualizaciones con mucha frecuencia.
    • Cyberduck. También es muy popular, dispone de una interfaz más agradable que FileZilla y es perfecto para la mayoría de los usuarios que necesiten un acceso FTP sin grandes complicaciones.
  • Una vez que ya tenemos un cliente FTP, solo nos faltaría indicarle que queremos conectarnos al servidor donde está alojado nuestro Wordpress. Para ello deberemos indicarle los siguientes parámetros:
    • El host o servidor
    • Usuario
    • Contraseña

Habitualmente, cuando contratamos un servicio de hosting este nos indicará las credenciales nombradas anteriormente de acceso FTP. Si no dispones de ellas, puedes ponerte en contacto con tu proveedor para que te las facilite.

¿Te gusta lo que estás leyendo? Suscríbete

Editor de código

Si somos usuarios de Windows, podremos editar los archivos en Bloc de Notas (o Notepad), y si somos usuarios de Mac, podemos utilizar TextEdit, siempre que guardemos los cambios como texto sin formato.

Tal vez estos dos programas nos sirvan para salir del paso, pero es recomendable utilizar un editor de código desarrollado expresamente para esta función. Aquí te propongo dos que, además de ser muy potentes, son completamente gratuitos:

Conseguir el 100 sobre 100: paso a paso

Ahora que ya sabemos todo lo que necesitamos para aspirar a la máxima puntuación en Google PageSpeed, es el momento de analizar la velocidad de nuestra página web o blog.

Al hacer el diagnóstico, la herramienta de Google nos devuelve dos puntuaciones: la primera para navegadores de dispositivos móviles y la segunda para navegadores de escritorio. Lo más probable es que te lleves la sorpresa de que los dos resultados no coincidan. La explicación es que, en la actualidad, Google se toma mucho más en serio y es más exigente con la velocidad de navegación en móviles, por lo que este valor casi siempre será más bajo con respecto al de navegadores de escritorio.

Además de las puntuaciones, PageSpeed nos mostrará qué aspectos de nuestra página ha penalizado y nos dará unas breves sugerencias sobre cómo solucionarlo. También es muy probable que no tengamos que intervenir en los 8 puntos distintos que analiza, pero aun así te mostramos cómo salir exitoso teniendo en cuenta los posibles errores en todos los casos y, además, la forma de conseguir la ansiada puntuación 100 sobre 100.

A continuación, vamos a analizar todos los avisos en profundidad.

1. Reducir el tiempo de respuesta del servidor

Cuando PageSpeed nos muestra esta advertencia, lo que nos está pidiendo es que cacheemos nuestra página web. A grandes rasgos, existen dos tipos de caché:

  1. El que se almacena en el servidor.
  2. El que lo hace en nuestros navegadores.
En este aviso concreto que nos devuelve Google, se refiere a que cacheemos la página en el servidor.

¿Qué logramos al cachear una página?

Para entender los beneficios de cachear una página en la velocidad de carga, en primer lugar hemos de comprender que también existen dos grandes tipos de código de programación en el campo del desarrollo web: los que ejecuta el servidor y los que son ejecutados en nuestro navegador.

Tanto Wordpress (o cualquier otro CMS) como la mayoría de los sitios que tiene algún tipo de contenido dinámico están desarrollados principalmente en un lenguaje de programación basado en servidor. Esto quiere decir que cuando una visita llega a nuestro blog, para poder ver nuestra página el servidor necesita realizar una serie de tareas previas que requieren de un tiempo mínimo. Este tiempo que debemos esperar hasta poder visualizar la página que hemos solicitado es lo que Google llama "tiempo de respuesta del servidor". Esto supone que la primera vez que el servidor recibe una visita realiza todas las acciones para mostrar la página solicitada, devuelve el resultado (que es una página estática en HTML), la muestra a este primer usuario y la guarda en el propio servidor.

Al cachear una página logramos algo muy importante para mejorar la velocidad de carga: en la siguiente visita del usuario, en lugar de volver a repetir todo este proceso se le mostrará directamente el resultado, reduciendo así drásticamente el tiempo de espera y el consumo de datos del servidor.

¿Cómo cachear la página?

Ahora que ya conoces tus beneficios, te mostramos los pasos para hacerlo, que son fáciles y rápidos:

  • Activar el caché de nuestro sitio con el plugin W3 Total Cache de Wordpress. Únicamente tienes que acceder al plugin (previamente instalado y activado) desde Performance, que se encuentra en la barra lateral izquierda del administrador de Wordpress, y después ir a General Settings. Finalmente, tienes que activar la opción Page Cache, que la encontrarás como primera opción del segundo cuadro.
  • Alternativa a Wordpress. Si no estás utilizando Wordpress para cachear la página, pero sí otro CMS, lo que puedes hacer es buscar un plugin o extensión equivalente.
  • Web desarrollada a medida. En este caso le podemos pedir a un desarrollador que programe la funcionalidad u otra opción, contactando con nuestro proveedor de hosting para pedirle que configure el caché de las páginas en las opciones del servidor.

2. Especificar caché del navegador

En el punto anterior explicábamos los dos tipos de caché que se pueden aplicar en una página web: el que queda guardado en el servidor y el que lo hace en nuestros navegadores. Esta alerta de PageSpeed está relacionada directamente con el tipo de caché que almacena los archivos en nuestro navegador.

Así como el caché de servidor está pensado para ahorrarnos el tiempo en procesar el código de Wordpress para devolvernos un resultado en forma de página HTML de unos pocos Kb (Kilobytes) de peso, el caché del navegador lo que hace por defecto es guardarnos localmente todas las imágenes, archivos de estilo CSS y archivos JavaScript, entre otros, contenidos en ese documento HTML. De esta manera, la segunda vez que accedemos a una misma página en lugar de descargar de nuevo todos estos archivos los recupera directamente de nuestro ordenador.

New call-to-action

Si esto ya lo hace el navegador por sí solo, ¿que nos está pidiendo Google? Lo que nos está pidiendo es que le indiquemos al navegador durante cuánto tiempo debe guardarlos.

¿Cómo indicar el tiempo de cacheado a los navegadores?

Indicaremos este tiempo añadiendo unas pocas líneas de código en el archivo .htaccess de nuestra página web. Para ello debemos tener en cuenta lo siguiente:

  • Necesitaremos un cliente FTP y los datos de accesos, como se especifica al principio de este post.

  • Hemos de saber que es un archivo oculto, es decir, que es probable que no lo veamos si no activamos la opción de visualizar archivos ocultos en el cliente FTP.

  • En general, el archivo .htaccess está situado en la raíz de Wordpress (o cualquier otro CMS).

  • Antes de todo, deberíamos descargarnos una copia a nuestro ordenador, ya que si algo sale mal al editarlo todo, nuestro Wordpress podría dejar de funcionar. Si eso ocurriese, bastaría con restaurar el archivo en el que lo hemos guardado previamente para solucionar el problema al instante.

Teniendo los puntos anteriores en cuenta, ya puedes realizar los cambios en tu archivo. Para ello únicamente tienes que copiar este código y pegarlo al principio de nuestro archivo .htaccess:

# ESPECIFICAR TIEMPO DE CACHEADO
# Configuración del tiempo que los navegadores han de guardar
# en caché los archivos planos.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 10 days"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/plain "access plus 1 week"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/x-icon "access plus 3 months"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/x-icon "access plus 3 months"
</IfModule>
# FIN: ESPECIFICAR TIEMPO DE CACHEADO

Si no tienes el archivo .htaccess en tu servidor, no te preocupes, lo puedes crear tú mismo.

Alternativa a Wordpress

En este caso, el archivo .htaccess no es exclusivo de Wordpress, así que el proceso para especificar el tiempo en caché será el mismo para cualquier entorno web.

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

Cuando entramos en una página web, nuestro navegador procesa el código HTML línea a línea, y cuando en este código se encuentra una llamada a un archivo externo, como una hoja de estilos CSS o un archivo de JavaScript, ocurre lo siguiente: se detiene este proceso, se hace la llamada a ese archivo, se espera respuesta del servidor y, finalmente, se descarga en nuestro equipo. Cuando finaliza este proceso se continúa con el renderizado HTML de la página, y así para cada archivo de este tipo.

Estos archivos CSS o JavaScript habitualmente se sitúan al principio del código HTML, entre las etiquetas y, en definitiva, lo que nos pide Google con este aviso es que movamos estos archivos al final del código.

Cómo mover los archivos al final de la página

No te alarmes. Si tienes un blog en Wordpress, gracias a W3 Total Cache es una operación muy sencilla:

  1. Hemos de acceder mediante FTP a los archivos de nuestra plantilla activa de Wordpress. Puedes encontrar los archivos de tus temas en wp-content/themes/.
  2. Accede al archivo footer.php de tu plantilla y añade las siguientes dos líneas antes del cierre de la etiqueta.
<!-- W3TC-include-css -->
<!-- W3TC-include-js-head -->

Esta acción moverá todos los archivos CSS y JavaScript al final de nuestra página, lo que reducirá enormemente el tiempo que necesita el navegador en renderizar la primera mitad del código.

¿Y sin Wordpress?

Del mismo modo que hemos comentado en puntos anteriores, si utilizas un CMS distinto no debería costarte demasiado encontrar algún plugin o extensión equivalente a W3 Total Caché que coloque automáticamente estos archivos al final de la página.

En caso de que no estés utilizando un CSM, tienes la opción de mover manualmente dichos archivos.

4. "Minificar" CSS, HTML y JavaScript

Cuando un programador escribe un código, suele tabular, añadir espacios y saltos de línea para estructurarlo de forma que le resulte lo más fácil posible comprenderlo.

No obstante, un navegador, para poder comprender e interpretar esos archivos, no necesita que esté visualmente bien organizado. Así pues, estos espacios, tabulaciones y saltos de línea ocupan un espacio en Kb (kilobytes) en los archivos que, siendo prescindibles, aumentan innecesariamente el tiempo de carga de nuestra página web.

Para solventar este problema, lo que nos pide Google es que minifiquemos los archivos CSS, HTML y JavaScript, eliminado así el espacio extra que ocupan y, por consiguiente, reduciendo el tiempo de carga.

Además, si tenemos, por ejemplo, tres archivos JavaScript o CSS a los que llamamos por separado, aunque estos estén minificados, obligamos al navegador a hacer tres peticiones diferentes que podríamos reducir a una sola si, además, los juntamos en un único archivo.

¿Como minificar estos archivos en Wordpress?

De nuevo, el plugin W3 Total Cache nos facilita muchísimo esta tarea, reduciéndola a estos dos pasos:

  1. Ir desde el administrador de Wordpress a Performance, en la barra lateral izquierda, y después acceder a Minify.
  2. Habilitar el minificado marcando la opción Enable en cada uno de los cuadros correspondientes: HTML & XML, JS, CSS.

Cómo minificar si no utilizas Wordpress

Muchos editores de código tienen la opción de minificar código HTML, CSS y JavaScript fácilmente. Si se opta por esta forma, vale la pena recordar que al minificar se haga siempre una copia de seguridad de los archivos.

Si utilizamos un CSM diferente a Wordpress lo más probable es que no te cueste demasiado encontrar algún plugin o extensión que minifique estos archivos.

5. Prioriza el contenido visible

Este punto y el punto 2 de este post son muy similares. Lo que Google nos pide mediante su herramienta de análisis de la velocidad de carga es que nos aseguremos de que no haya una cantidad exagerada de código JavaScript o CSS incrustado entre el código HTML, para que no aumente demasiado el tiempo de carga de la primera mitad de la página.

Para que Google no nos muestre este mensaje, además de las acciones indicadas en los puntos 2 y 3, debemos hacer lo siguiente: 

  • Ir a Performance en la barra lateral del administrador de Wordpress y seguidamente Minify.
  • En el cuadro de HTML & XML hemos de activar las opciones Inline CSS minification y Inline JS minification, esto comprimirá también el código JavaScript y CSS incrustado en nuestro código HTML, es decir, que no esté en un archivo externo.

¿Como puedo hacerlo si no tengo Wordpress?

Como comentamos en cada punto, si utilizas otro CSM siempre puedes buscar una alternativa a W3 Total Cache o un plugin o extensión que minifique esta parte de tu código.

Si es un desarrollo a medida, puedes incluir los JavaScripts y CSS incrustados en archivos externos minificados que carguen al final de tu código.

6. Optimizar imágenes

Es muy habitual que al pasar nuestro blog por Google PageSpeed obtengamos una puntuación muy baja y pensemos que tenemos un largo camino por delante para mejorar la velocidad de carga de nuestras páginas. En muchas ocasiones esto no es así, puesto que lo que más penaliza Google es el peso de las imágenes en el caso de que excedan en lo más mínimo de lo que el buscador considera como óptimo.

En base a las dimensiones y extensión de la imagen (por ejemplo, JPG o PNG), Google calcula un peso de archivo adecuado. 

New Call-to-action

¿Cómo optimizar el peso de las imágenes?

No es un problema difícil de resolver si tenemos en cuenta lo siguiente:

  • Tanto si utilizamos Wordpress, otro CMS o tenemos una web desarrollada a medida, en este caso el proceso es exactamente igual.
  • Probablemente, ajustando las dimensiones de la imagen al espacio que va ocupar en la página no será suficiente para Google.
  • Tenemos, además, que comprimirlas al máximo. Para ello podemos utilizar el servicio TinyPNG que comprime de forma excelente tanto archivos PNG como JPG.

Google recomienda otras como jpegtran y jpegoptim para archivos JPG y OptiPNG o PNGOUT para archivos PNG.

7. Habilitar compresión

Ya hemos visto cómo podemos optimizar al máximo los archivos de nuestra página minificándolos y agrupándolos. Además, existe un paso adicional: comprimirlos en formato GZIP para reducir todavía más el tiempo de carga de nuestras páginas.

La mayoría de los proveedores de hosting tienen esta opción activada por defecto en sus servidores. En el caso de que Google PageSpeed te muestre esta alerta, comprueba primero que tienes la opción habilitada en W3 Total Cache desde Performance en la barra lateral izquierda en el administrador de Wordpress y accediendo, posteriormente, a Browser Cache. Finalmente, en el cuadro General marca la opción Enable HTTP (gzip) compression.

Si todavía te sigue apareciendo el aviso, contacta con tu proveedor de hosting para asegurarte de que tengas hablitada la compresión GZIP.

8. Evita los redireccionamientos a páginas de destino

Aunque no es muy habitual, en ocasiones nos aparece este aviso cuando forzamos una redirección demasiadas veces.

Por ejemplo, cuando un usuario accede a:

http://tudominio.com/blog

Y lo redirigimos a:

http://blog.tudominio.com

Normalmente no es un problema, puesto que Google solo comienza a penalizarnos a partir de una segunda redirección. Es decir, si además de la redirección que hemos visto anteriormente, volvemos a redirigir al usuario a, por ejemplo:

http://www.tudominioblog.com

Google sí que considera que una tercera petición HTTP aumenta demasiado el tiempo de espera para visualizar el contenido. Así que debemos evitarlo.

Conseguir PageSpeed 100 en todas las páginas

Una práctica habitual es pasar la URL de la página de inicio de nuestra página web por Google PageSpeed, y una vez hemos logrado el 100 sobre 100 pensar que todo el trabajo está hecho.

Por desgracia esto no es así, ya que Google no posiciona únicamente nuestra página de inicio, sino que posiciona todas las páginas de nuestro blog. Por eso una buena práctica es pasar PageSpeed por las páginas más relevantes de nuestro sitio y asegurarnos de conseguir también lo más cercano al 100 que nos sea posible.

Mantener la puntuación

También cometeríamos un error si después de conseguir un PageSpeed 100 en todas las páginas relevantes de nuestro blog, pensáramos que ahora sí tenemos todo el trabajo hecho.

Cuestiones como realizar algún ajuste o cambio en nuestra página, subir una imagen con un peso por encima de lo necesario en un post o modificaciones en los criterios del propio Google pueden alterar los resultados de PageSpeed. Por lo tanto, nuestra recomendación para mantener la puntuación es hacer una revisión mensual, ya que nos servirá para asegurarnos de que nunca haremos un bajón en las puntuaciones por un tiempo demasiado largo.

Conclusión

Como comentaba al principio, posicionarse bien en Google requiere cuidar una gran cantidad de detalles. Obtener un Google PageSpeed 100 no es determinante, pero sí muy importante si queremos que Google nos mire con buenos ojos.

Espero que este artículo te haya sido de ayuda y no dudes en compartir tus impresiones o comentarme cualquier duda o sugerencia.

New Call-to-Action

¿Y tú qué opinas? ¡Déjanos aquí tus comentarios!

Suscríbete al Blog
Suscríbete por email y recibe además un pack de bienvenida con nuestros 5 mejores artículos