Cómo optimizar un sitio web desde cero. (Parte I)

En esta oportunidad, te brindamos algunos de los aspectos más resaltantes para la optimización de sitios web divididos en dos posts, en concreto, trataremos los siguientes temas:

Parte I:

  • Uso de pageSpeed de Google
  • Remover archivos que bloqueen el renderizado de la web
  • Optimizar la carga de estilos CSS
  • Hacer uso de la caché
  • Bonus: lidiando con YouTube

Parte II:

  • Compresión gzip con el .htaccess
  • Compresión de imágenes
  • Unión y minificación de js y css con Gulp

Cada día Google (así como otras empresas como Bing) marcan más estándares y líneas a seguir para que los desarrolladores y webmasters optimicen sus sitios web con el fin de que puedan tener buenos resultados en sus buscadores y posicionarse mejor. Pero algunas de las preguntas más frecuentes son ¿Por dónde empezar? ¿Qué directrices seguir para qué buscador? ¿Cómo puedo optimizar mi web para un mejor posicionamiento y aumento de mis visitas?

Una de las premisas a considerar es la experiencia del usuario, mientras más dependemos de la web, más exigentes se vuelven los usuarios de nuestros sitios y aplicaciones, por lo que brindarles una experiencia fluida, eficiente, llamativa y responsiva es indispensable para que nuestros sitios web no queden en el olvido.

Teniendo en cuenta estos puntos, llegamos a una frase común “la primera impresión es la que cuenta”. Y con ello no necesariamente nos referimos a la interfaz de una web, sino a la rapidez con la que ésta se muestra al usuario.

Así como tomamos en cuenta las distintas resoluciones al diseñar y desarrollar una aplicación o sitio web, se debe tomar en cuenta que la mayoría de los usuarios ingresará a ella a través de estos dispositivos y no siempre usando conexiones de alta velocidad o conectados a una red Wi-Fi.

Usualmente, tenemos varios archivos, imágenes, scripts y hojas de estilos asociados a nuestra web, por lo que, mientras más elementos y más llamativa es, lo más probable es que tarde más en cargar en un móvil usando datos o en conexiones lentas. ¿Esto quiere decir que deberíamos usar menos elementos? No, pero sí optimizarlos para que su carga no afecte la experiencia del usuario.

Ahora, la pregunta del premio ¿Cómo optimizar una web para que cargue más rápido? A continuación se expone paso a paso qué debemos hacer para mejorar la velocidad de carga inicial de una web.

PageSpeed Insights

Antes que nada, para optimizar y saber qué optimizar debemos conocer la situación actual de nuestra web en cuanto a optimización se refiere, para ello, Google provee una herramienta llamada PageSpeed Insights.

Su funcionamiento es bastante simple, ingresamos la url de la web a analizar en el campo de texto y presionamos el botón “Analyze”. Una vez hecho esto, la herramienta comenzará a cargar la web y nos dará una puntuación en un rango de 0 a 100 puntos en plataformas desktop y móvil.

En concreto, si la web está por debajo de 60 puntos, estaremos en rojo, entre 60 y 80 en amarillo y de 80 a 100 nuestra web estará optimizada para Google.

Pero esto no es todo, junto con la puntuación, PageSpeed nos da un listado de posibles optimizaciones, incluyendo, no sólo una guía para aplicarlas, sino también los archivos exactos de nuestra web a los cuales debemos aplicar la optimización.

A continuación, listamos algunas de las optimizaciones más comunes (y cómo aplicarlas) y con mayor peso para aumentar la puntuación y reducir el tiempo de carga general de una web.

Remover archivos que bloqueen el renderizado de la web

En concreto, cuando PageSpeed presenta esta recomendación de optimización, se refiere a varias alternativas:

  • Trasladar las etiquetas donde se importan los archivos JavaScript al final de nuestro HTML (antes de cerrar la etiqueta body) para evitar bloquear el renderizado del resto de la vista principal hasta la descarga completa de estas librerías.
  • Si algunos scripts son relativamente cortos, minificarlos y agregar el código directamente en el archivo HTML en vez de importar los archivos .js, de esta forma se descarga al mismo tiempo y se ahorran peticiones. Por ejemplo:
< script >
/* Contenido del archivo JavaScript */
</ script >
  • Cargar los archivos JavaScript de forma asíncrona. Esto se logra agregando el parámetro “async” a la etiqueta script, por ejemplo:
<script async src="my.js">

Optimizar la carga de estilos CSS

Qué sería de nuestra web sin estilos (algo sumamente ligero pero muy poco llamativo ¿no?). Afortunadamente no debemos deshacernos de nuestros estilos para optimizar nuestra web, sólo seguir algunas pautas para cargarlos de mejor manera:

  • Si un archivo .css es relativamente pequeño, al igual que con los archivos JavaScript, podemos optar por incluirlos directamente en el HTML, por ejemplo:
<head>
 <style>
/**contenido del archivo css**/
 </style>
 </head>
  • Evitar a toda costa usar el atributo style directamente en las etiquetas HTML, pues, por lo general, lleva a duplicaciones innecesarias. Por ejemplo:
<p style="text-align:justify;">

Hacer uso de la caché

