☑ ¿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
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á.
☑ ¿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í
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, 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, 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.
-
Esto también puede interesarte:
-
-
-
-
-
Buenisimo, en mudanzasmontevideo.com tengo 89 de page Speed en Móvil y en Pc tengo 94. Voy a intentar partir en 2 mi CSS a ver que sucede.
Hola Juan en hora buena (Y) sigue optimizando, me comentas como te va. Saludos
Con lo que tengo problemas son con los ciclos de ida y vuelta. Espero resolverlo
Carlos, Cual es tu problema especificamente mándame un correo a anunciatumarca2@gmail.com