Optimizando wordpress para gtmetrix pagespeed pingdom

Optimizando wordpress para Gtmetrix Pagespeed Pingdom

Optimizando wordpress para gtmetrix pagespeed pingdom Antes de adentrarte en darle una estĂ©tica elegante y hermosa a tu wordpress, debes ocuparte un rato en optimizarlo para los buscadores, principalmente, porque deseas que tu web aparezca entre las primeras cuando alguien haga una bĂºsqueda y si no realizas este proceso, tu pĂ¡gina irĂ¡ lenta y serĂ¡ penalizada, enviĂ¡ndola para posiciones mĂ¡s alejadas y si pasa de la sexta pĂ¡gina, le estarĂ¡ pasando, lo que se conoce como, su defunciĂ³n y entierro, de todas formas, las pĂ¡ginas nuevas no van a estar entre las primeras posiciones, hasta pasado un tiempo y va a ser asĂ­, aunque hagas todo bien desde el principio, esto se conoce como posicionamiento orgĂ¡nico y Google, Bing y otros, quieren que los usuarios cuenten con la mejor experiencia de navegaciĂ³n posible al visitar tu sitio web.

 

Para el anĂ¡lisis, veamos lo que aparece en la wikipedia acerca de optimizaciĂ³n para buscadores.

El posicionamiento en buscadoresoptimizaciĂ³n en motores de bĂºsqueda o SEO (del inglĂ©s search engine optimization), es un conjunto de acciones orientadas a mejorar el posicionamiento de un sitio web en la lista de resultados de GoogleBing, u otros buscadores de internet.1​ El SEO trabaja aspectos tĂ©cnicos como la optimizaciĂ³n de la estructura y los metadatos de una web, pero tambiĂ©n se aplica a nivel de contenidos, con el objetivo de volverlos mĂ¡s Ăºtiles y relevantes para los usuarios.

 

En general, son 3 los aspectos esenciales, para lograr ir mejorando en el ranking en internet, aunque por supuesto que hay muchos mĂ¡s..

El primero de ellos, hospedar tu web en un buen hosting considerando los que se encuentran ubicados en Centros de Datos (Datacenters) dispersos por todo el mundo, con todas las condiciones para mantener un servicio estable con presencia en lĂ­nea de mĂ¡s del 99 % del tiempo en un año, que cuenten con enlaces de telecomunicaciones de alta velocidad con conexiones de fibra Ă³ptica, que sus servidores cuenten con multiprocesadores de alta gama  y discos duros tipo sĂ³lidos (SSD) para que los tiempos de respuesta ante la peticiĂ³n de datos sea de solo unas pocas fracciones de segundo.

 

El segundo aspecto para lograr optimizar bien las pĂ¡ginas y que carguen rĂ¡pido y/o les interese mĂ¡s a los usuarios de internet, es lo que conocemos por SEO on page, que no es mĂ¡s que estructurar bien el contenido dentro de las pĂ¡ginas web, de forma tal, que los buscadores logren indexar bien los contenidos, catalogĂ¡ndolos segĂºn sus temĂ¡ticas, para cuando se realice una bĂºsqueda por algĂºn usuario en internet, la pĂ¡gina logre encontrarse entre las que cuentan con ese contenido y por tanto sea mostrada en los resultados de bĂºsqueda. Se basa en todo lo que puedas hacer dentro de las pĂ¡ginas con ese fin.

 

El tercer aspecto es el SEO off page, el cual se basa en ganar la notoriedad de la web desde afuera, sobre todo, desde otras web con temĂ¡ticas similares, las redes sociales, enlaces hacia pĂ¡ginas internas de tu web desde sitios con gran prestigio, todo lo cual va a ayudar a mejorar la posiciĂ³n en buscadores, porque van a notar que la web estĂ¡ siendo importante al ser reconocida por estos.

Optimizando wordpress para gtmetrix pagespeed pingdom

De las tĂ©cnicas para mejorar el posicionamiento en buscadores, volveremos a tratar al final de este artĂ­culo, pero ahora nos vamos a centrar en ganar en velocidad de carga de la web, y nada mejor que verlo en un ejemplo prĂ¡ctico, por lo que instalaremos un wordpress en su Ăºltima versiĂ³n, revisaremos la lista de ajustes de una instalaciĂ³n limpia y haremos una primera revisiĂ³n con los chequeadores gtmetrix, pagespeed insight y pingdom.

Tenga en cuenta:  Esta prĂ¡ctica no la puede realizar en la red local de su casa, porque requiere que la pĂ¡gina estĂ© visible para internet en un servidor de hosting, a no ser que cuente con una IP pĂºblica en su red.

