Optimización de la velocidad del sitio web

Hay muchos factores que afectan la velocidad de carga de un sitio web, e incluso si tiene el alojamiento más rápido posible si su sitio no está optimizado adecuadamente, puede ser en vano ya que los visitantes son los dueños de Internet y la velocidad de la computadora se convertirá en el factor limitante, por lo que es importante optimizar su sitio para que sus visitantes siempre obtengan la mejor experiencia posible.

A continuación, se muestran algunas cosas sencillas que puede hacer para mejorar el rendimiento de sus sitios web.

Optimiza tus imágenes.

Las imágenes suelen ser los archivos más grandes de un sitio web y tardan más en cargarse para un visitante, siempre optimice sus imágenes, especialmente las imágenes JPG que, si no se optimizan, pueden ser mucho más grandes de lo necesario. Una imagen JPG se puede comprimir significativamente sin una pérdida perceptible de calidad; por lo general, un nivel de alrededor del 80% es bueno y la imagen resultante puede ser tan pequeña como el 10% del tamaño original incluso con imágenes más pequeñas. Aquí hay un ejemplo.

JPG no optimizado con una calidad del 100% [62 KB]

JPG optimizado con una calidad del 80% [9 KB]

Eso ahorró 53 KB para una imagen pequeña sin pérdida perceptible de calidad, por lo que imagina cuánto podrías ahorrar optimizando todos los jpgs de tu sitio o una imagen de banner grande de 800x250 píxeles.

Otro no es no usar nunca html para cambiar el tamaño de una imagen en la página, todo lo que hace es cambiar las dimensiones visibles de la imagen, pero el tamaño del archivo no se modifica e incluso agrega una pequeña cantidad de procesamiento adicional. tiempo para el navegador del cliente. El tamaño html (valores de ancho y alto de la etiqueta IMG) siempre debe coincidir con las dimensiones reales de la imagen.

Otra cosa que se debe evitar es mostrar miniaturas de imágenes de imágenes mucho más grandes, pero en lugar de usar dos imágenes, una miniatura y una imagen de tamaño completo, el sitio simplemente cambia el tamaño de la imagen de tamaño completo usando HTML, lo que da como resultado una gran cantidad de imágenes de baja calidad / gran tamaño que toman mucho tiempo para descargar y ver. Son muy evidentes los sitios de comercio electrónico donde es común tener listas de elementos con imágenes en miniatura.

Comprime tu código

La mayoría de los servidores le permitirán comprimir su código html / css / js para su transmisión sobre la marcha y si está utilizando muchos archivos grandes css o js, ​​lo cual es común en muchos sitios web basados ​​en CMS o aquellos que usan mucho jquery, entonces comprima el código. puede ser tan importante como la compresión de imágenes. Puede habilitar fácilmente la compresión de código para archivos de texto comunes.

En Linux, agregue lo siguiente al final de su archivo public_html / .htaccess (cree uno si no tiene uno)

# START EXPIRES CACHING #
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"
</IfModule>
# END EXPIRES CACHING #
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# END Cache-Control Headers
#Disable Etags
<IfModule mod_headers.c>
   Header unset Etag
   Header set Connection keep-alive
</IfModule>
FileETag None

En Windows: añada o modifique lo siguiente en su archivo wwwroot/web.config dentro del nodo <system.webServer>.

<caching>
<profiles>
<add extension=".js" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
<add extension=".css" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
<add extension=".ttf" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
<add extension=".otf" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
<add extension=".htm" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
<add extension=".html" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
<add extension=".woff" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
<add extension=".woff2" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
<add extension=".png" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
<add extension=".jpg" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
<add extension=".jpeg" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
<add extension=".gif" policy="CacheUntilChange" kernelCachePolicy="DontCache" />
</profiles>
</caching> 

Habilitar el almacenamiento en caché de sitios web

Una de las otras cosas importantes que ralentiza un sitio web son las páginas dinámicas. Estas son páginas que tienen contenido cargado desde una base de datos, por lo que si está utilizando un CMS como Wordpress o Joomla, que son usuarios de recursos notoriamente altos, es de vital importancia que habilite algún tipo de tecnología de almacenamiento en caché de páginas.

Joomla viene con su propio sistema de caché, solo habilítelo desde la configuración global. Para wordpress, un buen módulo de almacenamiento en caché es SuperCache, si está utilizando algún otro CMS, consulte con el codificador. En la mayoría de los casos, el almacenamiento en caché simplemente crea versiones HTML estáticas de sus páginas dinámicas para que se sirvan en su lugar, de modo que el servidor no tenga que ir siempre a la base de datos para buscar el contenido de la página, estos se actualizan cuando se cambia su contenido.

Ultima palabra

No olvide que al optimizar sus sitios web puede disminuir los tiempos de carga de su página, haciendo que su sitio sea mucho más rápido y manteniendo a sus visitantes realmente felices. También puede reducir considerablemente el uso de ancho de banda, lo que le permite ahorrar dinero y, por lo tanto, vale la pena dedicar un poco de tiempo a obtener excelentes resultados.

  • 10 Los Usuarios han Encontrado Esto Útil
¿Fue útil la respuesta?

Artículos Relacionados

Cómo asociar un dominio en el espacio web

Normalmente, es mejor asignar el nombre de dominio, los servidores de nombre de su proveedor de...

¿Cuál es la diferencia entre GB y Gb o MB y Mb?

Es importante al comparar diferentes ofertas de alojamiento, especialmente al elegir un plan de...

¿Qué es un e-mail "alias" o "adelante" y para qué? (Alojamiento Linux)

El correo electrónico es una dirección de correo electrónico de reenvío que existe sólo para...

Cómo solicitar un presupuesto a una agencia web

Al solicitar un presupuesto para la creación de un sitio web a una agencia web, debe definir sus...

¿Qué es un alias de correo electrónico o hacia adelante y lo que es? (Alojamiento Windows)

¿Qué es un alias de correo electrónico y lo que necesita? (Alojamiento Windows)Un alias de correo...