Cómo acelerar y medir la carga de nuestra web

Cómo acelerar y medir la carga de nuestra web

Hola a tod@s y bienvenidos a un nuevo artículo de Escola Espai, en él os vamos a explicar cómo acelerar y medir la carga de nuestra web.

A medida que nuestra web va creciendo la vamos cargando con más imágenes, plugins de todo tipo, tipografías varias, librerías externas, etc… Evidentemente cuantos más recursos cargados más tiempo de carga. Una web lenta nos perjudica ya que a los buscadores las penalizan por ello bajando posiciones en las búsquedas. Además los usuarios no suelen ser pacientes y optarán por páginas más rápidas que la nuestra.

Afortunadamente hay algunas pautas sencillas a seguir para evitar estos problemas y conseguir más rapidez en la carga de nuestra web.

Aquí tenéis tenéis una pequeña introducción a alguna de ellas:

OPTIMIZAR LAS IMÁGENES

Puede parecer obvio, pero mucha gente se olvida de esta tarea tan básica.
Hay una diferencia abismal en usar una imagen de tamaño medio a una imagen completamente optimizada.
La optimización de imágenes no solo se refiere a reducir su tamaño, sino que también eliminamos metadatos tipo con que cámara fue tirada, fechas, etc…

Hay muchísimas herramientas y plugins para realizar esta tarea. Algunas de ellas: JPEGmini, Yahoo! Smush.it, ImageOptim, tinypng.comSuperPNG

LA COMPRESIÓN GZIP

Tan solo con activar la compresión Gzip puede ahorrarte hasta un 50% de carga en tu web. Todo el mundo sabe que comprimir archivos significa que estos pesen menos y precisamente es eso lo que la compresión GZIP hace… comprimir los archivos antes de enviarlos.

En un servidor Apache, activar la compresión GZIP de archivos CSS, Javascript, XML, HTML, etc… es tan fácil como añadir las siguientes líneas de código al archivo .htaccess ubicado en el directorio raíz de tu web.

<IfModule mod_rewrite.c>
# comprimiendo archivos de texto, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

Esto no sólo ayuda a la velocidad de tu página web, sino que también reduce el ancho de banda del servidor y, si pagas por ancho de banda, te puede ahorrar bastante dinero haciendo esto.
Podéis comprobar la compresión GZIP de vuestro sitio en el siguiente enlace

MINIFICAR (Minify)

Se trata de que un fichero sea menos pesado modificando ciertos elementos: espacios innecesarios, tabulaciones, comentarios, etc. Aunque parezca que se ahorra poco tamaño con esto, una web tiene muchísimos archivos, si de cada archivo conseguimos bajar un poquito su tamaño será más que suficiente para que la velocidad de la web aumente considerablemente. Recordad que todo cuenta!

Aquí algunas herramientas online para conseguirlo en un par de clics: Codekit, Prepos, JSCompress, CSSminifier.

CONCATENAR ARCHIVOS CSS Y JAVASCRIPT

Seguro que usas plugins, frameworks, etc… tendrás varios archivos de javascript y css. Esto significa que el navegador tendrá que hacer tantas peticiones al servidor como dichos archivos haya.
Sería genial que un programa se encargara de concatenarlas en un único fichero js y css y así reducir el numero de peticiones no?
Herramientas tales como Gulp o Grunt que funcionan bajo node.js nos facilitan esta tarea.

USAR LA CACHÉ

Si algo ya se ha bajado, porque volverlo a bajar?
Este método es uno de de los mas recomendados y prácticos para lograr que nuestra web, blog, tienda, etc… cargue más rápidamente.
Partiendo de que todos los navegadores poseen una caché (memoria), se trata de configurar el archivo .htacces de nuestro servidor Apache a través de los parámetros Expires o Cache-Control para informarle a este sobre el tiempo que puede ser almacenados diferentes tipos de archivos de nuestra página.
De los dos parámetros: Expires y Cache-Control solo es posible utilizar uno de los dos, no se puede emplear los dos simultáneamente.
Google recomienda el uso del encabezado Expires en vez de Cache-Control por ser soportado de forma más amplia.

Aquí un posible código usando Cache-Control en nuestro .htacces

# 1 AÑO
<filesmatch "\.(ico|pdf|flv)$"="">
Header set Cache-Control "max-age=29030400, public"

