Reducir el tiempo de carga de una página web y mejorar el perfomance del tiempo de respuesta del servidor web

Reducir el tiempo de carga de una página web y mejorar el perfomance del tiempo de respuesta del servidor web

☑ ¿Velocidad de carga y problemas con el renderizado de la página PageSpeed Tools?

Hola emprendedores en este post redactaré algunos ejemplos y soluciones que pueden llevarte a resolver los problemas con el renderizado de la página que muestra en PageSpeed Tools y el tiempo de respuesta del servidor, si bien es cierto el servidor se debe al hosting que tienes pero problemas quitarle toda la basura que pueda haber en la página web, minificar html, minificar css y javascripts, optimizar imagenes, cachear imágenes, etc.

☑ Ciclos de ida y vuelta por el bloqueo del renderizado

Hay que tener en cuenta los factores que afectan a la velocidad del sitio web; no obstante, los más importantes son los siguientes:

Ciclos de ida y vuelta por el bloqueo del renderizado: ¿qué significa esto? son los ciclos de ida y vuelta necesarios para entregar recursos que bloquean el renderizado.

Si la mayoría de los recursos de una página bloquean el renderizado de la página web page SPEED insight PSI nos informa que la web tiene un muchos factores por mejorar por eso la plataforma de PSI recomienda que los programadores sigan estas reglas de optimización, clic a cualquier enlace para ver la solución.

Evitar cualquier tipo de redirección a otras páginas destino.

Quitar el JavaScript y el CSS  y optimizar la entrega de css y js

Minificar JS, CSS Y HTML

Aprovechar almacenamiento en caché de los navegadores

Mejorar el tiempo de respuesta de los servidores.

Mejorar la puntuación de Google PageSpeed
Eliminar el javascript que bloquea la visualización
Especificar el caché del navegador
Evita los redireccionamientos a páginas de destino
Habilitar la compresión
Optimizar imágenes
Priorizar contenido visible
Reducir el tiempo de respuesta del servidor

 

☑ PSI calcula que esta página necesita x ciclos de ida y vuelta adicionales para cargar los recursos que bloquean el renderizado.

Hoy he analizado mi sitio a través de PageSpeed Tools y me mostró el siguiente mensaje:

Las estadísticas muestran que la página mediana de Internet necesita 4 ciclos de ida y vuelta por el bloqueo del renderizado y aproximadamente 89 recursos (1,3 MB) para cargarse. Sin embargo, parece que esta página utiliza menos recursos. PSI calcula que esta página necesita 1 ciclos de ida y vuelta por el bloqueo del renderizado y aproximadamente 54 recursos (0,7 MB) para cargarse. Cuantos menos ciclos de ida y vuelta y bytes necesite una página, más rápida será.

pagespeed insights test

☑ ¿Cómo puedo mejorar la velocidad de carga y solucionar problemas con el renderizado de la página?

Esto es un tanto complicado entenderlo así de fácil pero haré un resumen . El protocolo TCP/IP soporta «paquetes» de ciertos tamaños, y hace peticiones por cada X cantidad de bytes, si tus archivos html, css, js (cada uno) se pasa de esa cantidad de bytes, se deben hacer mas de una peticion para lograr tener todo el archivo. Supon es un archivo CSS y lo debe pedir en 2 o 3 partes, el render de la web va a tener que esperar a que esos 3 paquetes esten del lado del cliente, armarlos y leerlos. Por eso debes procurar que los archivos html, css y js pesen lo menos posible, o en su defecto, esten de tal forma que al completarlo se haga render de toda la pagina.
Tener solo archivos pequeños no siempre es buena idea, haciendo una suposición de que partes los CSS en trozos pequeños (5 digamos) para evitar peticiones innecesarias, pero cada archivo es necesario para que la pagina se «vea» como debe de ser, siempre hay que esperar esos 5 CSS.

Pon tu archivo de estilos css(si tienes 5 css) todo en un solo archivo css, si tienes wordpress trabaja con los pluggins, wp-rocket o total caché y reduce el peso de esos archivos css para mejorar la velocidad de tu página web.

Por eso se habla de optimizar el CSS y JS, minificarlos junto al HTML, etc, poner los css de todas la página web y js  en solo dos archivos(css y js)  minificar cada uno, así como también el html, para intentar hacer la menor cantidad de peticiones posibles,  cada web es un mundo diferente donde un selector CSS puede hacer la diferencia frente a otras y cargando las páginas más rápidos que otras.

