10 maneras fáciles de aumentar la velocidad del sitio web en 2020

La velocidad de la página solía ser uno de los pilares básicos del diseño web. Últimamente, lamentablemente ha pasado a un segundo plano debido al mayor ancho de banda de Internet ("entonces, ¿por qué molestarse?") Y la adopción de marcos front-end modernos. Sin embargo, la velocidad del sitio web sigue siendo fundamental para la experiencia del usuario y la monetización, y su impacto en su sitio es probablemente mucho mayor de lo que cree.

No se puede exagerar el efecto de optimizar su sitio web para la velocidad en lo que respecta a la monetización de anuncios y la experiencia del usuario. Para saber qué tan bien le está yendo a su sitio con respecto a la velocidad, puede usar la herramienta de auditoría de Chrome o usar herramientas como GTmetrix o la herramienta de desarrollo de Google.

En este artículo, nos pondremos un poco técnicos y lo guiaremos a través de las diez acciones básicas que acelerarán su sitio web para 2020, lo que dará como resultado una mejor experiencia de usuario y una mejor monetización.

Haz que tu servidor trabaje para ti

La configuración correcta de su servidor puede mejorar en gran medida el rendimiento de la velocidad. Dos configuraciones sencillas que debe asegurarse de tener:

1. Compresión habilitada : asegúrese de tener habilitada la compresión GZIP para todos sus archivos de texto (HTML, JS, CSS, ETC...).
2. HTTP2 : si su servidor admite HTTP2, asegúrese de habilitarlo.Es una excelente manera de mejorar el rendimiento sin tener que cambiar nada en el sitio.
   Echa un vistazo a esta genial demostración de HTTP2 de Vodien.

Usar carga diferida

La carga diferida es el proceso de cargar contenido solo cuando está a punto de aparecer. Esto reducirá la descarga de una gran cantidad de contenido adicional al que el usuario nunca podrá acceder y liberará el navegador para mejorar drásticamente el rendimiento. La buena noticia es que hay muchos paquetes listos para usar que pueden ayudarlo a cargar contenido de forma diferida rápidamente. Aún mejor, a partir de Chrome 76 (julio de 2019), Lazy Loading viene integrado de forma nativa con HTML. Solo agregaloading=”lazy ” a la etiqueta, y listo.

Haz tus archivos más pequeños

Minificación : este es el proceso de eliminar espacios y comentarios del código.Son esenciales para que el código sea legible para los humanos, pero las computadoras no los necesitan. Minificar puede reducir el tamaño del archivo en más del 70%. Debe minimizar todos sus archivos HTML, CSS y JS. Solo asegúrese de conservar los originales en caso de que necesite hacer cambios. Hoy en día, todos los IDE principales tienen complementos que minimizarán sus archivos por usted. Si está utilizando un paquete como React, la minificación viene con agitación de árboles incorporada.

Dividir archivos : asegúrese de que sus archivos solo tengan lo que necesitan.Dividir archivos ayuda a que los archivos sean más pequeños y su proyecto sea mucho más manejable.

Optimizar imágenes

Tamaño correcto de las imágenes : el diseño web receptivo se ha convertido en la norma, lo que lleva a que las imágenes se muestren en diferentes tamaños según la pantalla.Podemos usar eso a nuestro favor y mantener algunos tamaños diferentes para nuestras imágenes. No es necesario descargar un archivo grande si la imagen no va a poder mostrar todos esos píxeles. La etiqueta de imagen y el atributosrcsethacen que sea muy fácil de hacer.

Esta guía lo guiará a través de algunas mejores prácticas e implementaciones sencillas para cambiar el tamaño de las imágenes de manera receptiva.

Formatos de próxima generación : los nuevos formatos de imagen que ahora son compatibles con la mayoría de los navegadores pueden reducir drásticamente el tamaño de los archivos (no solo para las fotos).El formato WebP abierto de Google, por ejemplo, puede reducir entre un 64% y un 92% el tamaño del archivo. En el caso a continuación, usamos archivos WebP en 2 tamaños diferentes y agregamos una imagen jpg alternativa para navegadores que no son compatibles con webP.

Sprites de imagen : un sprite de imagen es una imagen compuesta de muchas imágenes pequeñas.El uso de un sprite de imagen para todos sus botones/logotipos reducirá la cantidad de llamadas al servidor que necesita para cargar una página. Si está utilizando HTTP/1.1, esto mejorará el tiempo de carga.

Implementar una política de caché del lado del cliente