Por lo general, el contenido de un sitio web no varía mucho, y con esto no me refiero a la creación constante de actualizaciones, entradas o posts, sino a contenido estático ya creado, scripts desarrollados que no se editarán como, por ejemplo, librerías JavaScript, plugins JQuery, etc. e incluso archivos CSS, imágenes y otros elementos.

Teniendo esto en cuenta, es buena práctica indicar un tiempo en caché para que estos archivos no se descarguen sino hasta después de X horas, días, semanas o meses, dependiendo de la frecuencia con la que cambien.

Para esto podemos hacer uso del archivo .htaccess, específicamente de la propiedad Cache-Control. Esta propiedad le dice al navegador por cuánto tiempo debe mantener uno o varios archivos en su caché, evitando descargarlos a cada momento.

Como parámetros, se le indican:

  • El tiempo máximo “max-age”: el tiempo máximo dentro del cual el archivo estará en caché. Por ejemplo:
    • Un minuto: max-age=60
    • Una hora: max-age=3600
    • Un día: max-age=86400
    • Una semana: max-age=604800
    • Un mes: max-age=2628000
    • Un año: max-age=31536000
  • El estado de los archivos, es decir, si podrán almacenarse o no en la caché, esto se puede establecer agregando uno de los tres siguientes parámetros:
    • public:  cualquiera puede almacenar el archivo en caché en cualquier nivel.
    • private: se usa cuando el contenido es específico para cada instancia o usuario que visita la web, por ejemplo, una página de Twitter, un usuario ve una cosa y otro ve algo totalmente distinto y cada instancia maneja su caché.
    • no-store: indica que el archivo no debe almacenarse bajo ningún mecanismo de caché bajo ninguna circunstancia.
  • Los tipos de archivos a almacenar: generalmente se recomienda almacenar en caché imágenes, iconos, archivos CSS y archivos JS.

Ejemplo para mantener archivos en caché durante un mes:

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>

Con el ejemplo anterior se le indica al navegador que si existen archivos con las extensiones css, jpg, jpeg, png, gif, js o ico en el sitio que se está cargando, asignarles el header Cache-Control y almacenarlos en la caché durante un período de tiempo de un mes.

Bonus: lidiando con YouTube

Hasta ahora se han nombrado archivos comunes presentes en la mayoría de sitios y aplicaciones web durante su carga inicial, pero hay veces en las que tenemos elementos adicionales que bloquean el renderizado de la web, por ejemplo, vídeos de YouTube.

Al incluir vídeos de YouTube en nuestra web, la API de este sitio agrega dependencias a la descarga de archivos, específicamente un archivo base.js que puede llegar a pesar más de 1MB, penalizando el tiempo de carga, sobre todo si el vídeo está en nuestra página principal.

¿La solución? Incluir el source de los vídeos a cargar de forma dinámica de forma que no afecte al resto de los elementos, pero ¿cómo lograr esto? Para ejemplificarlo, les mostraré un ejemplo bastante sencillo usando JQuery y la etiqueta vídeo de HTML5.

En el ejemplo tomaremos como premisa que el vídeo se cargue al momento de dar click  a un elemento que disparará su reproducción.

HTML:

< div id="myvideo" >
< img class="img-responsive" src="assets/images/placeholder_video.jpg"  />
</ div >
< div id="video" class="display_none" ></ div >

Como ven, el HTML es bastante sencillo, usaremos el div con id “myvideo” para capturar el evento y el vídeo se creará de forma dinámica en el div con id “video”, por defecto este último div tiene un estilo display:none.

JavaScript:

$(document).ready(function() {
   /*Se crea el objeto que contendrá el src y la etiqueta vídeo 
     a crear y se asigna al div con id = video 
   */
   var video = $('<video />', {
       id: 'player', /*-> id de la etiqueta video a crear*/
       src: "https://www.youtube.com/watch?v=TnqyBrzhwD0", 
       /*enlace del vídeo a mostrar*/
       type: 'video/youtube', /*tipo de archivo cargado en el src*/
       controls: true, /*mostrar u ocultar controles del reproductor*/
       preload: "none" /*desactivar la carga previa del vídeo*/
   });
   video.appendTo($('#video')); 
   /*Enlazar etiqueta a div con id = video*/

   $("#myvideo").on('click', function(e){
       $('#myvideo').css('display','none');
       /*se oculta el div original asociado al evento click*/
       $('#video').css('display','block');
       /*se muestra el div que contiene la etiqueta video*/
       $('#player_from_mejs')[0].player.play();
       /*Se inicia la reproducción del vídeo*/
   });
});

Como ven, usamos JQuery para capturar el evento onReady, tras haber cargado la web,  se genera la etiqueta vídeo con el enlace de YouTube indicado y ya está disponible la función asociada al evento click del elemento “myvideo” para mostrar el reproductor y comenzar la reproducción.

En la segunda parte de este post, veremos algunas otras cosas interesantes que podemos aplicar para optimizar al máximo nuestra web, por ejemplo, la compresión de imágenes, compresión con headers desde el .htaccess y cómo minificar archivos css y js para reducir su peso.

¿Conoces alguna otra técnica de optimización? ¿Tienes dudas o quieres saber más sobre el tema? ¿A qué esperas para comentar y compartir? 😉

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s