One move: Abrir compresión http Actualmente los servidores web actuales ya admiten la compresión gzip y pueden comprimir contenido de texto como html, css, javascript. En circunstancias normales, la compresión gzip puede ahorrar más del 60% del tráfico, la tasa de compresión específica, que podemos identificar a través de las herramientas proporcionadas por el administrador del sitio web.
Segundo truco: generar páginas en el navegador. Debido al propio HTML estándar, una página web contiene muchas etiquetas invisibles, y la transferencia de estas etiquetas ocupa mucho ancho de banda. Al utilizar la tecnología JavaScript /AJAX, el contenido visible para el usuario se transmite y la página se genera en tiempo real en el navegador del cliente, lo que no solo acelera la velocidad de descarga de la página, sino que también reduce la presión en el servidor. La página promedio puede ahorrar más de un tercio del tráfico, y los ahorros de tráfico pueden llegar al 80% o más para páginas con formato nuevo, como formularios. Tercer truco: Optimizar JavaScript
y CSS
Código
Las páginas web actuales contienen una gran cantidad de archivos JS y CSS. Ya sea que se trate de archivos JS y CSS a mano o generados por herramientas, el contenido contiene muchas líneas en blanco, espacios, información de comentarios, nombres largos de variables, etc., que pueden optimizarse mediante herramientas. El archivo JS se puede optimizar utilizando herramientas como JSmin. El tamaño del archivo JS original es de 2463 bytes. Después de la compresión, se convierte en 1115 bytes. Después de la compresión gzip de http, finalmente se convierte en 640 bytes. El archivo JS completo se convierte en El 26% original. Usando la herramienta de compresión en línea CSS, el tamaño del archivo CSS original es de 2289 bytes, después de la compresión, se convierte en 1753 bytes, y después de la compresión gzip de http, finalmente se convierte en 612 bytes, y el tamaño completo del archivo CSS se convierte en 27%. Aunque nuestro objetivo es extraer cada byte adicional, los archivos JS y CSS pueden necesitar modificarlo, por lo que necesitamos controlar la relación de compresión y no aumentar el costo de modificación del tráfico. Cuarto truco: optimización de la imagen - La imagen debe ser el número uno que se busca para el sitio web. El sitio web utiliza cada vez más imágenes y se está haciendo cada vez más grande. Podemos echar un vistazo a la página de inicio de Omelette. Hay un total de 41 imágenes, con un total de 1311 KB, que representan el 90% del tamaño total de la página. La optimización de la imagen es buena, no solo puede mejorar la velocidad de carga de la página, sino también mejorar la experiencia de usuario del sitio web, sino también ahorrar el ancho de banda del sitio web. A través de la siguiente figura podemos ver que sin afectar la calidad de la imagen, los diferentes formatos de archivo tienen diferentes relaciones de compresión. La diferencia entre los archivos de imagen sigue siendo muy grande, y las imágenes máxima y mínima son 6 veces diferentes, como se muestra en la figura: Podemos usar la herramienta de dibujo para Guarde la imagen en el formato que necesita, y luego use las herramientas como Smush.it para hacer una optimización más profunda de la imagen. Al mismo tiempo, intente usar miniaturas siempre que se puedan usar miniaturas en lugar de tomar prestada la función de zoom del navegador. Carga perezosa de imágenes, solo cuando la imagen se desplaza al área visible, obtiene imágenes dinámicamente del fondo. Dado que no es necesario tomar todas las imágenes en un lugar a la vez, no solo se mejora en gran medida la velocidad de carga de la página, sino que también mejora la experiencia del usuario. Actualmente se admiten muchas bibliotecas JS, y las más comunes son JQuery. La quinta medida: el uso inteligente de recursos gratuitos externos - La tecnología de computación en la nube actual está en auge, muchos sitios web ofrecen una cierta cantidad de tráfico gratuito y el uso de estos créditos gratuitos puede reducir el costo de su sitio web. En la actualidad, el OSS de Alibaba Cloud proporciona 10G de tráfico gratuito, que puede verse 35,000 veces cuando se convierte en imágenes de 300KB. Si pide prestados múltiples servicios gratuitos al mismo tiempo, puede ahorrar mucho dinero. Sexto truco: optimización de dispositivos móviles. En la actualidad, los teléfonos inteligentes se están volviendo cada vez más populares, y la proporción de acceso a Internet móvil está en constante expansión. La mayoría de las pantallas de terminales móviles actuales no se pueden comparar con terminales de PC. Por lo tanto, si el área visible proporcionada por la página web es más grande que el área de visualización del terminal móvil, es invisible o ampliada. La mayoría de los dispositivos móviles actuales todavía usan redes 2G y 3G, y la velocidad de descarga es muy limitada, por lo que nuestra optimización del terminal móvil no solo puede reducir el ancho de banda de la red del sitio web, sino también mejorar la experiencia del usuario. Aunque la función del navegador del terminal móvil actual ya es muy poderosa, está limitada por la potencia de cálculo del dispositivo y el tamaño de la pantalla, por lo que la página web debería tratar de no usar una imagen grande y no utilizar una enorme biblioteca de JS. El séptimo truco: ponerse al día con HTML5
¡Las tendencias en HTML5 están llegando! En la actualidad, los principales proveedores de navegadores ya han admitido HTML5, y la cuota de mercado de IE6 es inferior al 8%, incluso en el mercado nacional, es inferior al 20%. Es posible que no note una secuencia de datos oculta: cookie, esta cantidad de datos no es grande, pero cada vez que accede a una página web, debe enviarla de un lado a otro. Para facilitar la entrada del usuario, muchos sitios web mejoran la experiencia del usuario y guardan automáticamente la entrada del usuario. Cada vez que guarde, debe enviar y actualizar la página. Algunos datos de la aplicación web pueden almacenarse en caché de forma estática, por lo que no es necesario que el usuario la vuelva a descargar cada vez que se actualice. Al utilizar la función de almacenamiento local de HTML5, estos datos almacenados localmente pueden almacenarse en caché en el lado del navegador, lo que reduce la cantidad de datos por interacción y afecta en gran medida el uso del ancho de banda del sitio web. La tecnología puede reducir los costos, pero la transformación de la tecnología no se puede hacer de la noche a la mañana. La forma más efectiva actual de reducir los cargos de ancho de banda de la red es usar el ancho de banda dinámico para pagar el tráfico real de la red de manera diaria o incluso por hora según las necesidades de su negocio. En la actualidad, muchas empresas de computación en la nube, como Alibaba Cloud, proporcionan cambios tan dinámicos en el ancho de banda, lo que hace que el costo de ancho de banda del administrador de la web sea más razonable.