La carga rápida (renderización) de una página web es imprescindible en la era actual. La mayoría de los sitios web realizan una lista de comprobación básica para que su sitio web sea más rápido. Existen herramientas como Google’s Page Speed Insights, GTMetrix o Webpagetest que comprobarán tu sitio web y te sugerirán qué se puede mejorar para que se muestre más rápido.
Cuando se trata de la velocidad de las páginas, lo que más hacen los desarrolladores es reducir (minificar) los archivos, comprimirlos con gzip y comprimir las imágenes.
En un nivel más avanzado, hay pasos como el almacenamiento en caché, el uso de una CDN para distribuir los recursos (lo cual es recomendable si tiene visitantes del extranjero), la división del código, la eliminación de bloques JavaScript, etc.
Pero también hay otras técnicas de las que la mayoría de la gente no habla cuando habla de hacer tu página web más rápida. Estas técnicas de mejora del rendimiento se conocen comúnmente como Resource Hints (técnicas de prefetching). Es una forma sencilla de decirle al navegador: «Hola navegador, en algún momento necesitaré los recursos A, B y C». Así que recójalo ahora, para que podamos servirlo rápidamente más tarde cuando lo solicite.
La ejecución tiene lugar en el tiempo de inactividad del navegador, que es el tiempo en el que el navegador ya ha cargado la página y, por lo tanto, no está haciendo nada. Esto significa que cuando un visitante está leyendo su página o entrada de blog, su navegador carga otra página en segundo plano y calcula su visualización. De este modo, la página se muestra más rápidamente en cuanto se hace clic en el enlace correspondiente. En otras palabras, pre-fetch y pre-render, recuperar y renderizar por adelantado.
Si utiliza Google Analytics, puede averiguar cómo navegan los visitantes por su sitio web para aprovechar al máximo estas técnicas.
Se pueden utilizar las siguientes sugerencias de recursos: dns-prefetch, prefetch, pre-connect y pre-render.
DNS-Prefetch
Un dns-prefetch le dice al navegador que necesitamos unas cuantas fuentes de una URL en particular para que el navegador pueda empezar a manejar el DNS lo antes posible.
<link rel=”dns-prefetch” href=”//een-website.nl”>Supongamos que en algún punto del sitio web se nos redirige a a-website.co.uk. Podemos añadir la línea anterior en la cabecera del sitio web. Una vez que el navegador analiza el documento, inicia la gestión de DNS para a-website.co.uk. Esto hará que las solicitudes posteriores de a-website.co.uk sean un poco más rápidas.
El uso de DNS prefetch puede ahorrar mucho tiempo con las redirecciones y en dispositivos móviles o lugares donde la velocidad de Internet es más lenta.
Prefijación de enlaces
Se utiliza un prefetch cuando estamos seguros de que un determinado recurso será utilizado por el visitante en algún momento. No confunda dns-prefetch y prefetch, ya que ambos se utilizan por razones diferentes. Un caso de uso común es la recuperación anticipada de imágenes que pueden solicitarse en un momento determinado. Una vez cargada la página, el navegador empieza a buscar la imagen en, por ejemplo: ejemplo.es/images/logo.jpg
Un prefetch tiene este aspecto:
<link rel=”prefetch” href=”http://voorbeeld.nl/afbeeldingen/logo.jpg">Cuando se produce esta línea, el navegador solicita la imagen de la URL especificada, la descarga y la almacena en la caché del navegador.
Tenga cuidado de no precargar demasiadas fuentes o fuentes demasiado grandes, su navegador puede entonces darle el siguiente mensaje de error:
Failed to load resource: net::ERR_CACHE_WRITE_FAILUREEsto significa que el recurso que intentamos recuperar de antemano es demasiado grande para escribirlo en la caché del navegador. Utilice la precarga sólo si está absolutamente seguro de que el recurso se utilizará en algún momento.
Preconectar
Para un navegador, acciones como el manejo de DNS (traducir direcciones ip a nombres de dominio), el handshake TCP (Protocolo de Control de Transmisión) y el manejo de TLS (Seguridad de la capa de transporte) son tareas relativamente negras.
La preconexión es similar a la preconexión DNS, pero opcionalmente también realiza el protocolo TCP y la transferencia TLS. Esto ahorra tiempo al usuario al eliminar estas acciones.
Incluyendo el siguiente código en el cuerpo principal de su sitio web, puede conectar una página web por adelantado.
Pre-render
La precarga es el jefe supremo de todas las técnicas de precarga y debe utilizarse con cuidado. Pre-render indica al navegador que pre-renderice todos los recursos de una página determinada con el código que se indica a continuación:
<link rel=”prerender” href=”https://voorbeeld.nl/bepaalde-pagina">De hecho, en https://voorbeeld.nl/bepaalde-pagina, el navegador carga y guarda la página de forma invisible. Cuando el visitante navega a esta página, el navegador puede cargar fácilmente la página pre-renderizada, creando una mejor experiencia de usuario.
En este caso, es importante no aplicarlo innecesariamente, ya que es más probable que cause problemas (recursos innecesarios) que una página más rápida.
¿Cómo lo aplico?
¿Utiliza nuestro paquete WordPress gestionado? entonces no tiene que hacerlo usted mismo, nosotros le quitamos toda la preocupación de encima.
¿El sitio web sigue siendo lento?
No se dice que sólo estas técnicas hacen que el sitio web sea rapidísimo, por supuesto es importante que la base (el alojamiento web) de su sitio web sea buena. ¿Todavía no está alojado con WP Provider? Póngase en contacto con nosotros para discutir las opciones.
