Configurar PageSpeed en WordPress

, , ,

A la hora de posicionar nuestro sitio web para atraer a potenciales clientes, existen muchos factores que debemos tener en cuenta. La velocidad de carga de la página web, el contenido de calidad, la estrategia de palabras clave, los backlinks, etc, son factores determinantes para Google y el posicionamiento en otros servidores de búsqueda. Bien es cierto que uno de ellos por sí solo no nos garantiza nada. De poco sirve tener la página más rápida de la web si el contenido que ofrecemos no es de calidad. En este artículo vamos a centrarnos en mejorar la velocidad de carga de nuestro sitio web y configurar pagespeed en wordpress y, así, aumentar nuestra puntuación en Google PageSpeed Insights, que es uno de los factores determinantes para Google que mencionábamos anteriormente. Si te interesa conocer más sobre otros factores, puedes consultar otros artículos en nuestro blog.

¿Qué es PageSpeed?

Si estáis familiarizados con el posicionamiento en Google, seguro que conocéis la herramienta PageSpeed que ofrece Google, que nos otorga una puntuación a nuestro sitio web, basándose sobretodo en la velocidad de carga de la misma.

Configurar pagespeed en wordpress

Para empezar, el primer consejo que os podemos ofrecer es que no os enfoquéis en conseguir un 100 si por el camino tenéis que sacrificar otras cosas que también son cruciales, como el diseño web o la experiencia de usuario. A su vez, esta herramienta nos indica como podemos mejorar la carga de nuestra web y esta puntuación.

configurar pagespeed en wordpress

Si usáis esta herramienta en vuestro sitio web por primera vez, posiblemente os estaréis preguntando qué significan estas recomendaciones que nos ofrece Google y cual es la mejor forma de seguirlas sin calentarte demasiado la cabeza. No te preocupes, Google lo tiene todo previsto y han desarrollado un módulo para instalar en nuestro servidor y automatizar estas tareas. ¿Suena bien, verdad? Pues en el siguiente apartado te ofrecemos unos consejos de configuración.

Configurar PageSpeed en WordPress

Lo primero que tenemos que hacer es instalar el módulo en nuestro servidor. Si estás familiarizado con el manejo de servidores Apache o Nginx, seguramente no tengas ningún problema para realizar la instalación. Si no estás familiarizado, o si tu hosting no te ofrece acceso directo al servidor, nuestra recomendación es que contactes directamente con el soporte y ellos estarán encantados de ayudarte. Y si todo lo anterior falla, puedes contactar con nosotros para que nos encarguemos del hosting de tu web. Nuestros servidores tienen el módulo de PageSpeed instalado por defecto, y, por supuesto, siempre estaremos encantados de ayudarte.

Con el módulo instalado en nuestro servidor, puedes volver a ejecutar la herramienta PageSpeed sobre tu sitio web. Como podrás comprobar la velocidad de carga ya ha mejorado de forma notable. Aún así aún tenemos que configurar PageSpeed en WordPress para exprimir al máximo el módulo.

Pero, empecemos por el principio, ¿cómo configuro el módulo? Para configurar PageSpeed en WordPress el módulo nos ofrece una serie de filtros que podemos activar o desactivar en nuestro sitio web. Este módulo nos ofrece tres configuraciones para facilitarnos la tarea, CoreFilters, OptimizeForBandwidth y PassThrough.

Configuraciones predefinidas

La primera configuración es la que viene activada por defecto y con la que ya habrás notado una mejoría en la velocidad de carga. Esta configuración activa los filtros que el equipo de desarrollo de Google ha considerado como seguros para disminuir el tiempo de carga de cualquier web sin alterar su funcionamiento. Actualmente, esta configuración activa los siguientes filtros:

add_head
combine_css
combine_javascript
convert_meta_tags
extend_cache
fallback_rewrite_css_urls
flatten_css_imports
inline_css
inline_import_to_link
inline_javascript
rewrite_css
rewrite_images
rewrite_javascript
rewrite_style_attributes_with_url

La ventaja de usar esta configuración en vez de activar estos filtros por nuestra cuenta, es que, si establecemos la configuración, el equipo de desarrollo va cambiando y adaptando los filtros incluídos con el paso del tiempo. De esta forma no nos tenemos que preocupar de los cambios que Google pueda aplicar a sus algoritmos.

