Mejorar Velocidad de carga de tu página

Entre las formas de mejorar la velocidad de carga del sitio web también conocido como page speed optimization, además de cambiar el formato de la página web, estan los códigos que puedes editar en el código de tu sitio web.

Estan Asyn y Defer, los cuales principalmente se usan para el código javascript

Este código lo agregas a las etiquedas <script > </script> de tu sitio web, de esta forma tu cargara más rápido tu página web

me extendere mas en detalle con estos dos códigos

Al terminar este post, lo que puedo hacer es linkearlo con al siguiente post de abajo

La siguiente seccion podria crearlo como un nuevo articulo, ya que optimiza una parte de la pagina que mucha gente se pregunta en como hacerlo….. LCP mejora de carga en el servidor

Mejorar la velocidad de Carga del LCP

Pero a lo que quería llegar es que existen mas códigos, para optimizar las imágenes y los CSS

binen una de ellas es rel=”preload”

Este código lo que hace es cargar la imagen o CSS primero, lo hace es indicarle al servidor que cargue ese contenido primero.

este es un ejemplo del código

<link rel=”preload” href=”/images/large/london.jpg” as=”image”>

Como ves aquí indicamos que encuentre primero la imagen longon.jpg, para que lo cargue rápidamente.

Si por ejemplo tienes una imagen muy grande en tu home page hacer esto mejorara la velocidad de carga.

Ahora este codigo lo debes escribir dentro del <head></head>

Y como indique este codigo tambien lo puedes usar para acelerar la carga de un archivo .css, solo que ahora no tengo un ejemplo para mostrarte, pero es indicar la ruta del archivo .css y listo.

Este codigo puede usarse para

imagenes

css

videos

fonts

No uses preload en muchos archivos, porque puede que el navegador se atasque y no cargue tu pagina de forma correcta y demore en la carga

Solamente usalo en contenido que es extremadamente importante

Ahora bien el segundo código que puedes usar es

fetchpriority=”high”

este es un ejemplo del codigo

<link fetchpriority=”high” rel=”preload” href=”/images/large/london.jpg” >

Ahora si te das cuenta estamos usando ambos codigos, lo cual es mejor ya que optimiza mucho mas la carga, pero en caso veas algun error en tu codigo, tan solo usa uno de ellos.

Ahora sobre async, hay otras alternativas para este codigo, podrias usar

decoding=sync

Segun he leido este codigo de es mucho mejor que async, es decir mejora la velocidad de carga aun mas

Este es un ejemplo del codigo

<img src=lpc.jpg alt decoding=sync >

Como optimizar cada imagen

Lo importante aqui es bajar la cantidad de bytes de la imagen y una herramienta que lo hace por ti es

squoosh

Aqui lo que tienes que hacer es subir las imagenes de tu sitio web y squoosh, automaticamente empezara a bajar el peso de la imagne, sin afectar mucho la calidad.

El formato al cual te recomiendo cambiar la imagen es Webp

Debes indicar el tamaño de cada imagen

Al momento de indicar el tamaño de cada imagen, ahorras tiempo en la carga de las imágenes, en el navegador de Chrome, lo que beneficia en la velocidad de tu sitio web.

mejorar velocidad de carga

Instala o conecta un CDN para tu web

De esta forma, el contenido de tu web cargara mucho mas rapido, ahora que es CDN, bueno te explico

Lo que hace CDN es copiar el contenido de tu web, desde el servidor, y lo carga en el servidor mas cercano a tu ubicacion

Te doy un ejemplo

Digamos que hosting esta ubicado en Estados Unidos, y todo bien tu pagina web carga bien, pero sabias que puede mejorar mucho mas la velocidad de carga usando CDN

Mira lo que pasa es que los proveedores de hosting o servicios de CDN, tienen varios servidores alrededor del mundo, digamos por ejemplo que el proveedor de CDN tiene servidores en Brasil, esta mas cerca a Peru.

Entonces por logica tu sitio web cargara mucho mas rapido al usar un CDN, el proveedor de CDN deberia tener servidores cerca a tu pais, en este Caso Brasil.

Almacenar carga del Cache en pc de tus visitas

En este caso nos ponemos mas tecnico aun, lo que vamos hacer es trabajar desde el codigo de la pagina web.

Usaremos, mejor dicho editaremos y agregaremos codigo al archivo .htaccess

Para que haremos esto ?

Bueno para indicarle que cada persona que visita nuestro sitio web, dejemos contenido en el cache de su pc, laptop, para que la próxima vez que nos visite la carga sea mucho mas rapida.

Ahora es posible que tu hosting ya este activado esta funcion, pero podrias indicar el tiempo, aumentar o reducir el tiempo que el cache se mantenga en su laptop o celular.

