Una de las cosas más importantes a las que debemos prestar atención cuando analizamos nuestro sitio es la velocidad de carga de nuestra pagina y hacer todo lo posible por mejorarla.
Tener mala velocidad sin dudas afectará las visitas y nuestras ventas, en muchos estudios que se indica la relación entre el tiempo de carga y la permanencia de los usuarios en un sitio, mientras mayor es la demora en cargar también aumenta el porcentaje de usuarios desisten de continuar usando ese sitio.
Un servidor rápido es solo uno de los factores más importantes y por eso en Infranetworking nos esforzamos día a día en tener el mejor Hardware disponible, de tener conexiones de alta velocidad y maximizar el rendimiento optimizando el software.
Sin embargo hay más aspectos a los que debemos prestar atención, la gran mayoría de las veces que una página demora en cargar es porque el sitio es ineficiente, desperdicia recursos y no esta optimizado todo lo que podría y eso es de lo que vamos a hablar hoy.
Esto hace que se demore más tiempo en procesarse la página del lado del navegador sin embargo es algo que puede mejorarse y te vamos a decir como, aunque para explicarte mejor primero vamos a ver cómo se compone una página.
Contenido
- 1 Componentes de una página web
- 2 ¿Qué es la ruta crítica?
- 3 ¿Cómo se construye el DOM y el CSSOM?
- 4 Cómo mejorar la Ruta de Visualización Crítica en WordPress
- 4.1 Priorizar el contendió Visible o Above the fold
- 4.2 Java Script y CSS que bloquean la visualización,
- 4.3 Minificar recursos (HTML, CSS y JavaScript)
- 4.4 Habilitar la compresión
- 4.5 Optimizar imágenes
- 4.6 Caché en los navegadores
- 4.7 Evitar re direcciones a páginas de destino
- 4.8 Mejorar el tiempo de respuesta de los servidores
- 4.9 Instala y configura un Plugin de Caché
- 4.10 Utiliza un CDN (Content Delivery Network)
- 5 Conclusión
Componentes de una página web
Una página web esta compuesta de muchos elementos separados, por un lado esta el html que forman la super-estrucutra de la página, además están las hojas de estilo que le dan la estética, están las imágenes y están los archivos JavaScript que la hacen interactiva.
Cada uno de estos recursos son archivos separados y podemos tener cientos dentro de la misma página que necesitan ser descargados en el navegador del usuario, esto hace que el navegador llame al servidor cientos de veces para mostrar una sola página.
Por ejemplo las imágenes también influyen en la velocidad, no solo la cantidad de imágenes sino también cuantos KB o incluso MB pesen cada una, un detalle que muchas veces se pasa por alto.
Para que nuestro sitio sea veloz, mejorar la experiencia de usuario y también para hacer a nuestra web tenga una buena puntuación de cara a los buscadores, sobre todo en Google, debemos prestar atención a la cantidad de recursos que cargamos, su peso y también en el orden que se cargan, para que no retarden la carga del sitio
Para resolver todo debemos saber quá es la ruta crítica de visualización, en qué nos afecta y cómo podemos optimizar nuestro sitio para hacerlo mucho más veloz.
¿Qué es la ruta crítica?
La ruta crítica se puede resumir como una serie de pasos necesarios que hace nuestro navegador con el fin de mostrarnos una página web, es algo que pasa en segundos y que puede que nos parezca irrelevante, sin embargo nada más alejado de la realidad.
Conociendo esta secuencia podemos administrarla para obtener mejores resultados, facilitando primero la carga de las partes más importantes y críticas de la web dejando para último los pasos no tan esenciales que más demoran y que son los que interfieren.
Pasos de la Ruta de Visualización Crítica:
- El proceso para mostrar una página en el navegador desde el momento que el html que compone la página es descargado al cliente por parte del navegador.
- El primer lugar el navegador descarga todo el html de la web y construye el Modelo de Objetos del Documento (DOM) que contiene todos los elementos el HTML
- En un segundo paso descarga y procesa el CSS y construye el Modelo de Objetos CSS también llamado por sus siglas en inglés CSSOM
- En un tercer paso el DOM y el CSSOM es combinado, se calculan el tamaño y la ubicación de los objetos en la pantalla, formando el RenderTree o árbol de visualización que contiene todos los nodos visibles del documento.
- Como último paso, la página es renderizada en la pantalla.
¿Cómo se construye el DOM y el CSSOM?
Construyendo el DOM
El navegador genera el Modelo de Objetos del Documento (DOM) que contiene todos los elementos que vienen en el HTML en 4 pasos.
Para ello lo primero que hace es convertir el html de la página descargada o leída desde el disco y lo traduce a caracteres individuales, en el proceso se convierte de bits un tipo de codificación que se especifique, por ejemplo UTF-8 o iso-8859-1.
Busca las etiquetas que se encuentran entre < y > y las convierte en tokens según el estándar W3C HTML5 cada nuevo token tienen un conjunto de reglas propias.
Luego los tokens son convertidos en nodos creando un árbol que esta compuesto por los nodos y sus relaciones definidas en el lenguaje HTML.
Se dice que el proceso de construcción del DOM es incremental debido a que los nodos quedan disponibles en el árbol a medida que son cargados al mismo, sin necesidad que el navegador procese el html por completo.
Construyendo el CSSDOM
La construcción del CSSDOM es bastante similar a la construcción del DOM, los CSS son leídos, convertidos en tokens y se crea el árbol de nodos, la principal diferencia con respecto al DOM es que la construcción en este caso no es incremental.
Cuando se detecta que se va a cargar un recurso CSS en un archivo externo el proceso se detiene mientras el CSS es devuelto y procesado porque a diferencia del HTML, el CSS puede ser sobrescrito por parte del diseñador tantas veces quiera esto trae el inconveniente que para que el navegador pueda usar el CSSDOM primero el CSS debe ser procesado por completo y mientras esto sucede el navegador queda esperando que se complete para luego recién continuar con el resto de la carga de la página.
Cómo mejorar la Ruta de Visualización Crítica en WordPress
Lo importante a tener en cuenta es saber que hay contenido que puede retrasar la visualización de la página, cuando esto sucede el navegador debe esperar a que otros procesos terminen para luego recién mostrar la página, como dijimos antes podemos controlar esto y seguir una serie de pasos para mejorar la carga.
Priorizar el contendió Visible o Above the fold
Se trata de la parte superior de la página y es que debemos prestarle mas atención porque es la primera que va renderizarse, si se carga los CSS desde una hoja de estilos externa se bloqueara la carga hasta que sea procesado el archivo CSS
Por eso puede ser una buena idea incrustar ese código CSS en el HTML para evitar ese bloqueo aunque hay que tener cuidado de no excedernos en el tamaño final del la página, conviene tener solo el CSS mínimo que sea crítico para mostrar esa porción de la pagina.
Si los datos necesarios exceden los 14KB comprimidos se generaran mas ciclos de ida y vuelta al servidor, en redes lentas o con alta latencia como las de telefonía esto demorará la visualización final de la página por eso debemos reducir el tamaño del contenido de la mitad superior de las páginas.
Java Script y CSS que bloquean la visualización,
Todo CSS bloquea la visualización hasta que es procesado, sin embargo no todo CSS es prioritario ni necesario para mostrar la página inicialmente.
Podemos utilizar la etiqueta de medios que nos permiten marcar la carga de un CSS en particular para que no bloque la visualización de la web.
Con JavaScript sucede algo similar, cuando se esta descargando el html y se recibe un recurso JS se detiene la carga del DOM hasta que el JS es leído y ejecutado, por nos debemos cargar el JavaScript de forma asíncrona, es decir, se continuará descargando el resto de la página sin bloqueos mientras el JavaScript es descargado y ejecutado de forma paralela, podemos ver más información y consejos en CSS que bloquea la representación, además en Optimizar la entrega de CSS y en Quitar el JavaScript que bloquea el renderizado de contenido
Minificar recursos (HTML, CSS y JavaScript)
En el código usualmente hay muchos datos necesarios para la visualización final de la página como los espacios, las tabulaciones, saltos de linea, lineas en blanco y los comentarios en el código, existen herramientas que nos permiten eliminar todos estos elementos innecesarios y reducir drásticamente el tamaño de los archivos.
Habilitar la compresión
Hoy día todos los navegadores de escritorio o móviles soportar compresión con gzip por lo que es una muy buena idea habilitar la compresión del lado del servidor para optimizar la cantidad datos a transferir. Desde Gzip Test podrás probar si tu dominio ya usa Gzip, y sino aprender cómo activarlo al mismo tiempo.
Optimizar imágenes
Cuando de cantidad de datos se trata la mayor parte del peso de la web las aportan las imágenes por eso la optimización del tamaño es esencial, muchas veces se colocan imágenes de dimensiones muy superiores a las necesarias y ademas con una calidad muy alta, es posible reducir la calidad de una imagen sin que sea perceptible al ojo humano, con esto ahorraremos muchos datos. Puedes mirar la documentación de Google o leer un post que publicamos hace un tiempo sobre Cómo Optimizar las Imágenes de tu sitio web de imágen.
Y si eres cliente de Infranetworking incluso podrás disfrutar gratis de nuestra herramienta de Conversión y Optimización de Imágenes gratis.
Los navegadores tiene un caché que permite almacenar los los datos descargados, desde el servidor y/o el sitio es posible establecer mediante las cabeceras el uso del caché, durante cuanto tiempo, siempre es recomendable establecer un tiempo mínimo de validez, eso reducirá la cantidad de ciclos y peticiones necesarias. Mas Infromación
Evitar re direcciones a páginas de destino
Las re-direcciones muchas veces son necesarias aunque hay que tener cuidado y no abusar de ellas, por cada re-dirección se desperdicia un tiempo precioso, por lo que debemos estudiar bien cuáles necesitamos y cuales podemos resolver de otra manera Más Información
Mejorar el tiempo de respuesta de los servidores
Un buen hosting con buen hardware y buena conectividad es fundamental, cuanta más optimización a nivel de servidor mejor, también podemos mejorar la respuesta usando PHP 7.0 o superior que es mucho más eficiente que sus predecesores y complementarlos con los siguientes dos puntos.
Instala y configura un Plugin de Caché
En WordPress por cada visita en cada una se repiten múltiples operaciones que siempre producen el mismo resultado final por lo que para ahorrar tiempo de ejecución de PHP y de consulta a la base de datos, es imprescindible instalar un plugin de caché que previamente guarde el contenido en el disco o en servicios como memcache, ahorrando tiempo de proceso valioso y aumentando la velocidad del sitio.
Nuestra recomendación es que uses alguno de estos sistemas de caché:
Utiliza un CDN (Content Delivery Network)
Otro mecanismo para aumentar aún más el rendimiento es la implementación de un CDN, que es un tipo de servicio que actúa también de caché proporcionando varios servidores web alrededor del mundo para despachar el contendió desde el lugar más cercano al visitante, es decir, aunque tu servidor este en Estados Unidos y si ingresa un visitante desde Japón en lugar de despachar el contenido desde Estados Unidos, el CDN lo va a despachar desde algún servidor geográficamente más cercano a Japón.
Uno de los mejores CDN que podemos recomendarte es Cloudflare, que es gratuito y el más rápido de todos.
Conclusión
No existe una receta única para poder abordar todos estos puntos ya que muchos dependen del Template que utilicemos, además de la personalización del sitio que hagamos y los plugins que instalemos. Todos los sitios son diferentes y casi únicos, por lo que cada uno tendrá problemas diferentes o quizá similares, aunque en diferente grado y por diferentes causas.
La mejor manera es analizar caso a caso y para eso por fortuna existen diferentes herramientas como PageSpeed Insights y GTMetrix entre muchas otras que realizan un análisis de nuestro sitio y nos brindan valiosa información sobre los problemas que debemos resolver y nos hacen recomendaciones sobre cómo hacerlo.
