01. Minimizar las solicitudes HTTP Reducir las solicitudes HTTP
Imagen, CSS, script, Flash, etc. aumentarán la cantidad de solicitudes HTTP. Reducir la cantidad de estos elementos puede reducir el tiempo de respuesta. Escriba varios JS y CSS en un archivo si es posible; también es una mala práctica escribir imágenes directamente en la página. Debe escribirlas en CSS, usar CSS Sprite para ensamblar las imágenes pequeñas y luego usar el fondo para encontrar la posición; utilice "Mapa de imagen" (al colocar diferentes URL en la misma imagen, este método puede reducir la cantidad de solicitudes de imágenes. Después de la prueba, el tiempo para obtener el mapa de imagen es un 56% más rápido que el tiempo para obtener cada imagen individual. Mapa de imagen Hay dos formas, una es "mapa de imagen del lado del servidor" y la otra es "mapa de imagen del lado del cliente". La implementación del lado del servidor consiste en pasar las coordenadas XY en las que hace clic el usuario al servidor, y luego el servidor. El lado mapea las operaciones correspondientes. Utilice etiquetas MAP en primer plano. El método del mapa de imágenes hace que el mantenimiento de la programación sea mucho más difícil.
02. Utilice una red de entrega de contenido utilizando tecnología CDN
"Red de distribución de contenidos". Su propósito es publicar el contenido del sitio web en el "borde" de la red más cercano al usuario agregando una nueva capa de arquitectura de red a la Internet existente.
Características de CDN:
1. Aceleración de la caché local: mejora la velocidad de acceso a los sitios corporativos (especialmente los sitios que contienen una gran cantidad de imágenes y páginas estáticas) y mejora en gran medida la estabilidad de los sitios de la naturaleza mencionada anteriormente.
2. Servicio de duplicación: elimina el impacto de los cuellos de botella en la interconexión entre diferentes operadores, logra una aceleración de la red entre operadores y garantiza que los usuarios de diferentes redes puedan recibir una buena calidad de acceso.
3. Aceleración remota: los usuarios de acceso remoto seleccionan de forma inteligente y automática el servidor de caché basado en la tecnología de equilibrio de carga DNS y seleccionan el servidor de caché más rápido para acelerar el acceso remoto.
4. Optimización del ancho de banda: genera automáticamente un servidor Mirror Cache remoto para el servidor y lee datos del servidor Cache cuando los usuarios remotos acceden a él, lo que reduce el ancho de banda del acceso remoto, comparte el tráfico de red y reduce la carga en el servidor WEB del sitio original. , etc.
5. Antiataque de clúster: los nodos CDN ampliamente distribuidos y el mecanismo de redundancia inteligente entre nodos pueden prevenir eficazmente las intrusiones de piratas informáticos y reducir el impacto de varios ataques DDOS en el sitio web, al tiempo que garantizan una buena calidad del servicio.
03. Agregue un encabezado Expires o Cache-Control para configurar "caducidad del archivo de encabezado" o "caché estático"
Los navegadores utilizan el almacenamiento en caché para reducir la cantidad de solicitudes HTTP y acelerar el tiempo de carga de la página. Si se agrega un tiempo de vencimiento prolongado al encabezado de la página, el navegador siempre almacenará en caché los elementos de la página. Sin embargo, si algo en la página cambia, se debe cambiar el nombre; de lo contrario, el cliente no se actualizará activamente.
(1) Concepto
El control de caché se utiliza para controlar el caché HTTP (es posible que no se implemente parcialmente en HTTP/1.0, solo se implementa Pragma: no-cache)
Formato: Control de caché: directiva de caché
La directiva de caché puede ser la siguiente:
Se utiliza al solicitar:
| "sin caché"
| "sin tienda"
| “edad máxima” “=" delta-segundos
| "max-stale" [ "=" delta-segundos ]
| “min-fresh” “=" delta-segundos
| "sin transformación"
| "sólo si está en caché"
| "extensión de caché"
Usado en respuesta:
| "público"
| "privado" [ "=" <"> nombre-campo <"> ]
| "sin caché" [ "=" <"> nombre-campo <"> ]
| "sin tienda"
| "sin transformación"
| "debe revalidar"
| "revalidar proxy"
| “edad máxima” “=" delta-segundos
| “s-maxage” “=" delta-segundos
| "extensión de caché"
Descripción parcial:
Dividido según si se puede almacenar en caché
Público indica que la respuesta se puede almacenar en caché mediante cualquier caché.
Privado indica que la memoria caché compartida no puede procesar todo o parte del mensaje de respuesta para un único usuario. Esto permite que el servidor solo describa una respuesta parcial de un usuario que no es válida para las solicitudes de otros usuarios.
no-cache indica que el mensaje de solicitud o respuesta no se puede almacenar en caché (HTTP/1.0 se reemplaza por no-cache de Pragma)
Basado en lo que se puede almacenar en caché
no-store se utiliza para evitar que se divulgue involuntariamente información importante. Enviarlo en el mensaje de solicitud hará que tanto el mensaje de solicitud como el de respuesta utilicen el almacenamiento en caché.
Basado en el tiempo de espera de la caché
max-age indica que el cliente puede recibir respuestas con una vida útil no mayor que el tiempo especificado en segundos.
min-fresh indica que el cliente puede recibir respuestas con un tiempo de respuesta menor que el tiempo actual más el tiempo especificado.
max-stale indica que el cliente puede recibir mensajes de respuesta más allá del período de tiempo de espera. Si se especifica un valor para mensajes máximos obsoletos, el cliente puede
Recibe mensajes de respuesta que se encuentran dentro del período de tiempo de espera especificado.
Expires representa el tiempo de existencia, lo que permite al cliente no verificar (enviar una solicitud) antes de este tiempo, lo que equivale a la edad máxima.
Efecto. Pero si existen al mismo tiempo, serán anulados por la edad máxima de Cache-Control.
Formato: Expira = "Expira" ":" Fecha HTTP
Por ejemplo: Vence: jueves 1 de diciembre de 1994 a las 16:00:00 GMT (debe estar en formato GMT)
(2) Solicitud
Establezca caducidad y control de caché a través de HTTP META:
<meta http-equiv=”Control de caché” contenido=”edad máxima=7200″ />
<meta http-equiv=”Expires” content=”Lunes, 20 de julio de 2009 23:00:00 GMT” />
Las configuraciones anteriores son sólo ejemplos y cualquiera de ellas se puede utilizar en la práctica. Si se escribe así, solo será válido para la página web, no se utilizará para imágenes u otras solicitudes en la página web y no realizará ningún almacenamiento en caché. Además, hay más solicitudes del cliente. Aunque solo se verifica el estado de Última modificación, el aumento de solicitudes debe tener un impacto en la velocidad de navegación.
Si desea agregar un caché al archivo, puede usar el módulo mod_expire de Apache ( http://httpd.apache.org/docs/2.2/mod/mod_expires.html ), que está escrito como
<IfModule mod_expires.c>
ExpiraActivo el
ExpiresDefault "acceso más 1 día"
</IfModule>
Recuerdo que ExpiresActive está activado. Al principio no lo activé. Parece que YSlow no puede encontrar el mecanismo de almacenamiento en caché. Si se agrega de esta manera, se incluirá de forma predeterminada. Si desea apuntar a tipos MIME individuales, puede:
ExpiresByType imagen/gif “acceso más 5 horas 3 minutos”
Además, cuando hace clic en actualizar en el navegador, todas las solicitudes enviadas por el cliente son max-age = 0, lo que indica la operación de validación. Envíe una solicitud al servidor para verificar el caché y luego actualice el caché. obtenga 304 No modificado, lo que significa que no hay cambios.
04. Componentes Gzip Compresión Gzip
El formato Gzip es una tecnología de compresión muy común. Casi todos los navegadores tienen la capacidad de descomprimir el formato Gzip y la relación de compresión que puede comprimir es muy grande, con una tasa de compresión general del 85%. Compresión o no, puedes probarlo aquí.
05. Coloque las hojas de estilo en la parte superior. Coloque CSS en la parte superior.
Utilice la etiqueta LINK para colocar la hoja de estilo en el HEAD del documento para que los visitantes puedan ver el estilo completo del sitio web lo antes posible.
Las páginas HTML se representan paso a paso. Cuando los usuarios abren la página, debemos considerar la experiencia del usuario: la velocidad de apertura de la página web. El primer requisito para mostrar una página es HTML, y HTML se compone de DIV uno por uno, y CSS es la base de todo.
06. Coloque los scripts en la parte inferior. Coloque JS en la parte inferior.
Una vez renderizado el sitio web, puede configurar las funciones. Por supuesto, estos JS no deben afectar el rendimiento del contenido durante el proceso de carga.
Debido a que la página se representa gradualmente, se bloqueará el contenido debajo del script. La representación de la página no continuará hasta que el script haya terminado de cargarse. Colocación correcta
(1) En el peor de los casos: poner el guión en la parte superior. Bloqueará la representación de contenido posterior y la descarga posterior de componentes.
(2) En el mejor de los casos: coloque el guión al final. No impide que la página se renderice.
07. Evite las expresiones CSS Evite las expresiones CSS
Las expresiones CSS son terribles. Esto que solo es compatible con IE requiere una gran cantidad de cálculos cuando se ejecuta. Se volverá a calcular cada vez que mueva el mouse, pero a veces esto debe usarse para la compatibilidad del navegador.
08.Hacer JavaScript y CSS externos
Hablamos anteriormente sobre el almacenamiento en caché. Para algunos de los JS y CSS más comunes, podemos usar enlaces externos, como vincular archivos Jquery de Google.
09. Reducir las búsquedas de DNS Reducir las búsquedas de DNS
Reducir los recursos de llamadas externas al sitio web.
Internet encuentra servidores por dirección IP. DNS también tiene gastos generales. En circunstancias normales, el tiempo que tarda un navegador en encontrar una dirección IP de host determinada es de 20 a 120 ms. Para reducir el tiempo dedicado al proceso de búsqueda de DNS, es necesario adoptar algunas de las siguientes técnicas:
(1) caché DNS
Las búsquedas de DNS se pueden almacenar en caché para mejorar el rendimiento en la computadora del usuario, después de que se resuelva un nombre de host, la información de DNS correspondiente se almacenará en la caché de DNS del sistema operativo, lo que puede reducir el tiempo necesario para el uso posterior. Algunos otros navegadores también tienen las correspondientes funciones de almacenamiento en caché de DNS. Pero la cantidad de DNS almacenados en caché es limitada. Normalmente, el sistema operativo considera el valor TTL y el navegador ignora este valor y establece su propio tiempo.
(2) TTL
El almacenamiento en caché de DNS genera cierto consumo del sistema y la dirección IP del servidor no necesariamente permanece sin cambios. El servidor puede indicar durante cuánto tiempo se puede almacenar en caché el registro y el registro DNS devuelto por la búsqueda contiene un valor de tiempo de vida (TTL) que indica cuánto tiempo el cliente puede almacenar en caché el registro. Generalmente, se puede configurar en 1 día.
10. Minimizar JavaScript y CSS Reducir el tamaño de JS y CSS
Hay habilidades para escribir JS y CSS. Use la menor cantidad de código para lograr la misma función, reduzca los espacios en blanco, mejore la lógica, use abreviaturas, etc. Por supuesto, existen muchas herramientas que pueden ayudarlo a lograr esto.
11. Evite las redirecciones
Al escribir el enlace nuevamente, aunque solo hay una diferencia final "/" entre "http://xxx.com" y "http://xxx.com/", los resultados son diferentes. El servidor necesita dedicar tiempo. convierta el primer redireccionamiento al segundo y luego salte. Debe prestar atención a esto. También puede usar Alias o mod_rewrite o DirectorySlash en Apache para resolverlo.
Además, los usos de la redirección incluyen: conectar diferentes sitios web; rastrear las visitas al sitio web y embellecer las URL;
12. Eliminar scripts duplicados Eliminar scripts duplicados
El navegador no reconocerá ni ignorará el código que se llama repetidamente, pero lo calculará nuevamente, lo que por supuesto es un gran desperdicio.
13. Configurar ETags Configurar ETags
No sé qué pasó, pero lo eliminé en htaccess.
14.Hacer que Ajax sea cacheable en caché Ajax
Ajax responde en tiempo real. Antes de que el navegador reciba datos nuevos, los datos antiguos se almacenan en caché, lo que puede mejorar la eficiencia.
15. Vacíe el búfer anticipadamente Libere el búfer lo antes posible
Cuando un usuario realiza una solicitud de página, el servidor necesita entre 200 y 500 milisegundos para ensamblar el HTML, escribirlo entre el encabezado y el cuerpo y liberar el búfer. De esta manera, el encabezado del archivo se puede enviar primero y luego. el contenido del archivo se puede enviar para mejorar la eficiencia.
16. Utilice GET para solicitudes AJAX Utilice GET para solicitudes AJAX
El método Get solo interactúa con el servidor una vez (enviando datos), mientras que Post requiere dos interacciones (enviando encabezados y luego datos).
17. Componentes posteriores a la carga Componentes de carga diferida
Primero cargue los componentes necesarios para la inicialización de la página y luego cargue otros. El método de implementación específico puede ser "IFRAME oculto" o javascript. "YUI Image Loader" es un buen ejemplo.
18. Precargar componentes Precargar componentes
Cargar cosas que pueden usarse más adelante no entra en conflicto con la carga diferida. Su propósito es proporcionar una respuesta más rápida a solicitudes posteriores. Consulte la aplicación de sprites CSS en la página de inicio de Google.
19. Reducir la cantidad de elementos DOM Reducir la cantidad de elementos DOM
La estructura de página compleja significa tiempos de descarga y respuesta más largos, lo que resulta en una representación de página más lenta. Usar etiquetas de manera más razonable y eficiente para estructurar las páginas es un requisito previo para una buena interfaz.
20. Dividir componentes entre dominios
El objetivo principal es mejorar la capacidad de descarga paralela de los componentes de la página, pero tenga cuidado de no utilizar demasiados nombres de dominio, lo que provocará el desperdicio de las búsquedas de DNS mencionadas anteriormente. IE sólo puede tener dos solicitudes para el mismo dominio al mismo tiempo. Las implementaciones pueden utilizar redes CDN u otras redes informáticas distribuidas.
21. Minimizar el número de iframes Reducir el número de iframes
IFrame es un tabú para SEO y es necesario utilizar IFrame de forma más eficaz.
Ventajas de IFrame: bueno para descargar contenido lento de terceros, como anuncios, zona de pruebas de seguridad, scripts de descarga paralela
Desventajas de IFrame: incluso si está vacío, consumirá muchos recursos e impedirá la carga de la página, lo cual no es semántico.
22. No 404 No aparecen en la página 404
Las páginas 404 aparecen en el sitio en sí (no en los resultados de búsqueda). Las páginas 404 sin sentido afectarán la experiencia del usuario y consumirán recursos del servidor.
23. Reducir el tamaño de las cookies Reducir las cookies
Las cookies se intercambian entre el servidor y el navegador a través de encabezados de archivos, reduciendo el tamaño de las cookies tanto como sea posible y estableciendo un tiempo de vencimiento razonable, lo que puede mejorar en gran medida la eficiencia.
24. Utilice dominios sin cookies para los componentes Utilice nombres de dominio sin cookies para los componentes
Leer cookies para componentes estáticos es un desperdicio. Es una buena manera de utilizar otro nombre de dominio sin cookies para almacenar sus componentes estáticos, o solo puede almacenar el nombre de dominio con www en la cookie.
25. Minimizar el acceso DOM Reducir el número de accesos DOM
JS es muy lento para acceder al DOM, así que trate de no usar JS para configurar el diseño de la página.
26. Desarrollar controladores de eventos inteligentes Desarrollar controladores de eventos flexibles
Si se agregan demasiados elementos en el árbol DOM al controlador de eventos, la eficiencia de la respuesta definitivamente será baja. La herramienta de eventos YUI tiene un método onAvailable que puede ayudarlo a configurar de manera flexible el controlador de eventos DOM.
27. Elija <enlace> en lugar de @import. Utilice <enlace> en lugar de @import.
Usar @import en IE es lo mismo que usar <enlace> en la parte inferior de la página.
28. Evita los filtros Evita el uso de filtros.
Si necesita transparencia Alpha, no utilice AlphaImageLoader. Es ineficiente y solo se aplica a IE6 y versiones inferiores. Utilice imágenes PNG8. Si debe usarlo, agregue _filter para evitar afectar a los usuarios de IE7+.
29. Optimizar imágenes Optimizar imágenes
Convertir su GIF a PNG8 es una buena manera de reducir el tamaño y hay muchas formas de procesar sus imágenes JPG y PNG para lograr resultados de optimización.
30. Optimizar los sprites CSS Optimizar los sprites CSS
Organizar imágenes en CSS Sprites verticalmente y de la manera más compacta posible, y organizar imágenes con colores similares juntas lo más posible reducirá el tamaño de la imagen en sí y aumentará la velocidad de visualización de la imagen de la página.
31. No escale imágenes en HTML No escale imágenes en HTML
Utilice una imagen tan grande como desee, no sea perezoso.
32. Haga que favicon.ico sea pequeño y almacenable en caché. Reduzca el tamaño de favicon.ico y guárdelo en caché.
El ICO del navegador del sitio no debe cambiarse con frecuencia, por lo que debe almacenarse en caché durante mucho tiempo y es mejor controlarlo por debajo de 1K.
33. Mantenga los componentes por debajo de 25K
El iPhone no puede almacenar en caché componentes de más de 25K, y eso es antes de comprimirlos.
34. Empaquetar componentes en un documento de varias partes Empaquetar componentes en un documento de varias partes
Al igual que agregar un archivo adjunto a un correo electrónico, una solicitud HTTP es suficiente, pero esta técnica debe ser compatible con su proxy, algo que el iPhone no admite.
Imágenes en línea:
Utilice "datos: esquema de URL" para incrustar datos de imagen en la página real. Lo que normalmente vemos son: http, ftp, mailto y otros modos. De hecho, el modo data:URL se propuso ya en 1995. Significa que pequeños fragmentos de datos se integran directamente en la URL del enlace. El patrón es el siguiente: datos: [<tipo de medio>][;base64],<datos>
El primer parámetro indica el formato del archivo, como imagen/gif.
Lamentablemente, IE actualmente no admite este modo. Además, el tamaño de los datos también es limitado.
Declaración: El contenido proviene de Internet y se basa en los 34 artículos de Yahoo.