- [A][A]
En el objetivo de optimizar una web la velocidad de carga es uno de los parámetros fundamentales ya que el tiempo de respuesta desde la petición a la presentación de la información es importante en la experiencia de usuario.
Una de las acciones para que en la optimización de la web mejorar la velocidad de carga, es hacer que los archivos se sirvan comprimidos, de manera que el tamaño a descargar sea menor.
Podemos trabajar de forma automatizada en el servidor o usar compresores online.
Comprimir las imágenes en el servidor
Para que el tamaño a descargar sea menor conviene usar una herramienta de compresión en el servidor para reducir el tamaño de los archivos a enviar, yo uso GZIP que está instalado en la mayoría de servidores, normalmente está activado por defecto pero para asegurarse se puede añadir en el htaccess el siguiente código:
## COMPRIMIR ## <IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_item_include file .html$ mod_gzip_item_include file .php$ mod_gzip_item_include file .css$ mod_gzip_item_include file .js$ mod_gzip_item_include mime ^application/javascript$ mod_gzip_item_include mime ^application/x-javascript$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include handler ^application/x-httpd-php mod_gzip_item_exclude mime ^image/.* </IfModule>
Usando una herramienta compresor online
Con el sistema anterior el proceso es totalmente automatizado, pero también puedes preparar las imágenes antes de añadirlas a la web usando optimizadores online como Imagecompressor de Websiteplanet, herramienta online gratuita con un porcentaje alto de compresión manteniendo nitidez.
Al usar herramientas como estas añades un proceso a el alta de contenido pero tienes un mayor control sobre el resultado.
Otra acción para optimizar la web y mejorar la velocidad de carga para las visitas recurrentes y para los elementos que se repiten en las distintas páginas es almacenar en la cache del servidor y de el navegador dichos archivos una vez que se descargan por primera vez.
Se indica el tiempo en que se lee los archivos de la cache, depende de la actualización de dichos archivos, esto no afecta a los archivos que se generan nuevos.
De echo cuando usamos la cache y hacemos un cambio importante en el css o en un javascript, conviene cambiarle el nombre para que lo lea de nuevo. Una forma interesante es colocar después del nombre un código numérico de la versión (screen.1.2.css)
Hay plazos: seconds, day, week, montk, year
Un código ejemplo:
##CACHE## <IfModule mod_expires.c> ExpiresActive On # Por defecto 1 mes de caché ExpiresDefault "access plus 1 month" # los que nunca debe de ser cacheado ExpiresByType text/html "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" # elementos que caducan a la semana ExpiresByType application/rss+xml "access plus 1 week" ExpiresByType application/atom+xml "access plus 1 week" ExpiresByType image/x-icon "access plus 1 week" ExpiresByType application/json "access plus 1 week" ExpiresByType text/x-javascript "access plus 1 week" ExpiresByType application/x-shockwave-flash "access plus 1 week" # elementos que caducan al mes ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/webm "access plus 1 month" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType application/font-woff2 "access plus 1 month" </IfModule>
La carga de los css afecta a la presentación de la información, el que la carga de los css escondan la presentación de los datos durante la carga de la página, siempre que el tiempo de carga no sea alto, afecta sobre todo a los robots, no tanto porque no lo lean si no porque identifican un archivo css de un tamaño regular que entienden que hasta que no se cargue no se visualizará correctamente el contenido.
En la optimización de la web mejorando la velocidad de carga y en general por buen funcionamiento hay que permitir el visionado de lo básico de la web con una carga rápida y luego incluso usando un cargador para avisar de que el proceso es alto, cargar los datos (esto en las páginas con alto tiempo de proceso) y retrasar la carga del resto de estilos a que se haya terminado de cargar la web.
Para evitar que los robots marquen la web como con problemas de esconder contenido en la carga, usamos este código de carga de los css de screen:
<link rel="stylesheet" href="css/screen.1.0.css" media="none" onload="if(media!='all')media='all'"> <noscript><link type="text/css" rel="stylesheet" href="css/screen.1.0.css" media="screen" /></noscript> <link type="text/css" rel="stylesheet" href="css/print.css" media="print" />
Con este proceso al usar una orden javascript para convertir el css a media screen, no lo hace hasta que no se ha cargado la página, es por ello que durante un breve tiempo sin la maquetación css completa.
La carga de las fuentes lleva un tiempo y los robots entienden que el texto puede estar no visible durante la carga, para mejorar la optimización web y la velocidad de carga en el css de carga de las fuentes hay que añadir la etiqueta font-display.
La etiqueta indica mediante un valor la forma en que el navegador cargará las fuentes, hay estas opciones:
@font-face {
font-display: swap;
Para optimizar la web y mejorar la velocidad de carga es importante reducir el peso de las imágenes, con ese objetivo se han generado nuevos formatos de imagen JPEG 2000, JPEG XR y WebP, con una compresión y calidad superior a los JPEG y PNG, tenemos imágenes de mayor calidad con un menor peso.
El problema es que los nuevos formatos no funcionan todos en todos los navegadores JPEG 2000 es el formato utilizado por safari, JPEG XR es el de Microsoft Edge y WebP es usado en Chrome, Firefox y Opera, aunque webp si lo leen las últimas versiones de Edge.
Para no estar trabajando con tantos formatos yo he optado por el formato webp de Google que comprime muchísimo, manteniendo la calidad de imagen (de 227kb a 45kb) y manteniendo el fondo transparente y la animación en los gifs.
Como este formato no lo van a leer ni Safari ni Edge vamos a tener la versión jpg, png o gif y la versión webp y necesitaremos identificar cuando el navegador nos permita cargar ese tipo de imágenes para servir esa en lugar de la estándar.
Imágenes en el código html
Para que la página pueda servir un formato u otro en el código html cargamos las imágenes usando la etiqueta html5 picture:
<picture> <source srcset="img/imagen.webp" type="image/webp"> <img src="img/imagen.jpg" alt="Imagen"> </picture>
Imágenes que se utilizan como background en los css
Para poder usar imágenes webp como background en los css, necesitamos saber si el navegador lo admite y para ello vamos a usar modernizr, descargamos la librería solo con la utilidad Webp.
Incluimos esa librería en el head y a partir de ese momento ya podemos usar el parametro .webp en los css:
.fotocab{
background-image: url(../img/cabecera_tarta.jpg);
background-color: #000;
background-repeat: no-repeat;
background-position: top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.no-webp .fotocab {
background-image: url(../img/cabecera_tarta.jpg);
}
.webp .fotocab{
background-image: url(../img/cabecera_tarta.webp);
}
La etiqueta .no-webp podríamos no colocarla porque la url por defecto será la de la clase fotocab en este caso.
Editar imágenes webp
Para crear o convertir imágenes a webp podemos usar:
Los javascripts es mejor cargarlos en el head, el problema es que eso provoca un problema para optimizar la web en cuanto a la velocidad de carga, al cargarse lo primero frenan la carga de lo demás y eso lo identifican como un problema los robots.
Para que los javascripts no frenen la carga del resto de la página, hay que cargarlos de forma asíncrona:
<script async src='js/jquery.min.js'></script>
Pero hay que tener cuidado a no hacer ninguna petición a los js linkados antes de que se carguen, para ello cualquier acción que los use debe de ser llamada en la función iniciar.
<script>
function iniciar() {
//el código a ejecutar para iniciar la web
}
window.onload = iniciar;
</script>
Si la carga va a ser larga es aconsejable mostrar un cargador y un mensaje.
También hay que tener en cuenta que el código que lanzamos dentro de la función iniciar no puede declarar variables globales ya que estamos dentro de una función, esas variables deben estar declaradas antes.