En general, hemos visto la mayor parte del tiempo cuando la página web se carga a una velocidad lenta debido al tiempo dedicado a descargar las cookies y los activos, como imágenes, hojas de estilo y secuencias de comandos, etc., lo que a su vez reduce la experiencia general del usuario junto con el tráfico en el sitio. Este problema se puede resolver mediante la optimización de la página web que no solo brinda un rendimiento eficiente, sino que también ayuda a que el sitio responda, además de reducir la carga en los servidores web y la conexión a Internet. Por lo tanto, optimizar el sitio web puede ayudar en la optimización de motores de búsqueda (SEO) que mejorará la clasificación (visibilidad) de un sitio web en los motores de búsqueda. Esta técnica de optimización puede ayudar en sitios grandes, complejos y voluminosos.
En este artículo, vamos a aprender cómo mantener los archivos de tamaño pequeño minimizando la cantidad de archivos y reduciendo las búsquedas de dominio. Además, cómo optimizar el rendimiento de la página web mediante el uso de archivos CSS y JavaScript externos, minimizando y comprimiendo el tamaño de las imágenes y los activos SVG y el uso de <script async> y <script defer> en JavaScript.
Discutiremos todos los aspectos para optimizar el sitio y los entenderemos a través de los ejemplos.
Mantenga el tamaño pequeño: mantener el tamaño de página pequeño puede ayudar a reducir el peso de la página, lo que incluye la eliminación de espacios en blanco innecesarios, comentarios adicionales, uso de secuencias de comandos externas en lugar de archivos CSS en línea.
HTML
<!DOCTYPE html> <html> <head> <title> Page Title </title> </head> <body> <h2> Welcome To GFG </h2> <p> Hello there!. </p> </body> </html>
Escribir código desordenado (agregar muchos espacios en blanco, comentarios o elementos innecesarios) hace que el rendimiento de su página web sea más lento. Agrega peso adicional a las páginas y, por lo tanto, se vuelven más pesadas y hacen que el sitio web se cargue más lentamente. Algunas herramientas pueden ayudarte a deshacerte de ese código superfluo, como HTML Tidy, o consulta las herramientas recomendadas por Google .
Podemos evitar el uso de atributos HTML en línea, que pueden reemplazarse fácilmente por propiedades CSS como:
alinear: este atributo ha sido reemplazado por una combinación de propiedades CSS: alineación de texto, flotación y alineación vertical.
HTML
<h2>Welcome To GFG</h2> <!--Don't write this way--> <p align="left">Bad code.</p>
Esto puede ser reemplazado por el siguiente código:
HTML
<html>
<head>
<style>
.left {
text-align: left;
}
</style>
</head>
<body>
<h2>Welcome to GFG</h2>
<div class="left">
<p>
Use the text-align property
to align the text
</p>
</div>
</body>
</html>
bgcolor y fondo: en lugar de usar estos atributos para aplicar imágenes y color de fondo, use las propiedades CSS: imagen de fondo y color de fondo.
HTML
<!--Don't write this way--> <body bgcolor="green"> <h2>Welcome To GFG</h2> <p>Bad code.</p> </body>
El código preferido:
HTML
<html>
<head>
<style>
body {
background-color: green;
}
</style>
</head>
<body>
<h1>Welcome To GFG</h1>
<p>
Use the background-color property
to set the color of the background
</p>
</body>
</html>
alto y ancho : se puede lograr el mismo resultado usando propiedades CSS que tienen los mismos nombres.
HTML
<h2>Welcome To GFG</h2> <!--Don't write this way--> <img src="img.jpg" alt="A picture" width="500" height="600"> <p>Bad code.</p>
El código preferido:
HTML
<html>
<head>
<style>
.GFG {
width: 500px;
height: 600px;
}
</style>
</head>
<body>
<h3>
Use the width and height property
to set the height and weight of an element.
</h3>
<img class="GFG" src="img.jpg">
</body>
</html>
borde: aplique el borde usando la propiedad CSS-border, en lugar de usar este atributo HTML.
HTML
<h1>Welcome To GFG</h1> <p>Bad Code</p> <!--Don't write this way--> <img src="img.png" alt="A Picture" border="5">
El código preferido:
HTML
<html>
<head>
<style>
img {
border: 5px solid #555;
}
</style>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>
Use the border property
to add a border to an image:
</p>
<img src="img.jpg" alt="A picture">
</body>
</html>
Minimizar la cantidad de archivos: más archivos significa que se requieren más conexiones HTTP para descargar una página web, por lo tanto, llevará más tiempo cargar. Por ejemplo, si está utilizando demasiadas imágenes en su página web, cada archivo de imagen necesitará una conexión al servidor. Es por eso que demasiados archivos no solo aumentan el tamaño de la carga, sino que también pueden ahogar el servidor al enviar más requests HTTP de las permitidas.
No siempre es posible reducir el número de imágenes. En ese caso, puede usar sprites de imagen CSS que combinan varias imágenes en un solo archivo de imagen y eso reduce la cantidad de requests HTTP. Puede usarlo cuando está usando diferentes partes de una sola imagen simplemente ajustando las dimensiones y posiciones. En el caso de todas las imágenes de fondo, este truco no funcionará.
Ejemplo: diferentes partes de esta imagen única se pueden usar en diferentes lugares. Suponga que desea usar solo el primer símbolo en alguna parte.
Podemos usar el single como en el siguiente ejemplo
HTML
<!DOCTYPE html>
<html>
<head>
<title>Image Sprites</title>
<style>
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li,
#navlist a {
height: 250px;
display: block;
}
.gfg {
width: 550px;
left: 0px;
background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20211118183409/gfg.jpg');
}
.gfg1 {
width: 60px;
left: 0px;
background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20211118183409/gfg.jpg');
}
}
</style>
</head>
<body>
<ul id="navlist">
<li class="gfg">
<a href="#"></a>
</li>
<li class="gfg1">
<a href="#"></a>
</li>
</ul>
</body>
</html>
Producción:
Reducción de las búsquedas de dominio: Cada dominio de servidor por separado cuesta tiempo en las búsquedas de DNS. Cuantas más URL agreguemos a nuestro archivo HTML, más búsquedas de ADN adicionales serán necesarias. Podemos verificar esto usando la herramienta de prueba de velocidad del sitio web de Pingdom. Estas búsquedas de DNS agregan más tiempo al tiempo de carga, ya que no se puede cargar nada más hasta que finalicen las búsquedas de DNS.
Recuerde, DNS solo consulta un dominio en particular una vez. Por lo tanto, solo los tiempos de búsqueda de DNS únicos se agregan al tiempo de carga.
Nota: cuando ejecuta su sitio web a través de Pingdom más de una vez, almacena en caché el DNS ya que ya conoce la información de IP. Entonces, cuando prueba su sitio web por segunda vez, encuentra su sitio web más rápido que antes.
Uso de CSS externo y JavaScript: cada vez que el navegador encuentra la etiqueta <script>, deja de procesar el HTML e inicia una instancia del intérprete de JavaScript para compilar el código JavaScript. Lo hace cada vez que ve la etiqueta <script> y solo procesa el HTML después de terminar eso. Lo mismo sucede en el caso del CSS en línea, se carga en la etiqueta <head> de la página HTML. Por lo tanto, se procesa más rápido. Sin embargo, mostrar todo el CSS en línea ralentiza la velocidad de carga, ya que el visitante ahora tiene que descargar el CSS en cada vista de página en lugar de descargarlo una vez desde el servidor. La mejor práctica es usar CSS y JavaScript externos y usar scripts en línea solo cuando sean necesarios.
Minimizar y comprimir el tamaño de las imágenes y los activos SVG: la mayoría de las aplicaciones de dibujo SVG producen SVG que contienen una gran cantidad de metadatos innecesarios. Se pueden eliminar configurando el servidor y aplicando compresión gzip. La creación de un código SVG resultante más limpio también ayuda a que la página se cargue más rápido.
Una imagen de alta resolución tarda mucho en cargarse. Cambia el tamaño de las imágenes antes de usarlas en tu página web. Puede usar cualquier herramienta de manipulación de imágenes para eso, como Photoshop, GIMP, CorelDRAW, etc. Los sitios web de cambio de tamaño de imágenes en línea también son efectivos.
Uso de <script async> y <script defer> en JavaScript: el navegador dejará de analizar HTML cada vez que vea una etiqueta <script>. Por lo tanto, si está utilizando un servidor lento y un script pesado, esto afectará la velocidad de carga de la página. Es por eso que generalmente agregamos todos los scripts antes del final de la etiqueta del cuerpo. De esta manera, el navegador generará primero el DOM y luego todos los scripts se ejecutarán uno tras otro.
Script defer : cuando agregamos el <script defer>, el navegador descargará los scripts incluidos en la página, pero los ejecutará solo después de que se complete el análisis de HTML. El atributo defer garantiza la ejecución de los scripts en el mismo orden en que aparecen en el documento.
Script asíncrono : el atributo asíncrono se usa para decirle al navegador que el archivo de script se puede ejecutar de forma asíncrona. Significa que el analizador no tiene que detenerse tan pronto como llega a la etiqueta del script para buscar y ejecutar. Después de descargar la secuencia de comandos, el navegador puede ejecutar la secuencia de comandos, pero la búsqueda se puede realizar en paralelo con el análisis del documento. Una vez que se completa la descarga, el analizador se detiene para que se ejecute el script. Los scripts asincrónicos se ejecutan tan pronto como se carga el script, por lo que, a diferencia de defer, el orden de los scripts puede no ser el mismo.
Puede usar aplazar cuando sus scripts dependen unos de otros y el orden de ejecución es importante para usted. Para scripts independientes, se puede usar el atributo asíncrono.
Nota: si está escribiendo sus scripts justo antes de la etiqueta del cuerpo, entonces no tiene que usar async o diferir, ya que no queda mucho análisis para bloquear. Sin embargo, por el motivo que sea, sus scripts se colocan en otro lugar, puede usar estos atributos.