El sitio para este ensayo es un dominio gratis que registrĂ© en freenom.com nombrado ecologicos.ga, el DNS de freenom, va a informar que ecologicos.ga es realmente ecologicos.inge.ec.estando este Ăºltimo hospedado en favolahosting.com, radicado en la ciudad de Guayaquil, Ecuador.   Vamos a comprobarlo con gtmetrix.com desde la ciudad de Vancouver, en CanadĂ¡ y con PageSpeed Insight https://developers.google.com/speed/pagespeed/insights/?hl=esu0026amp;url=

 

1.- Contar con un buen hosting donde hospedar la pĂ¡gina web, yo tengo al favolahosting, que es ni tan bueno ni tan malo y para lo que deseo demostrar aquĂ­ me funciona bien, si usted decide por los mĂ¡s recomendados, le va a resultar mejor aĂºn.

Ya hemos hecho la instalaciĂ³n bĂ¡sica de wordpress en el mencionado dominio, utilizando wordpress 5.2.

Una de las mejores herramientas para ganar en velocidad y comprimir los contenidos es sin lugar a dudas WP Rocket un plugin de pago, pero que resuelve casi todo lo que necesitamos hacer para mejorar el posicionamiento en buscadores.

WP Rocket - WordPress Caching Plugin

2.- Habilitar la compresiĂ³n del contenido en el hosting, aprovechando que el servidor cuenta con cPanel para gestionar las webs. Seleccionamos para que comprima todo el contenido

gzip_cpanel_hosting

Hacemos una primera prueba con Gtmetrix, para el tema por defecto que trae wordpress, que es Twenty Nineteen.

En el caso de Pagespeed Insights el resultado es 94 y 94, o sea, lo mismo para mĂ³vil que para PC.

3.- Seleccionar un tema que sea responsivo para que se adapte a telĂ©fonos mĂ³viles, tablets y PC de escritorios y se encuentre optimizado

Para este ensayo, vamos a utilizar un tema gratis, el cual cuenta tambiĂ©n con una versiĂ³n premium de pago a la que podrĂ¡ pasarse cuando necesite mĂ¡s opciones en su web:  Generatepress

generatepress_wordpress_theme

Y vamos a escribir algunos comandos que deben ir en el archivo .htaccess para que se active el Gzip para algunos tipos de archivos, comprimiendo asĂ­ los contenidos desde que comienza la carga del sitio web en el navegador, ademĂ¡s de los tiempos que debe mantenerse informaciĂ³n de las cookies en esos navegadores para que no se descarguen nuevamente algunas pĂ¡ginas, si no se han modificado, todo lo cual, ayuda a mejorar la velocidad de los visitantes que repiten.

Como wordpress es el CMS con plugins para todo, instalamos uno llamado Wpo Tweaks para que escriba todo eso en el archivo .htaccess. Esto se hace en Plugins/Añadir nuevo.

WpoTweaksHtaccess

Comprobamos nuevamente cuanto ha mejorado la velocidad de carga.

gtmetrix_ecologicos_ga

Efectivamente, la carga se hizo en menos tiempo, ademĂ¡s se comprimio el contenido de 93 K a 53K.

Para Pagespeed Insights la velocidad para mĂ³viles, con esta optimizaciĂ³n, llegĂ³ a 97, mientras para PC subiĂ³ a 95.

pagespeed_insights_ecologicos_ga

4.- Seguimos comprimiendo para otros contenidos y para asegurarnos que la compresiĂ³n se mantenga activada todo el tiempo, a pesar de que algĂºn plugin la quiera afectar.

Para esto instalamos el plugin Gzip Compression y lo activamos.  Hay que ir a la pĂ¡gina de configuraciĂ³n y ejecutarlo con el botĂ³n Enable Gzip Compression, si no lo hace de inmediato lo va a encontrar en Ajustes.

gzip_compression_ecologicos_ga enable_gzip_compression_ecologicos_ga

Con este plugin, logramos bajar la carga una dĂ©cima de segundo en gtmetrix 1,3 seg, pero en pagespeed para PC subiĂ³ desde 95 hasta 99.

5.- Pasar javascript a modo asĂ­ncrono.