# 1 SEMANA
<filesmatch «\.(jpg|jpeg|png|gif|swf)$»=»»>
Header set Cache-Control «max-age=604800, public»

# 2 DIAS
<filesmatch «\.(xml|txt|css|js)$»=»»>
Header set Cache-Control «max-age=172800, proxy-revalidate»

# 1 MINUTO
<filesmatch "\.(html|htm|php)$"="">
Header set Cache-Control "max-age=60, private, proxy-revalidate"

Si lo deseais podeis ampliar información en este enlace.

LOS CDN

Es la abreviatura de Content Delivery Network (Red de distribución de contenido) y es una colección de servidores web distribuidos alrededor de múltiples localizaciones para distribuir contenido más eficientemente
Hay varios CDN gratuitos, entre ellos el de Google, el de Microsoft y el de Edgecast.
Tambien hay  CDN de pago. Algunos puede que te suenen como Akamai Amazon CloudFront
La idea es que en vez de cargar las librerías desde tu servidor de hosting, las cargues directamente desde el CDN. De este modo cuando se haga la petición se cargará la librería (o librerías solicitadas) desde el nodo mas cercano al cliente con lo que se cargará más rápido.

Si ,por ejemplo, utilizas Bootstrap o Jquery puedes obtener los archivos desde un CDN

USAR SPRITES

En el Curso de HTML5&CSS3 ya hablamos de los sprites y su importancia.

Podemos tener decenas de imagenes en una página web que se traducen en decenas de peticiones HTTP. La tecnica de los sprites consiste en crear una única imagen grande que incluya todas las imágenes individuales y utilizar las propiedades CSS de las imágenes de fondo (background-image, background-position) para mostrar cada imágen.

El problema de los sprites es que puede llegar a ser muy pesado de crearlos. Afortunadamente tenemos herramientas online que nos ayudan a agilizar el trámite como CSS Sprite Generator y Stitches entre otros.

 

Para terminar solo nos queda saber como podemos medir la velocidad de carga de nuestra web. Aquí teneis algunas herramientas gratuitas:

Dediros que para mi la mejor es la primera, és una herramienta de Google, que además de ofrecer informes detallados, nos da consejos útiles con los cambios que deberíamos realizar para optimizar la velocidad de carga.

Espero que os sirva!
Salud@s

5Comentarios

  • Jayde Tyson
    17/08/2020

    Una cosa, debo decir, que la mayoría de la gente ignora. Es que el SEO no es solo optimizar un solo factor. Ha puesto todos sus esfuerzos en cada factor, entonces obtendrá los resultados. Vale la pena considerar los puntos que destacó aquí. La implementación de cada punto lo ayudará a obtener una mejor clasificación en los resultados de búsqueda de Google. Para optimizar su página, también puede obtener las herramientas desde el siguiente enlace https://url-decode.com/cat/. Donde encontrarás herramientas relacionadas con la minificación, optimización de imágenes y muchas más.

  • Vespertilo
    27/11/2016

    Con este truco las páginas van super rápidas.

    Primero hay que dividir todas las imágenes grandes con Photoshop en dos o más imágenes de menos de 256Kb cada una (si tienen más tamaño el truco no funciona). Después hay que instalar la versión gratuita de VCLServer para cachear todas estas imágenes (se descarga desde http://www.vclserver.com). Como VCLServer no sabe que las imágenes son trozos de una imagen más grande lo cachea todo, así nos saltamos el límite de 256Kb de la versión gratuita y el resultado es el mismo que si se usa la versión de pago.

    Tengo un blog con cientos de fotos en un servidor en casa y recibo más de 25.000 visitas diarias sin saturaciones. Mi conexión es ADSL de 1Mbps de subida y el servidor está conectado al router por wifi, aún así va genial.

  • israel
    16/12/2015

    Si le quito lo de la cache si que me funciona y no me da error

    sera que la he puesto mal, no se lo que he hecho ha sido copiar y pegar el texto que tu has puesto y ponerlo debajo de

  • israel
    16/12/2015

    Me he creado un archivo .htaccess donde he pegado el código que has puesto de gzip y el código de la cache y lo he ubicado dentro de mi carpeta de httpdocs y cuando intento acceder a mi web me da un error ¿Porque?

Escribe un comentario