Con el aumento del ancho de banda, hay más y más objetos en la página web, por lo que sigue siendo un tema importante para acelerar la apertura de las páginas web. Hay tres formas de acelerar la apertura de las páginas web: una es aumentar el ancho de banda de la red, el segundo es optimizar al usuario en la máquina local, y el tercero es optimizar las páginas web de los diseñadores del sitio web. Este artículo se basa en la perspectiva de un diseñador de sitios web y comparte algunos consejos para optimizar la velocidad de carga de la página web.
1. Optimizar imágenes
Casi no hay página web sin imágenes. Si ha experimentado la edad de 56k gatos, definitivamente no le gustan los sitios web con muchas imágenes. Porque cargar dicha página web llevará mucho tiempo.
Incluso ahora, el ancho de banda de la red ha mejorado mucho, y 56k Cat se ha desvanecido gradualmente, y 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 usar formatos apropiados.
1. Reduzca el número de imágenes: elimine imágenes innecesarias.
2. Reduzca la calidad de la imagen: si no es muy necesario, trate de reducir la calidad de la imagen, especialmente el formato JPG.
3. Use el formato apropiado: vea el siguiente punto.
Por lo tanto, antes de cargar imágenes, debe editar las imágenes. ¿Eres demasiado vago para editar pero quieres que las imágenes tengan efectos especiales? Puede intentar usar llamar a JavaScript para implementar efectos especiales de imagen.
2. Selección de formato de imagen
Hay tres formatos de imagen generalmente utilizados en las páginas web, a saber, JPG, PNG y GIF. Tiempo de la página web.
1. JPG: fotografías que generalmente se usan para mostrar paisajes, personajes y fotos artísticas. A veces también se usa en capturas de pantalla de computadora.
2. GIF: se proporcionan menos colores y se pueden usar en algunos lugares donde no hay una gran demanda de color, como logotipos, botones, expresiones, etc. Por supuesto, una aplicación importante de GIF son las imágenes de animación. Como una imagen de reflexión hecha con lunapic.
3. PNG: el formato PNG puede proporcionar un fondo transparente y es un formato de imagen especialmente inventado para la pantalla de la página web. Generalmente se usa en páginas web que requieren visualización de fondo transparente o requieren una alta calidad de imagen.
3. Optimizar CSS
Las hojas de estilo de superposición CSS hacen que las páginas web sean más eficientes para cargar y mejorar la experiencia de navegación. Con CSS, el método de diseño de formulario puede retirarse.
Pero a veces, cuando escribimos CSS, usamos algunas oraciones más prolongadas, como esta oración:
margen-top: 10px;
margen-derecha: 20px;
margen-fondo: 10px;
margen-izquierda: 20px;
Puede simplificarlo para:
margen: 10px 20px 10px 20px;
O esta oración:
＜ p class = "decorado"> un párrafo de texto decorado ＜/p>
＜ p class = "decorado"> segundo párrafo ＜/p>
＜ p class = "decorado"> tercer párrafo ＜/p>
＜ p class = "decorado"> Forth Párrafo ＜/P>
Puedes usar Div para incluir:
＜ Div class = "Decorated">
＜ P> Un párrafo de texto decorado ＜/P>
＜ P> Segundo párrafo ＜/P>
＜ P> Tercer párrafo ＜/P>
＜ P> Forth Párrafo ＜/P>
＜/div>
CSS simplificado puede eliminar atributos redundantes y mejorar la eficiencia operativa. Si es demasiado vago para simplificar después de escribir CSS, puede usar algunas herramientas CSS simplificadas en línea, como CleanCSS.
4. Agregue un corte en la parte posterior de la URL
Algunas URL, por ejemplo, cuando un servidor recibe dicha solicitud de dirección, lleva tiempo determinar el tipo de archivo de la dirección. Si la Web es un directorio, también podría agregar una barra de corte adicional a la URL para hacerlo / para que el servidor pueda saber claramente para acceder al índice o al archivo predeterminado en el directorio, ahorrando así el tiempo de carga.
V. Indicar altura y ancho
Esto es importante, pero muchas personas siempre lo ignoran debido a la pereza u otras razones. Cuando agrega imágenes o tablas en una página web, debe especificar su altura y ancho, es decir, los parámetros de altura y ancho. Si el navegador no encuentra estos dos parámetros, necesita calcular el tamaño al descargar la imagen. Esto no solo afecta la velocidad, sino que también afecta la experiencia de navegación.
Aquí hay un código de imagen relativamente amigable:
＜ img id = "Moon" Height = "200" Width = "450" src = " />
Cuando el navegador conoce los parámetros de altura y ancho, incluso si la imagen no se puede mostrar por el momento, la imagen se liberará en la página y luego el contenido posterior continuará cargando. Por lo tanto, el tiempo de carga es más rápido y la experiencia de navegación es mejor.
6. Reduzca las solicitudes HTTP
Cuando un navegador abre una página web, el navegador emitirá muchas solicitudes de objetos (imágenes, scripts, etc.). Si hay muchos objetos en la página web, esto puede llevar mucho tiempo.
Por lo tanto, necesitamos reducir la carga de las solicitudes HTTP. ¿Cómo reducir la carga?
1. Retire algunos objetos innecesarios.
2. Combine las dos imágenes cercanas en una.
3. Fusionar CSS
Eche un vistazo al siguiente código y debe cargar tres CSS:
＜ Link rel = "Stylesheet" type = "text/css" href = "/body.css"/>
＜ Link rel = "stylesheet" type = "text/css" href = "/side.css"/>
＜ Link rel = "Stylesheet" type = "text/css" href = "/footer.css"/>
Podemos sintetizarlo en uno:
＜ Link rel = "Stylesheet" type = "text/css" href = "/style.css"/>
Esto reduce las solicitudes HTTP.
7. Otros consejos (agregados por el traductor)
1. Retire los complementos innecesarios.
2. Si incorpora widgets de otros sitios web en la página web, si tiene espacio para elegir, debe elegir uno rápido.
3. Intente usar imágenes en lugar de flash, que también es beneficioso para el SEO.
4. Si algún contenido puede ser estático, será estático reducir la carga del servidor.
5. El código estadístico se coloca al final de la página.