Actualizado el jueves, 24 noviembre, 2022
Aunque pueda parecer algo evidente, si quieres que tu web cargue rápidamente, es necesario que elimines, minimices u optimices los recursos que bloquean el renderizado. ¿A qué recursos me refiero? A todos aquellos imprescindibles para que tu web funcione correctamente: imágenes, archivos JS, CSS, fuentes…
Google no da por completa la carga de la página hasta que el último de tus recursos se ha cargado completamente, y esto, puede afectar al posicionamiento de la misma. Una de las métricas más interesantes en una web es su velocidad de carga.
La velocidad de carga además influye en:
- La experiencia de ususario
- El SEO
No todos los recursos se pueden eliminar, pero en muchas ocasiones se pueden optimizar para que el bloqueo, sea el mínimo posible. A continuación te daremos algunos tips para mejorar las métricas en relación con este aspecto.
Índice de contenidos
Medición
La primera pregunta que te puedes hacer es… ¿Qué recursos bloquean el renderizado en mi web? Muy sencillo, para ello tenemos disponibles herramientas online que nos indican los recursos problemáticos, es decir, los que realmente están afectando negativamente la carga de nuestra web.
Entre los más utilizados te recomendamos directamente que pruebas en Chrome la herramienta de Lighthouse. Tras abrir el inspector (F12) y pulsar el botón de “Generar informe” se realizarán una serie de métricas y se te informará de los aspectos a mejorar en tu web para mejorar los tiempos de carga (Rendimiento).
A continuación te desgrano los tipos de recursos más habituales que puedes revisar y optimizar.
Recursos que bloquean: imágenes
En el principio de los tiempos las webs estaban formadas únicamente por texto e hiperenlaces, pero poco a poco fueron añadiendo recurso para hacerlas más atractivas e interactivas. Seguramente en tu web tengas imágenes para ilustrar tu contenido. No te estoy pidiendo que elimines esas imágenes, pero sí que las presentes de forma correcta.
Aquí te paso unas reglas básicas para que no afecten al posicionamiento de tu web:
- Cuida el tamaño máximo de las mismas, cuanto más grandes más tardarán en cargar y bloquearán durante más tiempo, optimízalas a un tamaño adecuado.
- Usa formatos de nueva generación como SVG y WebP. Pesan menos y la calidad es mínima o nula.
- Utiliza el atributo loading=”lazy” de esta manera solo contabilizará la carga de las imágenes que estén visibles en esa pantalla.
Recursos: Archivos JS
Si tienes mucha interactividad en el lado cliente de tu web, sería interesante que echases un vistazo a que funcionalidades son realmente necesarias, ya que la carga de archivos JS, suele ser una de las principales causas de ralentización de una web.
No es necesario que elimines todos los archivos JS que tengas en tu web. Muchos son útiles y necesarios; sin embargo, revisa y valora cuáles son los que realmente te importan. Quizás ese JS que anima una imagen al llegar al scroll a un cierto punto te parezca ahora innecesario. ;-P
Por otro lado, también puedes añadir los atributos DEFER o ASYNC en la inclusión del script, de forma que se carguen o descarguen a medida que sean necesarios.
Otra buena práctica en cuanto al JS es emplear siempre las versiones minimizadas. Estas son las que eliminan los saltos de línea y espacios innecesarios, de modo que se reduzca el tamaño del archivo y este sea más ligero. Puedes realizarlo a mano, o usar alguna herramienta online como Toptal.
Muchas de las principales librerías, como jQuery, ya ofrecen en su descarga las opciones minificadas.
Recursos que bloquean: Archivos CSS
Al igual que con JavaScript, puede ser que tengas una hoja de estilo general con todas las reglas de tu web, en otras palabras, un archivo pesado. Además, si trabajas mucho en tus estilos y personalizas mucho las reglas, puede que tengas estilos que se sobreescriben sin ser necesario. Algunas de las cosas que puedes tener en cuenta son:
- Revisa el CSS para evitar reglas redundantes o innecesarias
- Puedes utilizar el comando Cobertura que te mostrará en rojo las reglas que ralentizan la carga. No obstante, esto no deja de ser un automatismo, por lo que tendrás que revisar que no haya seleccionado alguna regla necesaria.
- Otra buena idea es dividir en diferentes hojas de estilo los CSS y solamente cargar en cada vista las instrucciones imprescindibles. Como imaginas, esto es un trabajo tedioso.
- Por último, y al igual que con los archivos JS, puedes minificar los ficheros. En este caso te recomendamos Cleancss.
Extra tip: Optimización en WordPress
Todos los consejos que te hemos dado hasta ahora, son para webs en las que tengas el pleno control de los archivos. Si tu web está implementada a través de un CMS, es posible que hacer todas estas prácticas sea complejo.
Como siempre en WordPress existen plugins para prácticamente todo y este caso no iba a ser diferente. Para nuestra labor existen plugins que te ayudarán a mejorar y minificar los recursos que bloquean el rendererizado. Ya te lo hemos recomendado en este post, pero nunca está de más recordarlos.
Recuerda que si te interesa partir de una instalación de WordPress con todos los plugin que te ayudarán a sacarle el máximo rendimiento, recuerda que ofrecemos el WordPress Optimizado, para que en la primera instalación ya te vengan todos de serie. ¡No olvides revisar nuestras ofertas en hosting para obtener el mejor precio, o aprovechar los dominios con descuento!
En conclusión, tener tu web al día, y optimizada, no es una tarea única que se realice una sola vez. Es importante que a medida que vayas ejecutando cambios, compruebes que estos, no empeoran características como el tiempo de carga.
Si sigues los consejos que te aportamos en el post, tendrás la web todo lo optimizada que quieras.
Deja una respuesta