En algunos casos, como en las pĂ¡ginas nichos del marketing de afiliados, necesitamos utilizar cĂ³digo javascript de terceros, para conectarnos a amazon, ebay, aliexpress y otros marketplaces, pero poco podemos hacer para optimizarlos, debido a que no tenemos acceso al cĂ³digo, pero si podemos aplicar algunas tĂ©cnicas para hacer que no detengan la carga de las pĂ¡ginas mientras se ejecutan, lo que se conoce como enviarlos al footer o que se carguen en modo asĂ­ncrono, esto significa que se irĂ¡n cargando a destiempo con respecto al resto del cĂ³digo y esto es de suma importancia, debido a que tanto google los demĂ¡s, nos penalizan si la experiencia de los usuarios, tiene que pasar por mostrarles una pĂ¡gina en blanco mientras se ejecuta el javascript.

Para evitar que los usuarios sufran esto, podemos instalar el plugin Async Javascript, activarlo y habilitarlo por lo menos con la primera opciĂ³n para que comience a funcionar y el harĂ¡ exactamente eso que les acabo de describir en el pĂ¡rrafo anterior. Si no lo hace de inmediato lo va a encontrar en Ajustes.

async_javascript_ecologicos_ga enable_async_javascript_ecologicos_ga

6.- Espaciar los tiempos en el heartbeat de wordpress.

En la versiĂ³n 3.6 de wordpress, se introdujo este script que se encarga de estar al tanto de cosas que ocurren en tiempo real, por ejemplo, 2 usuarios que chatean. conozcan si el otro estĂ¡ tecleando y muchas otras cosas mĂ¡s; aunque esto pueda verse como un gran avance, representa un consumo de recursos en tiempo real, que termina ralentizando nuestra web, es por lo que necesitamos que esta actividad, se realice en lapsos de tiempos mĂ¡s largos.

Una forma de solucionar esto, es instalando el plugin Heartbeat Control de WP Rocket y pasar esta actividad desde cada 15 segundos hasta cada 300 segundos. Si no lo hace de inmediato lo va a encontrar en Ajustes.

heartbeat_control_ecologicos_ga heartbeat_control_settings_ecologicos_ga

Haciendo esto, el gtmetrix mejora un 1 % y pagespeed se mantiene con los mismos resultados.

7.- Deshabilitar el CRON de nuestro sitio web.

En wordpress, existen un conjunto de scripts, que se ejecutan mediante un programador de tareas al estilo unix,  nombrado crontab, en este caso se conoce como CRON de linux y este toma los datos de fecha/hora del sistema anfitrion, para ejecutar cada cierto tiempo alguno de los scripts, como por ejemplo, revisar si el wordpress mismo. algĂºn tema o plugin, requiere de una actualizaciĂ³n nueva. El hecho es, que existen gran cantidad de scripts a ejecutar dentro de wp-cron-php y que estĂ¡n con una frecuencia demasiado contĂ­nua, siendo necesario desactivar este programador de tareas del modo automĂ¡tico y pasarlo a modo automĂ¡tico nuevamente, pero fuera del wordpress, o sea, asignĂ¡ndole esa tarea, al hosting, donde en cPanel, podemos encontrar un programador de tareas con el mismo nombre, por lo que vamos a ejecutar el archivo wp-cron.php de nuestro sitio, pero, a travĂ©s del servidor.

Primero debemos editar el archivo wp-config.php en nuestro servidor de hosting y colocar la siguiente lĂ­nea:

define(‘DISABLE_WP_CRON’, true);

Esta detendrĂ¡ el cron en la prĂ³xima carga del sitio por cualquiera que lo haga.

cron_ecologicos_ga cron_wp_task_ecologicos_ga

Los parĂ¡metros para añadir un nuevo trabajo al cron del hosting serĂ­an */15  lo cual significa, que lo haga cada 15 minutos, * para hora, dia, mes, dĂ­a de la semana, cuyo significado es todas las horas, todos los dĂ­as, todos los meses, todos los dĂ­as de la semana y finalmente la lĂ­nea de comando que se va a ejecutar:

/usr/bin/wget "http://ecologicos.inge.ec/wp-cron.php" -O=/dev/null 2>u0026amp;1

 

En este caso, estoy enviando el resultado al dispositivo nulo, debido a que no me interesa ver nada, pero si desea que cada vez que se ejecute el cron se cree un nuevo archivo y dentro guarde el resultado de cada script que se ejecutĂ³, puede crearlo modificando el parĂ¡metro de salida a -O=/home/usuario/salidadelcron.txt, pero tendrĂ¡ que supervisar y borrar cada cierto tiempo, los nuevos archivos, porque van a ser bastantes.

Habiendo hecho esto ganamos otro 1 % en gtmetrix y sube el pagespeed insights a 98 para mĂ³vil y mantiene 99 para PC.

8.- Aumentar la cantidad de memoria RAM del sitio web.

