En este tutorial, te mostraré cómo optimizar GeneratePress de manera gratuita pero también con opciones de pago si quieres optimizar aún más tu sitio web.
Estoy usando GeneratePress con el plugin Premium en todo este proceso de optimización. Es lo único que tendrás que pagar para poder seguir este tutorial. Por supuesto con la versión gratuita de GeneratePress podrás implementar algunas técnicas que te presentaré, pero no podrás seguir todo el proceso.
Si quieres saber más, puedes leer mi guía sobre GeneratePress y el plugin Premium.
Si eres un visitante habitual de mi página web, sabes que he estado escribiendo muchos tutoriales de GeneratePress en mi blog. Me encanta GeneratePress y he estado usando GP Premium en otros sitios web también.
Y aunque GP es el tema de WordPress más rápido que existe, todavía necesitas implementar algunas técnicas para mantener un sitio web optimizado. Sigue los pasos leyendo este tutorial e implementa mi estrategia en tu sitio web para optimizar tu GeneratePress.
Prueba de la optimización de GeneratePress
Tom Usborne, el fundador y principal desarrollador de GeneratePress ha creado un subdominio speedtest.generatepress.com para comprobar la velocidad del tema básico de GP.
Los resultados con GTmetrix y Google PageSpeed Insights son perfectos.
Puedes ver hasta qué nivel el tema de GeneratePress está optimizado. Creo que es el tema de WordPress más optimizado y rápido del mercado.
Por mi lado, los resultados de Kinese Marketing en GTmetrix y PageSpeed Insights son también impresionantes.
En GTmetrix tengo 100% para el rendimiento y 96% para la estructura. Con un peso siempre por debajo de 1MB y un tiempo de carga de menos de 1 segundo. Tomé una URL de ejemplo:
Los 4% que me faltan para la estructura son por la mayoria culpa de no tener un CDN y solicitudes a terceros.
También en Google PageSpeed Insight tengo un excelente resultado de 96/100 para el computador y para el móvil siempre estoy por encima de 80.
Pero ¿por qué en Google PageSpeed Insights la velocidad es un poco más lenta? Bueno, es muy simple.
Para esta página web, utilizo Webempresa como hosting, y plugins gratuitos para la optimización y he alcanzado el máximo posible sin utilizar un plugin de caché pagado o un CDN.
Las pruebas en GTmetrix se realizan con los servidores basados en Londres ya que Webempresa tiene sus servidores en Europa. Si realizo las pruebas con los servidores en São Paulo para Sudamérica, el tiempo de carga será menor a 3 segundos, lo cual es muy bueno también. La única solución para bajar este tiempo sería comprar un servicio de CDN.
Supongo que has entendido por qué ahora. La herramienta de Google hace sus pruebas desde Estados Unidos, pero no tengo CDN y por eso el tiempo de respuesta (TTFB) es un poco más lento y la nota es un poco más baja especialmente para los móviles. No te preocupes, más adelante voy a explicar qué es un CDN.
El tiempo al primer byte (Time to first byte – TTFB) es una métrica para determinar el tiempo de respuesta de un servidor web. Mide el tiempo que transcurre entre la solicitud de una conexión con el servidor y la descarga del contenido de una página web.
Antes de empezar, siempre trata de usar menos plugin. Menos plugin significa menos código y menos código te ayuda a tener una carga rápida y un sitio libre de errores. Siempre trato de evitar los plugins inútiles, pero hay varios que voy a enumerar y que nos ayudan a conseguir un excelente rendimiento. Pero es mejor tener 20 plugins bien codificados que 7 malos.
Optimizar GeneratePress con plugins de optimización y caché
Estos plugins que vamos a ver son la base para empezar a optimizar GeneratePress. Son los que tendrán la mayor influencia.
Estoy usando el plugin Autoptimize como lo recomienda GeneratePress. Pero también, he añadido Async JavaScript que es del mismo equipo de desarrolladores.
A continuación, puedes ver mis ajustes. En Opciones de JavaScript, marqué las 3 primeras casillas y el resto lo dejé vacío.
Hice la misma cosa para Opciones de CSS.
En Opciones de HTML, marca la primera casilla.
Para Otras opciones marqué todo excepto la tercera opción.
En la pantalla Extra, marqué la casilla para Eliminar las Google Fonts. ¡Ojo! Haz este solamente si no usas Google Fonts desde los servidores de Google. Eso lo veremos a continuación.
Y por fin Eliminar los emojis.
En cuanto a Async Javascript, eso es muy simple haz clic en Aplicar Async para que el método sea Async. Pero puedes tratar Defer para ver si funciona mejor con tu página web.
Además de Autoptimize necesitas un plugin de caché. Después de probar varios plugins, uso WP Fastest Cache. Aquí mi configuración.
No es necesario minimizar y combinar el CSS y JavaScript con este plugin porque eso lo hacemos con Autoptimize que es mejor. Puedes probar otros plugins de caché para ver si funciona mejor con tu página web.
Ahora terminamos la configuración gratuita.
Si quieres usar 1 solo plugin para reemplazar los 3 que acabamos de ver, puedes utilizar WP Rocket el mejor plugin de caché y optimización que existe. Pero es un plugin de pago entonces dependerá de tu presupuesto.
WP Rocket ayuda mucho a conseguir un mejor rendimiento y una mayor puntuación en Google PageSpeed Insights, GTmetrix y Pingdom. Y además te permite tener solamente 1 plugin en lugar de algunos.
Proveedor de hosting para el rendimiento
El alojamiento Web es la principal razón de la velocidad de un sitio. Estoy usando un hosting especializado para WordPress en Webempresa y el Time To First Byte es muy bueno.
Después de investigar y comparar me pareció ser el mejor, cumple todas sus promesas y tiene un excelente soporte técnico.
Content Delivery Network – CDN
Un Content Delivery Network (CDN) son servidores distribuidos geográficamente que ayudan el rendimiento de tu página web almacenando en caché los recursos como archivos HTML, imágenes, vídeos, JavaScript, Stylesheet, etc. Y entregando estos recursos desde el servidor más cercano de la ubicación del usuario.
Recuerdas por qué mi PageSpeed Insights era inferior a GTmetrix, una de las cosas era por la ubicación del servidor. Por eso en este caso necesitas un CDN y mejorar el Time To First Byte.
Tener un CDN es adecuado si tienes como objetivo de distribuir tu sitio en todo el mundo, pero si tu sitio web es local (ciudad o país), puede que quieras tomar un hosting que tenga sus servidores cerca de ti. Y así no necesitarás un CDN.
Probé la versión gratuita de CloudFlare pero no alcanzó mis expectativas así que buscaré un servicio de pago.
Si quieres un dato, te podría interesar BunnyCDN y te aconsejo echar un vistazo para que puedas tener tu propia opinión. Es uno de los más baratos y rápidos proveedores de CDN para optimizar una página web.
Optimizar GeneratePress con las imágenes
La optimización de tus imágenes reducirá el peso total de tu página y eso, obviamente, ayuda a la velocidad.
Para lograr eso, primero uso el sitio web TinyPNG para ahorrar el tamaño de cada archivo. Y luego, una vez que he subido las imágenes en WordPress las optimizo de nuevo con el plugin Imagify para obtener el formato .webp para la imagen principal y también para las miniaturas que uso en todo el sitio web.
Imagify es un servicio lanzado por el equipo de WP Rocket. He tratado otros plugins como ShortPixel, por ejemplo, pero prefiero Imagify.
El peso de una imagen es sólo una parte del SEO para las imágenes.
Alojar en local las fuentes de Google Fonts para optimizar GeneratePress
Es una técnica en la que no todos piensan para optimizar GeneratePress o cualquier tema de WordPress. Y sin embargo contribuye mucho a bajar las solicitudes externas y el tiempo de carga.
Hay 2 maneras de optimizar la tipografía. Ya sea usando las fuentes del sistema, o agregando la tipografía de Google Fonts localmente en tu WordPress.
Cuando usas las tipografías de Google Fonts en tu sitio web, vienen desde el servidor de Google cada vez, así que siempre hay solicitudes adicionales desde fonts.gstatic.com y fonts.googleapis.com.
Para solucionar este problema, puedes alojar las fuentes de Google localmente para que se puedan solicitar desde tu servidor o CDN.
Así que en primer lugar para optimizar la tipografía puedes seguir mi tutorial completo para alojar las fuentes de Google Fonts localmente. Y luego para mejorar la experiencia del usuario también puedes precargar tu tipografía para que aparezca primero.
Pero si quieres optimizar completamente tu sitio web de GeneratePress, puedes volver a las fuentes del sistema que no necesitan ninguna solicitud.
Optimizar Google Analytics
Por la mayoría de nosotros, utilizamos el código de seguimiento de Google Analytics en nuestro sitio para rastrear a los visitantes.
Cuando se prueba el sitio en GTmetrix, se ve Leverage Browser Caching para Google Tag Manager y Google Analytics.
Hay hasta 3 solicitudes adicionales y para arreglar el caché del navegador puedes alojar Google Analytics localmente. La optimización de Google Analytics ayuda mucho a mejorar la velocidad de un sitio web de WordPress.
Para hacerlo puedes usar un plugin como CAOS. Es realmente simple, sólo necesitas tu código Universal Analytics UA-XXXX-X.
Y mediante este plugin, ahora solo tendrás 1 solicitud y con un peso muy bajo como puedes ver en la imagen.
Y de nuevo, existe esta opción con el plugin WPRocket.
Lazy Load para los medios
Desde WordPress 5.5 la carga diferida (lazy loading) es nativa para las imágenes. Es decir que no necesitas más un plugin para hacerlo.
Sin embargo, puede que todavía tengas que cargar vídeo. Si es necesario, entonces tendrás que descargar un plugin.
Puedes usar el plugin WP YouTube Lyte o a3 Lazy Load para diferir la carga de videos en tu sitio.
O si estás usando el plugin de WP Rocket, ve a WP Rocket > Media > Enable for iframes and videos.
Botones para compartir en las redes sociales
Casi todas las páginas web usan botones para compartir después de cada publicación o página y yo también lo hago.
Algunos de los plugins son buenos, pero en la mayoría de los casos encontrarás un plugin que tiende a ralentizar una página WordPress por culpa de su peso o de una solicitud externa.
Uso Scriptless Social Sharing que es ligero y no tiene ninguna solicitud, pero puedes probar otro y comparar para ver si uno es mejor que el otro.
Tabla de contenidos para el SEO
Si buscas un plugin de tabla de contenidos para tu SEO, puedes encontrar muchos en el directorio de plugins de WordPress.
El mejor ahora es Joli Table Of Contents. Lo uso porque tiene un impacto mínimo en la velocidad de la página, no hay otra solicitud y es codificado especialmente para el SEO. Antes usaba LuckyWP Table of Contents pero parece que no hay más actualizaciones ahora.
Puedes aprender más sobre la importancia de una tabla de contenido para el SEO.
Conclusión
Siempre puedes mejorar tu sitio eliminando las extensiones inútiles, los fragmentos de código no utilizados, bajar el número de solicitudes al servidor y externas. Optimiza tus imágenes antes de subirlas. Elige el alojamiento adecuado y si necesario implementa un CDN.
Por defecto, GeneratePress es uno de los temas más rápidos y al implementar los consejos anteriores, puedes optimizarlo y hacerlo aún más rápido.
Si necesitas alguien para cuidar a la optimización de tu página web (o también administrar tu WordPress si te toma mucho tiempo), contáctame y hablamos de tu proyecto.
Espero que hayas encontrado útil este artículo y si te gustó no dudes en compartirlo en las redes sociales. Y si tienes alguna pregunta, pregúntame en los comentarios.