Aquí vemos ejemplos de css, js y html minificados, son códigos amontonados casi sin espacio entre sí

html-minificados

Es decir mientras más corto tengamos los archivos html, js, y css mejor será velocidad y carga de la página y mientras google hace menos peticiones a tu servidor de hosting  se utilizan menos ciclos de ida y vuelta y menos bytes,  y por ende las páginas serán más rápidas.

Debido a esto es que yo les digo «no se claven» en estos detalles, si llega a verde y al probar la web en navegadores donde no tengan en cache la web y/o el móvil la respuesta es buena pueden continuar con lo demás. Realizar esto y que te quede super te puede demorar mucho tiempo para que al final no sea de gran ayuda en lo que a SEO respecta, ya que más importancia tiene, la satisfacción o experiencia de usuario dentro de la página, que se basan en el contenido de calidad, , arquitectura de la página, metas correctas, freshnets, richt snippets, etc.

Acá les dejo un minificador de  html-> minificar tu HTML 

Acá les dejo un minificador  CSS-> minificar tu CSS

Acá les dejo un minificador JAVASCRIPT-> minificar tu JAVASCRIPT

☑ Evitar redirecciones a páginas de destino

Cualquier tipo de redirecciones o el uso de recursos(js css de otras web) disminuyen la velocidad de carga del sitio web, por eso recomendamos evitar al máximo el consumo de servicios donde se debe cargar algo a otros sitios como por ejemplo tipos de letra , códigos de seguimiento a sea de google o facebook(a veces es imprescindibles ponerlos, solo en casos de conversión o seguimiento), pluggins que jalan los css y js de sus propios servidores.

☑ Quitar el JavaScript que bloquea el renderizado de contenido

Disminuye o evita el uso de JavaScript que bloquee el renderizado de contenido, sobre todo el de secuencias de comandos externas, por ejemplo tener una mayor cantidad de archivos  jquery, carpetas javascript, ya que se realizarán más peticiones al servidor y la página web no podrá mostrarse antes que los archivos javascript (.js) se ejecuten. Para evitar que se produzcan solicitudes de red adicionales, puedes insertar las secuencias de comandos necesarias para renderizar el contenido en el código HTML de las páginas, o colocar atributos asincronos. En el caso de las secuencias de comandos que no sean necesarias para hacer el renderizado inicial, haz que se procesen de manera asíncrona o que se ejecuten después del primer renderizado.

<script async src="my.js">

Sin embargo , para tener buen rendimiento, asegurémonos que el contenido insertado sea pequeño y pueda ejecutarse de manera rápida, en conclusión evitar o minimizar el uso de javascript es fundamental para que la web ande más rápida… Ver nuestra categoría de seo para otras soluciones de optimización

Optimizar el puntaje en GTMETRIX Y PAGESPEED en sitios web WordPress.

Si deseas optimizar el puntaje de tu sitio web WordPress, a nivel avanzado, deberás entender cada métrica, como la minificación de html, css y js, imagenes litespeed, combinación de css, js, retardo de iframes, optimización de scripts entre otros

Para este ejemplo de optimización usaremos el plugin gratuito LITE SPEED CACHÉ, super efectivo y de manera gratuita que estoy seguro cumplirá tus expectativas

Caso 1: Landing Page

Landing page, antes de optimizar con el pluggin.

Landing page, después de optimizar con el pluggin.

Vemos como hemos optimizado el puntaje de rapidez, velocidad de cargado, peso y número de solicitudes

Resultados

PageSpeed Score
YSlow Score

Loaded Time

Page Zise
Request
Aumentó en 10%Aumentó en 7%Reducción en 42%Reducción en 59%Reducción en 72%

Caso 2: Sitio Web

Home de una web de una agencia digital, antes de usar el plugin

Home de una web de una agencia digital, después de usar el plugin

Resultados

Vemos como hemos optimizado el puntaje de rapidez, velocidad de cargado, peso y número de solicitudes

PageSpeed Score
YSlow Score

Loaded Time

Page Zise
Request
Aumentó en 28%Aumentó en 5%Reducción en 42%Reducción en 28%Reducción en 23%

Si quisiera tener la configuración completa en Lite Page Speed, ideal para tu blog o sitio Web puedes descargar en el botón la configuración en la cual podrás importar esta configuración dentro de tu sitio web wordpress, rapidamente.

4 comentarios en “Reducir el tiempo de carga de una página web y mejorar el perfomance del tiempo de respuesta del servidor web

Deja un comentario

Share
Share