Del mismo modo que deshabilitamos el CRON, agregamos al archivo wp-config.php una nueva lĂ­nea, pero esta vez para que nuestro wordpress utilice 256 MB de la memoria del servidor, lo que harĂ¡ que pueda mantener mĂ¡s recursos en la memoria volatil aleatoria, disminuyendo asĂ­, la cantidad de peticiones que tendrĂ¡ que hacer al disco duro, para ello, agregamos la siguiente lĂ­nea:

define(‘WP_MEMORY_LIMIT’, ‘256M’);

Yo he podido comprobar, que en algunos hosting, asignan hasta 40 MB por defecto, lo que hace que el wordpress trabaje muy restringido y que plugins como elementor que necesitan un mĂ­nimo de 128 MB de RAM, no se puedan ejecutar.

Solo le aconsejo, que si su proveedor no le puede garantizar un mĂ­numo de 256 MB de RAM para cada pĂ¡gina que tenga, se cambie para otro.

 

9.- Deshabilitar o disminuir, la cantidad de posts a revisar.

Si tu pĂ¡gina no es un blog, puedes deshabilitar totalmente la revisiĂ³n de posts agregando la siguiente lĂ­nea al mismo archivo wp-config.php:

define(‘WP_POST_REVISIONS’, false);

Pero si tienes un blog y posteas a cada rato, por lo menos debes disminuir la actividad de revisiones del servidor modificando este parĂ¡metro a un nĂºmero razonable, segĂºn la frecuencia con la que revisas lo que tus lectores opinan.

define(‘WP_POST_REVISIONS’, 3);

Ahora el encabezado del archivo wp-config.php lucirĂ¡ asĂ­:

wpconfig_file_ecologicos_ga

10.- Cachear las pĂ¡ginas y los archivos estĂ¡ticos.

Debemos continuar aprovechando los 256 MB de RAM que le asignamos al sitio web y una buena manera, es haciendo que las pĂ¡ginas que tienen visitas contĂ­nuamente, se mantengan cargadas en memoria, de este modo, cuando llegue una peticiĂ³n, no habrĂ¡ que ir al disco duro a buscar nada y por ende las respuestas serĂ¡n mĂ¡s rĂ¡pidas; si tienes los mecanismos de cacheo bien configurados, estos tendrĂ¡n cuenta los archivos estĂ¡ticos, tales como cĂ³digos javascript, css y otros, de los cuales hacen una copia y los ubican directamente en las carpetas de recursos de chacheo, asĂ­ cuando son solicitados, los ejecutan inmediatamente.

Para realizar esta tarea, vamos a instalar uno de los tantos plugins buenos para cacheo que existen y que me ha dado buenos resultados para esta combinaciĂ³n de plugins y configuraciones que he probado una vez tras otra desde hace varios años, y no es otro que Pagespeed Ninja.  Debes instalarlo, activarlo y configurarlo desde la pestaña avanzado, activando HTTP/2 Server Push, Support badge, Remote critical CSS generation y seleccionando el modo Optimal.

pagespeed_ninja_ecologicos_ga pagespeed_ninja_settings_ecologicos_ga

Una vez terminado este paso, los resultados son los siguientes:  gtmetrix 99 y 97 de optimizaciĂ³n y pagespeed insights 100 y 100.

Como podrĂ¡s notar, el contenido se ha comprimido a menos de la mitad y la pĂ¡gina solo necesita un segundo para cargar.

 

gtmetrix_pagesspeed_ninja pagespeed_insights_optimized_ecologicos_ga

11.- Cacheando scripts de terceros.

Si tienes una pĂ¡gina con scripts de terceros, que te ralentizan la carga, debes instalar un script como Cache External Scripts y subirĂ¡s a la memoria RAM las sesiones del Google Analytics, mejorando la velocidad de carga.

Con este scripts logras que la pĂ¡gina cargue en 0,9 segundos.

Optimizando wordpress para gtmetrix pagespeed pingdom