El tiempo de carga de la página se puede mejorar significativamente pidiéndole al navegador que conserve los archivos que ya ha descargado. Esto es relevante tanto para archivos internos como externos.

Archivos internos : estos son archivos reutilizables en su sitio, como hojas de estilo y logotipos.Se acostumbra establecer la fecha de caducidad en 1 año para archivos que no cambian, como logotipos, CSS general e imágenes con identificadores únicos. Si tiene archivos que espera cambiar con más frecuencia, puede establecer una fecha de caducidad adecuada.

Paquetes externos : por ejemplo, si su sitio usa el paquete de arranque, en lugar de descargar el paquete en su sitio web, tiene la opción de usar el CDN.Si hace esto, incluso la primera vez que el usuario visite su sitio web, probablemente no necesitará descargar el paquete, ya que es un paquete popular y quizás ya se haya descargado de un sitio diferente.

Aproveche el almacenamiento en caché del lado del servidor

La idea es la misma que en el almacenamiento en caché de frontend, evitando que su servidor trabaje en cosas que ya ha creado o que usa con frecuencia. Si tiene un sitio de contenido, no desea que su base de datos sea visitada cada vez que un usuario ingresa al sitio web, debido al rendimiento lento y los costos de la base de datos. Dado que todos los usuarios verán los mismos artículos, puede almacenarlos en caché una vez y seguir sirviendo la versión almacenada en caché hasta que se realicen cambios.

Muchos paquetes diferentes pueden ayudarlo con esto, dependiendo de cómo esté diseñado su servidor. Y, por supuesto, puede diseñar su propio almacenamiento en caché para satisfacer sus necesidades específicas.

Usar CDN

Las redes de distribución de contenido se ponen en contacto con su servidor, almacenan en caché la respuesta y luego la entregan localmente a sus usuarios. A primera vista, parecen muy caros. Sin embargo, la configuración correcta de sus CDN debería reducir sus costos de servicio y mejorar en gran medida el rendimiento.

Evitar redireccionamientos

¡Evita los redireccionamientos! Los redireccionamientos son una forma segura de ralentizar todo. A veces son necesarios, como cuando se redirige a los usuarios para que usen la versión segura de su sitio (HTTP VS HTTPS) o cuando mueve contenido en su sitio web pero quiere que sus viejos enlaces de SEO continúen dirigiendo al contenido.

Si te encuentras usando redireccionamientos, asegúrate de evitar los redireccionamientos encadenados. Una redirección encadenada es una redirección que conduce a otra redirección. Si tiene que redirigir, ¡asegúrese de hacerlo solo una vez!

Priorizar y eliminar la actividad de bloqueo de procesamiento

La representación se refiere a la carga, y al mirar su página web, la prioridad más alta para la carga rápida son las partes de arriba del pliegue. Dado que HTML se lee de arriba a abajo, es importante empujar las cosas que no son importantes para la vista de la primera página más allá de las cosas que sí lo son.

Por ejemplo, si tiene una etiqueta JS para análisis, puede colocarla en el pie de página. De esta forma, te aseguras de que el navegador del usuario se ocupe primero de las cosas que el usuario puede ver y posponga otras cosas para más adelante.

Elige sabiamente a tus socios

En la web, al igual que en la vida, lo más importante es elegir los socios adecuados. Puede optimizar su sitio y tener un hermoso sitio web diseñado para funcionar rápido. Pero con un socio publicitario que hace que el sitio se cargue con lentitud, crea una experiencia de usuario intrusiva. Hace un año, comenzamos a trabajar con un editor en la industria de los deportes electrónicos y teníamos dificultades para monetizar el sitio. Después de un examen cuidadoso del sitio, encontramos un bloque de anuncios que era tan lento que estaba provocando que todos los demás socios publicitarios del sitio expiraran. Después de que el sitio eliminó este socio publicitario, ¡el RPM general por página del sitio se cuadruplicó!

Seguir aprendiendo

En este artículo, solo cubrimos algunos consejos rápidos. Por lo tanto, asegúrese de profundizar más para obtener un mayor rendimiento. Además, nuestro ecosistema está en continua evolución. Si llegaste hasta aquí, probablemente sepas que siempre hay algo nuevo que aprender.

Te recomiendo que eches un vistazo a los dos enlaces de abajo. Creo que son un gran lugar para comenzar.

https://www.udacity.com/course/browser-rendering-optimization–ud860

https://medium.com/swlh/what-the-amp-aumenting-my-own-site-with-accelerated-mobile-pages-amp-52927bab7cb8