La segunda de las configuraciones es OptimizeForBandwith. Esta configuración viene desactivada por defecto y es aún más segura para la integridad de nuestra página web, a costa de un menor incremento en la velocidad de carga y una menor puntuación en PageSpeed.

Si, por último, queremos configurar PageSpeed en WordPress a nuestro gusto, debemos usar la última de las configuraciones, PassThrough y combinarla con la activación de diferentes filtros.

Usar filtros para configurar PageSpeed en WordPress

Usemos la configuración que usemos, es posible activar y desactivar filtros a nuestro gusto para comprobar cual es la configuración que mejor funciona en nuestra página web.

Para activar un filtro en el módulo, usaremos:

pagespeed EnableFilters combine_css,extend_cache,rewrite_images

En esta instrucción podemos combinar y añadir tantos filtros como queramos separados por comas.

También se pueden añadir línea por línea, no hay límites en la cantidad de instrucciones EnableFilters que podemos usar.

pagespeed EnableFilters combine_css

pagespeed EnableFilters extend_cache

pagespeed EnableFilters rewrite_images

Para desactivar filtros la instrucción es muy similar. Si en vez de añadir los filtros anteriores queremos desactivarlos usaremos:

pagespeed DisableFilters combine_css,extend_cache,rewrite_images

Como en la activación, por supuesto, podemos añadir los filtros que queramos separados por comas o las instrucciones una a una, de nuevo, sin límite.

 

Ahora bien, ¿qué filtros son los mejores para configurar PageSpeed en WordPress?.

Nuestra recomendación es activar los CoreFilters e ir probando con los demás, para comprobar que la integridad de tu sitio web no se ve afectada por ninguno de los filtros. Si esto llegara a suceder, no te preocupes, porque volver al estado anterior es tan fácil como desactivar el filtro.

A continuación te dejamos una tabla con los filtros que nosotros hemos comprobado que mejor funcionan.

 

Filtros recomendados

Filtro Incluido en

CoreFilters

Incluido en

OptimizeForBandwidth

Descripción

responsive_images
No No Convierte las imágenes en responsive.
add_head Si No Añade <head> si no se encuentra.
outline_css No No Externaliza los .css en un archivo cacheable.
outline_javascript No No Externaliza los .js en un archivo cacheable.
combine_css Si No Combina elementos css en uno.
rewrite_css Si Si Sobrescribe los CSS para eliminar el exceso de comentarios o espacios.
flatten_css_imports Si No CSS en línea sobreescribiendo reglas @import.
rewrite_javascript Si Si Sobrescribe los JS para eliminar el exceso de comentarios o espacios.
combine_javascript Si No Combina los elementos JS en uno.
inline_css Si No Incluye los archivos css de menor tamaño en el documento HTML.
inline_javascript Si No Incluye los archivos css de menor tamaño en el documento HTML.
rewrite_images Si No Optimiza las imágenes.

convert_jpeg_to_progressive
Si Si Convierte las imágenes en formatos JPEG pesados a progresivos.

convert_png_to_jpeg
Si Si Convierte las imágenes PNG a JPEG para comprimirlas.

convert_jpeg_to_webp
Si Si Convierte las imágenes JPEG a WEBP.
resize_images Si No Redimensiona las imágenes al tamaño indicado por las etiquetas <width> y <height>
remove_comments No No Elimina los comentarios en el HTML
collapse_whitespace No No Elimina los espacios sobrantes.
extend_cache Si No Extiende el tiempo de caché de todos los archivos.
extend_cache_css Si No Extiende el tiempo de caché de los archivos css.
extend_cache_images Si No Extiende el tiempo de caché de las imñagenes.
extend_cache_scripts Si No Extiende el tiempo de caché de los archivos js.
extend_cache_pdfs No No Extiende el tiempo de caché de los archivos pdf.
lazyload_images No No Carga las imágenes a medida que el usuario va viéndolas. Ahorra carga de inicio.
in_place_optimize_for_browser No Si Optimiza archivos para el navegador utilizado.

Si después de leer todo esto, crees que es necesario implementar el módulo PageSpeed en tu sitio web, pero no estás familiarizado con el posicionamiento web, contacta con nosotros. Te asesoraremos sin ningún tipo de compromiso. Nuestro equipo de profesionales siempre estará dispuesto para echarte una mano.