Cómo obtener 100/100 en Google PageSpeed Insights con un sitio de WordPress y el constructor de páginas Elementor
Quería comprobar si es posible obtener una puntuación perfecta de 100/100 en Google PageSpeed Insights con un sitio web creado con WordPress, el constructor de páginas Elementor y el tema Astra.
Decidí crear mi propio sitio web https://davidloor.com/ utilizando WordPress con Elementor y siguiendo las recomendaciones que describiré a continuación, mi sitio web está obteniendo 100/100 como se puede ver en la siguiente captura de pantalla.
Esta guía asume que ya tienes un sitio de WordPress en funcionamiento.
Crear una cuenta gratuita en Cloudflare
"Cloudflare es una de las redes más grandes que operan en Internet. Las personas utilizan los servicios de Cloudflare para aumentar la seguridad y el rendimiento de sus sitios web y servicios." Tiene una versión gratuita que es la que estoy utilizando para mi sitio web.
Puedes crear una cuenta gratuita desde aquí: https://dash.cloudflare.com/sign-up
Para más detalles sobre Cloudflare, puedes visitar su propia documentación en https://www.cloudflare.com/learning/what-is-cloudflare/
Una vez que hayas completado el registro de la cuenta, ve a https://dash.cloudflare.com/profile/api-tokens, en la Clave API Global, haz clic en Ver, introduce tu contraseña y copia la Clave que utilizaremos en los siguientes pasos.
Instalar plugins gratuitos de WordPress
Necesitamos instalar dos plugins en nuestro sitio de WordPress. Si no sabes cómo instalar un plugin en WordPress, por favor visita este enlace y obtén los conocimientos.
1. Autoptimize
El plugin se puede descargar desde este enlace.
En esta página, https://TU-SITIO/wp-admin/options-general.php?page=autoptimize habilita todas las opciones, pero mantén las siguientes deshabilitadas:
- ¿Optimizar también para editores/administradores conectados?
- ¿Conservar comentarios HTML?
En esta página, https://TU-SITIO/wp-admin/options-general.php?page=autoptimize_imgopt habilita todas las opciones.
En esta página, https://TU-SITIO/wp-admin/options-general.php?page=autoptimize_extra habilita todas las casillas de verificación y, si no estás utilizando Google Fonts, selecciona la opción Eliminar Google Fonts y haz clic en guardar.
2. WP Cloudflare Super Page Cache
El plugin se puede descargar desde este enlace.
En esta página, http://TU-SITIO/wp-admin/options-general.php?page=wp-cloudflare-super-page-cache-index
introduce el correo electrónico que utilizaste para crear la cuenta de Cloudflare y la clave API que obtuviste como se explicó anteriormente.
En esta página, https://TU-SITIO/wp-admin/options-general.php?page=wp-cloudflare-super-page-cache-index
asegúrate de que la opción Habilitar caché de página de reserva esté activada, para que en caso de que la página no se pueda almacenar en caché en Cloudflare, se pueda utilizar la caché del disco.
3. Deshabilitar las fuentes predeterminadas del tema Astra y del plugin Elementor
Coloca los siguientes filtros en el archivo functions.php de tu tema.
/**
* Deshabilitar fuentes predeterminadas de Astra.
*/
add_filter( 'astra_enable_default_fonts', '__return_false' );
/**
* Deshabilitar Google Fonts de Astra.
*/
add_filter('astra_google_fonts_selected', function($fonts) {
return [];
});
/**
* Deshabilitar Google Fonts de Elementor.
*/
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
Actualización del 02/12/2022
Cambié del tema Astra al tema Hello Elementor, https://elementor.com/hello-theme/, y eso ayudó a obtener 100/100 también en móvil.