El ancho de banda de Internet es cada vez más amplio, lo que parece haber dado un salto cualitativo en la velocidad de carga de las páginas web. De hecho, este no es el caso, porque con el aumento del ancho de banda, hay cada vez más objetos en la página web, por lo que acelerar la velocidad de apertura de la página 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. Solo necesitamos saber qué formato se debe utilizar para reducir el tiempo de carga de la página 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:
margen-superior:
10px;
margen-derecho: 20px;
margen-inferior: 10px;
margen
-izquierda: 20px;
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 en un 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.
Para algunas URL, como "www.kenengba.com/220", cuando el servidor recibe dicha solicitud de dirección, lleva tiempo determinar el tipo de archivo de esta dirección. Si 220 es un directorio, también puede agregar una barra diagonal adicional después de la URL para que sea www.kenengba.com/220/ , 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 amigable:
<img id=”moon” height=”200″ width=”450″ src=”” <p class=”pictext”>alt=”moon image” />
</p>
Cuándo el navegador conoce los parámetros de alto y ancho, incluso si la imagen no se puede mostrar temporalmente, dejará espacio para la imagen en la página y continuará cargando el siguiente contenido. El resultado son tiempos de carga más rápidos y una mejor experiencia de navegación.
6. Reducir las solicitudes http
Cuando un espectador abre una página web, el navegador emitirá muchas solicitudes de objetos (imágenes, scripts, etc.) Dependiendo del retraso de la red, la carga de cada objeto se retrasará. Si hay muchos objetos en la página, esto puede llevar mucho tiempo.
Por lo tanto, es necesario reducir la carga de las solicitudes http. ¿Cómo reducir la carga?
1. Elimina algunos objetos innecesarios.
2. Combine dos imágenes adyacentes en una.
3. Fusionar CSS
Eche un vistazo al siguiente código. Es necesario 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 combinarlo en uno:
< link rel= ”stylesheet” type=”text/css” href=”/style.css” />
Reduciendo así las solicitudes http.
7. Otros consejos
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.