miércoles, 7 de octubre de 2020

5 pasos para optimizar la rapidez de carga de tu sitio web [WORDPRESS]

5 pasos para optimizar la rapidez de carga de tu sitio web [WORDPRESS]


Queridos lectores me he perdido unos días, resulta que he estado full trabajando y entre los proyectos que estoy desarrollando es un sitio web sobre una empresa de energía renovable en Ecuador, Generarenovables.

Necesitaba mejorar la velocidad de carga del sitio, la rapidez de carga es indispensable optimizar por experiencia de usuario, UX, aparte que es muy tomada en cuenta por los buscadores a la hora de mostrar el posicionamiento.

Te dejo los pasos que deberías hacer a la hora de optimizar tu sitio si está hecho en WORDPRESS. 

1. MEDIR

Lo primero es hacer un diagnostico para saber la situación inicial de tu sitio web, hay varias herramientas que te permiten realizar esto sin embargo a mi me gusta mucho GTMETRIX. muy sencilla de usar solo deberás ingresar la URL de tu sitio web en la barra que aparece en el home, y luego de que la herramienta escanea tu sitio te dará un diagnostico de velocidad de carga y un desglose de los factores a mejorar. 

Las medidas son como las calificaciones de Estados Unidos, siendo A excelente y F pésima.

Este fue el diagnostico previo los arreglos al sitio:

1. MEDIR Lo primero es hacer un diagnostico para saber la situación inicial de tu sitio web, hay varias herramientas que te permiten realizar esto sin embargo a mi me gusta mucho GTMETRIX. muy sencilla de usar solo deberás ingresar la URL de tu sitio web en la barra que aparece en el home, y luego de que la herramienta escanea tu sitio te dará un diagnostico de velocidad de carga y un desglose de los factores a mejorar.   Las medidas son como las calificaciones de Estados Unidos, siendo A excelente y F pésima.  Este fue el diagnostico previo los arreglos al sitio:



2. OPTIMIZAR LAS IMAGENES

Uno de los factores más comunes que ralentizan tu sitio es el tamaño de las imágenes. Recuerda que la resolución de las imágenes recomendada para digital es de 72 DPI. Lo ideal sería optimizar el peso de tus imágenes antes de subirlas a tu sitio web utilizando herramientas como TINI JPG.  Pero si ya estan en tu sitio el Plugin OPTIMIZADOR.IO , es gratuito muy fácil de usar. Lo único que tienes que hacer es instalarlo, activarlo y dar clic en el botón optimizar imágenes, el resto lo hará de manera progresiva el plugin. 

Uno de los factores más comunes que ralentizan tu sitio es el tamaño de las imágenes. Recuerda que la resolución de las imágenes recomendada para digital es de 72 DPI. Lo ideal sería optimizar el peso de tus imágenes antes de subirlas a tu sitio web utilizando herramientas como TINI JPG.  Pero si ya estan en tu sitio el Plugin OPTIMIZADOR.IO , es gratuito muy fácil de usar. Lo único que tienes que hacer es instalarlo, activarlo y dar clic en el botón optimizar imágenes, el resto lo hará de manera progresiva el plugin.


3. ACTIVAR EL CACHE

Esta solución es ideal y recomendada sobre todo para sitios web con mucho tráfico. Cuando un sitio web carga tiene que pasar por una serie de procesos: interpretar el el PHP, estilos CSS, generar HTMLs, lo cual implica varias consultas a la base de datos. Cuando activas el cache de tu sitio web se genera una vista previa del sitio web guardada que tratas de cargar. La desventaja es que si hay cambios en tu sitio web es probable que no se muestren de manera instantánea. En este aspecto me ayudo el Ing. Christian Tenemaza, que junto con su socio el Ing. Byron Toro de la empresa TMZSOLUTIONS,  instalando en el sitio el plug in WP ROCKET, que no solo sirve para activar el  cache de tu sitio web, sino también optimiza los contenidos estáticos y la base de datos.

