No es la primera vez que me preguntan cómo acelerar la carga del blog, hoy voy a dar unos cuantos consejos que serán de utilidad para ello. Ésto no sólo es válido para un blog, sino para cualquier web en general
Combina los scripts
Una buena parte del tiempo de carga de un blog es el utilizado en solicitar los archivos (scripts, hojas de estilo, etc), más que en descargarlos (ver imagen). Supongamos un escenario donde tenemos varios plugins para jQuery, más modalBox, más los plugins donde los activamos… Cada solicitud que el navegador hace al servidor son unos milisegundos de menos (que acaban siendo muy valiosos para la velocidad de carga).
Por supuesto, hay ciertos scripts (como el de los posts relacionados), que no es posible combinar, pero yo haría algo así:
- jQuery cargado desde google directamente (en caso de usar la librería): La caché y la velocidad de los servidores de google nos compensa el cargarlo aparte.
- Plugins justo debajo de este. Combinamos un archivo con los plugins necesarios, y lo subimos a dropbox, o a un hosting particular, para llamar a todos desde allí.
- Script donde activamos todos los plugins.
Javascript al fondo
Muy relacionado con el tema anterior, deberíamos poner el javascript más prescindible (entre comillas), lo más abajo posible de la página. La gran mayoría del javascript debería de ir aquí. ¿Por qué? Pues porque mientras se descarga un script y se ejecuta, no se está mostrando el HTML (que, al final, es el contenido, y lo que nos interesa que se vea). Si lo ejecutamos al final, el resultado será que tu página carga rapidísimamente, y posteriormente el javascript se ejecuta silenciosamente, sin bloquear la carga.
Nótese que hay excepciones (querrías poner modernizr al principio de la página, por ejemplo).
En conjunción con el consejo anterior quedaría así:
<!-- Cargar jQuery desde google si es posible, fallback local. Leer más:
http://vagabundia.blogspot.com/2012/05/google-no-funciona-cargar-una-libreria.html -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="url/local/a/jQuery.js"><\/script>')</script>
<!-- Aquí irán tus plugins para jQuery o cualquier otra cosa -->
<script src="/url/a/plugins.js"></script>
<!-- Aquí irán las líneas necesarias para activar los plugins, más código extra que puedas necesitar -->
<script src="/url/a/script.js"></script>
<!-- He puesto body como referencia, pero con que esté cuando el contenido principal haya cargado -->
</body>CSS externo
Este es un paso muy importante de cara a optimizar la carga del blog. Muchos de los usuarios de Blogger tienen todo el CSS metido entre <b:skin> y </b:skin>. Esto en un principio puede parecer conveniente (tienes asegurado que no te va a faltar el CSS), pero en realidad no lo es. Lo cierto, es que lo que estás haciendo es que el navegador descargue continuamente montones de líneas de CSS cada vez que visita tu blog. De la otra manera (teniendo un archivo remoto desde el cual lo cargamos), el navegador almacena en su caché el contenido del archivo, y sólo lo descarga una vez. El resto lo carga desde la caché (que no tarda nada).
La solución es fácil: copiar todo el CSS (que no use variables de blogger) a un archivo externo, y referenciarlo en el <head> así:
<link rel="stylesheet" type="text/css" href="url/del/archivo.css" />Conclusión
Desde luego, hay más trucos para optimizar la carga del blog, seguro que me he dejado alguno en el tintero (si me doy cuenta lo publico más adelante). Y vosotros, ¿Qué técnicas usáis para optimizar la carga de vuestro blog?