Lamentablemente, si el usuario limpia el cache desde su navegador, perderemos esa configuracion, pero si regresa despues de limpiarlo igualmente se cargara todo el contenido en su pc o celular, la siguiente vez la carga será mas rápido

Así es mueve todo el codigo de CSS y JavaScript al footer de tu sitio web

De esta forma lo que hara el navegador es cargar todos los demas contenidos como imagen, texto, fonts, primero y finalmente cargara el CSS y JavaScript

Usar wp_enqueue_style y wp_enqueue_script

Estos dos codigos php, me ayudaran a mover todo el contenido de CSS y Javascript al final de la plantilla, de esta forma la pagina cargara mas rápido

aca hay un tutorial de como mover CSS al head

Como ver CSS en WordPress – Mejorar velocidad de carga

Lo que entiendo, es que al agregar la funcion dentro del archivo functions, haces que todo el css y javascript, se cargue directamente desde la plantilla inicial

Core Web Vitals

Este es otro tutorial en el que se indica como optimizar wordpress, pero en este caso es muy amplio, hay una seccion donde solo habla wp_enqueue_style

que son los core web vitals

https://gtmetrix.com/use-explicit-width-and-height-on-image-elements.html

indica explicitamente las medidas de las imagenes

https://gtmetrix.com/use-explicit-width-and-height-on-image-elements.html

Cambia servidor mas cerca tu país

Esto es algo que recien he revisado y puede ayudarte a tener mas velocidad de carga o una carga mas rapida de tu sitio web.

Veamos normalmente alquilamos un servicio de hosting en EEUU, uno porque son confiables, y tienen buen desempeño, y ademas porque existe tanta publicidad en internet sobre ellos que ya nos parecen muy familiares

Ahora debes revisar principalmente donde estan ubicados sus servidores y seguramente esten en EEUU, lo cual no esta mal, pero ¿ no seria mejor que tengan un servidor en algun pais de sudamerica ?

Porque ?

Porque la carga seria mucho mas rapido que antes, la transeferencia de datos tiene una distancia mas corta, por lo tanto esto mejorara el tiempo de carga de tu sitio web.

Entonces ahorraras quizas segundos, pero de seguro milisegundos, que creeme para los usuarios, valen oro.

Si una pagina web demora en cargar 3 segundos y otra pagina web, la competencia demora 2.5 segundos, esos 500 milisegundos, valen oro, y que quedaras en el sitio de este ultimo.

Sobre para la carga desde celulares.

Y es conocido que la mayoria de nosotros navegamos desde el celular desde hace un buen tiempo, y ya es comun ver todo desde los celulares, es mas, hay personas que solo usan el celular y no usan laptops en sus actividades diarias.

Eso significa llegar a una mayor cantidad de personas, por llegaras a un publico que solo visita sitios web desde sus celulares, y si tu sitio web esta optimizado y tu hosting esta ubicado en un servidor en latinoamerica cargara mas rapido.

En teoria esto es asi, pero tambien hay otros factores, como la tecnologia del proveedor de hosting.

Busca un Hosting de Calidad

Entre los hosting hay muchos, y todos dicen ser los mejores, pero creo que encontre una forma de encontrar medir los hostings desde tu computadora y no valiendote de herramientas externas, dependiendo de tu pais, estos resultados pueden variar.

Es decir un hosting que para ti no sea beneficio en Colombia o Peru, puede que si lo sea si estas en Mexico o Panama, por lo tanto esto es relativo a la ubicacion de donde va a operar tu sitio web.

Sobre todo si tu web va a operar en un pais en concreto.

Para esto lo que trazas o rastreas en la velocidad de carga del hosting

Como podras ver estoy comparando Siteground con Godaddy, y viendo que tanto demora en llegar la informacion a mi pais, en mi caso Peru

Bueno al comparar los resultados Siteground es mucho mas rapido que godaddy

porque ?

Bueno si te das cuenta en los numeros, hay una siglas ms, significa milisegundos

Y si ves Godaddy tiene 304ms, 300ms, 213ms , milisegundos de carga, lo que significa que es lo que demora en cargar, quizas no se note a primera vista, si visitas el sitio de godaddy

Pero miralo de esta forma, tu tienes una laptop o celular de una calidad intermedio para arriba, pero si tuvieras un celular digamos gama baja, esta diferencia se nota,

o digamos que no es la gama media, sino que el proveedor de internet local, no es de los mejores, esta diferencia entre los hostings marca la diferencia, porque aun asi sea, que tu proveedor de internet sea malo, la carga desde el servidor de tu sitio web es excepcional, por lo tanto tu pagina va a cargar mas rapido.

Y si es asi, llegaras a mas personas, lo que significa que tendras mas visitas a tu sitio web, sea desde laptop o celular.

Links de interés:

Leave a Comment

Su dirección de correo no se hará público. Los campos requeridos están marcados *

Scroll to Top