Activar el cache Esta solución es ideal y recomendada sobre todo para sitios web con mucho tráfico. Cuando un sitio web carga tiene que pasar por una serie de procesos: interpretar el el PHP, estilos CSS, generar HTMLs, lo cual implica varias consultas a la base de datos. Cuando activas el cache de tu sitio web se genera una vista previa del sitio web guardada que tratas de cargar. La desventaja es que si hay cambios en tu sitio web es probable que no se muestren de manera instantánea. En este aspecto me ayudo el Ing. Christian Tenemaza, que juntos con su socio el Ing. Byron Toro de la empresa TMZSOLUTIONS,  instalando en el sitio el plug in WP ROCKET, que no solo sirve para activar el  cache de tu sitio web, sino también optimiza los contenidos estáticos y la base de datos.


4. LAZY LOAD

Esta técnica es super importante sobre todo cuando tu sitio tiene muchos recursos multimedia como imágenes, vídeos, audios, etc. Consiste en cargar estos recursos cuando sean requeridos para mostrarse en la pantalla, no antes. Para obtener esta función en tu sitio yo utilizo el plug in A3 LAZY LOAD, este lo que hace es hacer una carga diferida de las imágenes y recursos multimedia de acuerdo a como se vayan necesitan, es realmente fantástico para la experiencia de usuario en móvil.

Lazy Load Esta técnica es super importante sobre todo cuando tu sitio tiene muchos recursos multimedia como imágenes, vídeos, audios, etc. Consiste en cargar estos recursos cuando sean requeridos para mostrarse en la pantalla, no antes. Para obtener esta función en tu sitio yo utilizo el plug in A3 LAZY LOAD, este lo que hace es hacer una carga diferida de las imágenes y recursos multimedia de acuerdo a como se vayan necesitan, es realmente fantástico para la experiencia de usuario en móvil.


5. OPTIMIZAR LA CARGA DE CSS Y JAVASCRIPT

Los archivos de JAVASCRIPT sirven para agregar funciones a nuestro sitio web, mientras que los CSS son las hojas de estilo que le dan la apariencia visual a nuestro sitio web. Mientras más complejo sea tu sitio es probable que se comienzo a volver más lento para su carga. El plugin que he probado para esta función es AUTOPTIMIZE,  una vez que lo hayas instalado y activado podrás optimizar el CSS, JAVASCRIPT,  HTML y optimizar la carga de fuentes con solo seleccionar en las opciones que te brinda la herramienta. 


5. OPTIMIZAR LA CARGA DE CSS Y JAVASCRIPT Los archivos de JAVASCRIPT sirven para agregar funciones a nuestro sitio web, mientras que los CSS son las hojas de estilo que le dan la apariencia visual a nuestro sitio web. Mientras más complejo sea tu sitio es probable que se comienzo a volver más lento para su carga. El plugin que he probado para esta función es AUTOPTIMIZE,  una vez que lo hayas instalado y activado podrás optimizar el CSS, JAVASCRIPT,  HTML y optimizar la carga de fuentes con solo seleccionar en las opciones que te brinda la herramienta.



Usualmente con estos pasos es suficiente para que tu sitio web quede con una carga optima como te muestro en el cuadro de diagnostico a continuación. 

Usualmente con estos pasos es suficiente para que tu sitio web quede con una carga optima como te muestro en el cuadro de diagnostico a continuación.


Sin embargo es probable que en ciertos casos tengas que meter mano en el archivo .htaccess para ciertas
funciones como compresión de archivos y habilitar el cache. Para esto puedes usar los enlaces que te brinda GTMETRIX para ir corrigiendo cada apartado, pero CUIDADO, esto debería hacerlo una persona que conozca bien del tema para evitar dañar tu sitio web.


Espero que siguiendo estos pasos tu sitio web tenga una carga tan veloz como el chita. 



¡Nos vemos pronto! 

No hay comentarios.:

Publicar un comentario

Déjame tu comentario o consulta.