Llegado a este punto, debemos tener en cuenta algunas cosas, para no creer que todo estĂ¡ resuelto y que siempre va a ser posible estos resultados:

  • Como mencionĂ© al principio, este no es uno de los hosting soñados, de lo contrario, hubieramos llegado al 100 con 100 mucho antes, debido a que en esos muchas optimizaciones las realiza el servidor.
  • He realizado estos ensayos en una pĂ¡gina cuyo contenido es mĂ­nimo, sin scripts externos de terceros, sin imĂ¡genes y sin vĂ­deos.
  • La pĂ¡gina tampoco cuenta con contenido dinĂ¡mico como carruseles, galerĂ­as de imĂ¡genes, noticias y otros que requieren accesos externos.
  • No tienes que pretender mantener un 100 con 100 y buscar a toda costa ese objetivo, pues si continĂºas agregando tĂ©cnicas, algunas cosas van a dejar de funcionar como deben y mientras mĂ¡s plugins mĂ¡s lento irĂ¡ el sitio web, en todo caso, el tiempo de carga, tiene mayor importancia que las calificaciones.
  • Debes proponerte por ejemplo: que si tienes un blog, este cargue en alrededor de 2 segundos y si tienes pĂ¡ginas nicho de afiliados o de comercio electrĂ³nico, que estas carguen en alrededor de los 4 segundos.
  • No puedes preocuparte solo por instalar plugins de optimizaciĂ³n debido a que tambiĂ©n vas a necesitar los que te van a ayudar con los contenidos y las funcionalidades del sitio y entre todos no deberĂ­as excederte de los 35 como mĂ¡ximo, y si sobrepasas esta cifra, casi seguro tendrĂ¡s mĂ¡s de un plugin que hacen lo mismo.
  • No te pongas a hacer ensayos instalando y desinstalando plugin y luego uses ese mismo sitio para una web real de producciĂ³n, mejor haces todos los ensayos y cuando tengas los plugins que consideres son los mejores has una nueva instalaciĂ³n limpia para un sitio de producciĂ³n.
  • La combinaciĂ³n de plugins que vas a necesitar para optimizar un tema de wordpress en concreto, no tiene por quĂ© ser esta misma.
  • No conocemos bien las razones, pero algunos plugins que mejoran los resultados en gtmetrix, los empeoran en pagespeed insights y viceversa.

AĂºn con los aspectos antes mencionados, cabe mencionar, que ha medida que se vaya llenando el sitio de contenido, estos plugins comenzarĂ¡n a trabajar en la optimizaciĂ³n de los nuevos contenidos, de todas formas, vamos a ver a continuaciĂ³n otros plugins que serĂ¡n necesarios, si los tiempos de carga comienzan a deteriorarse.

Yo tengo pĂ¡ginas nicho, como http://midiaenlamoda.com y http://comprauncelular.com cuyos tiempos, para mi consideraciĂ³n son los correctos para la cantidad de tareas que tienen que realizar, antes de cargar completamente y no voy a dañar su funcionalidad, con tal de reducir los tiempos de carga.

Optimizando wordpress para gtmetrix pagespeed pingdom

Hago una lista rĂ¡pida de estos con sus funciones, pues el proceso serĂ­a parecido para la instalaciĂ³n, activaciĂ³n y configuraciĂ³n.

  1. Autoptimize es un buen plugin para optimizar y minificar el contenido de archivos js, css, html, el cual no usĂ© en esta configuraciĂ³n porque realizarĂ­a tareas similares a otros.
  2. Smush instĂ¡lalo de inmediato, en cuanto vayas a comenzar a cargar imĂ¡genes en la biblioteca de medios.
  3. WP-Optimize también lo vas a necesitar para limpiar por lo menos una vez al mes la base de datos de wordpress.
  4. Lazy load by WP Rocket provoca que las imĂ¡genes se vean solo cuando el usuario llega a ese punto en la pĂ¡gina, entonces es que se carga.
  5. Accelerated Mobile Pages si el tema que escoges para tu web no viene optimizado para mĂ³viles, considera utilizar el AMP de Google para este fin.
  6. CAOS for Analytics es de los desarrolladores de Google y en cuanto lo instalas, mejoran los resultados de Pagespeed Insights
  7. Reduce Bounce Rate evita que Google Analytics, te cuente tantos usuarios que llegan al sitio y no les interesa nada y cierran la pĂ¡gina, lo que se considera un rebote y una mala experiencia del usuario, por lo que le baja el ranking a tu sitio.

Otras optimizaciones que deberĂ¡ tener en cuenta:

El mejor lugar para saber todo lo que debes hacer para mejorar el posicionamiento de tu pĂ¡gina, es la guĂ­a del propio Google, cuyos algoritmos ellos cambian mĂ¡s a menudo de lo que puedes imaginar, por lo que para mantener tu pĂ¡gina entre las primeras, tendrĂ¡s que ser constante y sobre todo, ocuparte de mantener actualizados los contenidos de tus pĂ¡ginas, brindando informaciones de calidad, que mantengan a tus lectores interesados.

GuĂ­a de optimizaciĂ³n de Google.

 

Optimizando wordpress para gtmetrix pagespeed pingdom

 

http://seguimosganando.com