A medida que aumenta el ancho de banda, hay cada vez más objetos en las páginas web, por lo que acelerar la apertura de páginas web sigue siendo una cuestión importante. Hay tres formas de acelerar la velocidad de apertura de las páginas web: una es aumentar el ancho de banda de la red, la otra es optimizar la máquina local del usuario y la tercera es optimizar la página web hasta cierto punto por parte del diseñador del sitio web. Este artículo es desde la perspectiva de un diseñador de sitios web y comparte algunos consejos para optimizar la velocidad de carga de una página web.
1. Optimizar imágenes
Casi no hay página web sin imágenes. Si has experimentado la era de los gatos 56K, no te gustarán los sitios web con muchas imágenes. Porque cargar una página web de este tipo llevará mucho tiempo.
Incluso ahora, el ancho de banda de la red ha mejorado mucho y los gatos de 56K se están desvaneciendo gradualmente. Todavía es necesario optimizar las imágenes para acelerar las páginas web.
La optimización de imágenes incluye reducir la cantidad de imágenes, reducir la calidad de la imagen y utilizar formatos adecuados.
1. Reduzca la cantidad de imágenes: elimine las imágenes innecesarias.
2. Reduzca la calidad de la imagen: si no es necesario, intente reducir la calidad de la imagen, especialmente en formato jpg. Una reducción del 5% en la calidad puede no parecer un gran cambio, pero el cambio en el tamaño del archivo es relativamente grande.
3. Utilice el formato adecuado: consulte el siguiente punto.
Por lo tanto, debes editar la imagen antes de cargarla. Si crees que Photoshop es demasiado problemático, puedes probar algunas herramientas de edición de imágenes en línea. ¿Demasiado vago para editar pero quieres tener efectos especiales en tus imágenes? Puede intentar llamar a javascript para lograr efectos de imagen.
2. Selección de formatos de imagen.
Generalmente se utilizan tres formatos de imagen en las páginas web, jpg, png y gif. Los indicadores técnicos específicos de los tres formatos no son el contenido de este artículo. Se utiliza cuando. Para reducir el tiempo de carga de las páginas web.
1. JPG: Generalmente se utiliza para mostrar trabajos fotográficos de paisajes, personas y fotografías artísticas. A veces se utiliza en capturas de pantalla de computadora.
2. GIF: proporciona menos colores y se puede utilizar en lugares donde los requisitos de color no son altos, como logotipos de sitios web, botones, emoticones, etc. Por supuesto, una aplicación importante de los gif son las imágenes animadas. Como un cuadro de reflejo hecho con Lunapic.
3. PNG: El formato PNG puede proporcionar un fondo transparente y es un formato de imagen especialmente inventado para la visualización de páginas web. Generalmente se utiliza en páginas web que requieren una visualización de fondo transparente o requisitos de alta calidad de imagen.
3. Optimice CSS
Las hojas de estilos CSS en cascada hacen que las páginas web se carguen de manera más eficiente y mejoren la experiencia de navegación. Con CSS, se puede eliminar el diseño de la tabla.
Pero a veces usamos algunas declaraciones más prolijas al escribir CSS, como esta oración:
margin-top: 10px;
margen derecho: 20px;
margen inferior: 10px;
margin-left: 20px;
puedes simplificarlo a:
margin: 10px 20px 10px 20px;
o esta oración:
＜p class="decorated">Un párrafo de texto decorado＜/p>
＜p class="decorated">Segundo párrafo＜/p>
＜p class="decorated">Tercer párrafo＜/p>
＜p class="decorated">El cuarto párrafo＜/p>
se puede incluir con div:
＜div class="decorated">
＜p>Un párrafo de texto decorado＜/p>
＜p>Segundo párrafo＜/p>
＜p>Tercer párrafo＜/p>
＜p>Cuarto párrafo＜/p>
＜/div>
Simplificar CSS puede eliminar atributos redundantes y mejorar la eficiencia operativa. Si es demasiado vago para simplificar el CSS después de escribirlo, puede utilizar algunas herramientas CSS simplificadas en línea, como CleanCSS
4. Agregue una barra diagonal después de la URL
. Algunas URL, por ejemplo, cuando el servidor recibe dicha solicitud de dirección. Cuesta tiempo determinar el tipo de archivo en esta dirección. Si la web es un directorio, también puede agregar una barra diagonal adicional después de la URL para cambiarla a /, de modo que el servidor pueda saber claramente de un vistazo que desea acceder al índice o al archivo predeterminado en el directorio, ahorrando así tiempo de carga.
5. Marcar el alto y el ancho
es muy importante, pero mucha gente siempre lo ignora por pereza u otros motivos. Cuando agrega imágenes o tablas a una página web, debe especificar su alto y ancho, es decir, los parámetros de alto y ancho. Si el navegador no encuentra estos dos parámetros, debe calcular el tamaño mientras descarga la imagen. Si hay muchas imágenes, el navegador debe ajustar la página constantemente. Esto no sólo afecta a la velocidad, sino que también afecta a la experiencia de navegación.
El siguiente es un código de imagen relativamente amigable:
<img id="moon" height="200" width="450" src=" />
Cuando el navegador conoce los parámetros de alto y ancho, incluso si la imagen no se puede mostrar temporalmente, la página también liberará espacio para imágenes y luego continuará cargando el siguiente contenido. Como resultado, el tiempo de carga es más rápido y la experiencia de navegación es mejor.
6.
Reduzca las solicitudes http.
página web, el navegador emitirá muchas solicitudes de objetos (imágenes, scripts, etc.), dependiendo del retraso de la red, cada objeto se retrasará. Si hay muchos objetos en la página web, esto puede llevar mucho tiempo.
Porlo
tanto, ¿cómoreducir
la carga en las solicitudes http?
2. Combine dos imágenes adyacentes en una.
3. Fusione CSS.
Mire el siguiente código.
＜enlace rel="hoja de estilo" tipo="texto/css" href="/body.css" />
＜enlace rel="hoja de estilo" tipo="texto/css" href="/side.css" />
＜link rel="stylesheet" type="text/css" href="/footer.css" />
Podemos combinarlo en uno:
＜link rel="stylesheet" type="text/css" href="/style .css" />
reduciendo así las solicitudes http.
7. Otros consejos (agregados por el traductor)
1. Elimina complementos innecesarios.
2. Si hay widgets de otros sitios web integrados en la página web, si tiene la opción, asegúrese de elegir el que tenga mayor velocidad.
3. Intente utilizar imágenes en lugar de flash, lo que también es bueno para el SEO.
4. Si algún contenido puede volverse estático, hágalo estático para reducir la carga en el servidor.
5. El código estadístico se coloca al final de la página.