Lo que realmente debes saber para hacer más rápida tu web y tener mejor SEO: Reducir la cantidad de recusos criticos parte 1.
En el post anterior hablamos de como se renderiza una Web y como es que hace el navegador para pintar los pixeles del código HTML/CSS en nuestro monitor. También ya has medido con cualquiera de estos sitios la velocidad de carga de tu Web o has usado Google Analytics para hacer dicha medición, si no sabes de que hablo, visita los siguientes post para ponerte al día:
- Sitios Web útiles para medir la velocidad de carga de tú Web
- Uso de Google Analytics para analizar la velocidad de carga de tú Web
Ahora bien, toda esta chachara de que sirve podrás preguntarte, y bueno, como he dicho anteriormente, lo que no se puede medir, no se puede optimizar. Conociendo la Ruta Critica de Renderizacion (de ahora en adelante me referiré a este término con las siglas CRP) podemos ver donde tenemos cuellos de botella o que puede cambiarse o mejorarse para que la velocidad de carga disminuya.
¿Cuales son los valores óptimos para la velocidad de carga de tu Web?
Debes tener peticiones al servidor que no superen los 200ms y la página no debe tardar mas de 2-3 segundos en cargar. Si la petición al servidor demora mas de 200ms debes revisar muy bien, para esto no hay solución única, puede ser una consulta a la BD, un problema con el servidor Web, etc, asi que debes poder verificar y corregir que sucede, por experiencia, la mayoria de veces tiene que ver con consultas lentas a la BD y con chequeos de archivos externos, algunas veces verificamos si un archivo existe antes de llamarlo, y si dicho archivo esta fuera de nuestro dominio, la petición de éste puede tardar mucho, así que hay que revisar bien esto. Puedes usar este script si tu página esta en PHP para medir el tiempo transcurrido entre un momento X e Y. Otro valor a considerar es que el html de tu pagina no pese mas de 14kb pues es lo maximo que se puede transmitir en una peticion, si hay mas de 14kb entonces la peticion se divide en paquetes mas pequeños hasta armarse por completo, lo cual nos consume a valiosos microsegundos.
Primeros pasos para mejorar la velocidad de carga de tú Web: Optimizar el DOM, si hay menos bytes se renderiza más rápido
Primero que nada, en el post anterior: Cómo se renderiza una página Web: Critical Rendering Path (CRP) se explicó como es que el navegador pinta una web, y esto es creando el DOM y el CSSOM, y he aquí la primera optimización que podemos hacer: Menos nodos a crear, menos bytes que transmitir y procesar, así que lo primero que debes hacer es revisar de pies a cabeza tu HTML (o el HTML generado) y ver si se pueden optimizar sus etiquetas, es decir, reducir la cantidad de etiquetas a las mínimas posibles, muchas veces podemos ahorrar valiosos bytes que nos sirven para evitar peticiones adicionales a el servidor Web y ahorrar tiempo.
Lo mismo pasa con el CSS debemos estar seguros de tener en nuestros archivos CSS únicamente lo que necesitamos y es aquí donde se vuelve un problema cuando usamos frameworks o archivos de terceros, donde no controlamos las etiquetas o para que las usa o peor aun, si las hizo pensando en la optimizacion o no. Así que siempre que vayan a usar un framework o un código de terceros asegúrense de entenderlo correctamente por si fuera necesario editarlo para mejorarlo.
HTML: has clic derecho con el mouse, elige «ver código fuente de la página», guárdalo y revisalo cuidadosamente, recorta todo lo que se pueda recortar.
CSS: abre el archivo CSS en tú editor de texto favorito (si esta minificado puedes buscar en Google Unminify CSS y te aparecerán muchas páginas para esto) y también revisalo con cuidado a ver:
- si hay reglas que puedas omitir.
- Si tienes reglas que sólo se aplican en la página en cuestión puedes pasarlas a un archivo nuevo y dependiendo del tamaño final, lo podemos dejar como css incrustado o como archivo independiente.
- Si tienes reglas que se usan en otras páginas internas has lo mismo, pásalos a un archivo nuevo y sigue verificando.
Supongamos que el HTML de nuestra web es el siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Hablemos de SEO</title>
<style>
/* este es un ejemplo de como optimizar el HTML */
/* el contenedor solo se usa en esta pagina */
.container{ font-size: 130%;}
.container{ width: 50%;}
</style>
</head>
<body>
<!-- contenedor INICIA aqui -->
<div> </div>
<!-- contenedor TERMINA aqui -->
<script>
CodigoAnalytics(); //para obtener metricas de nuestra web
</script>
</body>
</html>
Primero observa que hay comentarios tanto en el CSS como en el HTML, dichos comentarios son buenos para mejorar la lectura y entender el código, pero en la etapa de producción o la Web que ya estará arriba en el navegador lo único que hacen es llenar de Bytes innecesarios tu HTML, así que en tu versión final elimina dichos comentarios ¿adivina porque? son ignorados por el navegador. Luego de esto debes comprimir el HTML y asegurarte que se encuentre en el caché del navegador, esto es mas fácil decirlo que hacerlo ya que actualmente las paginas ya no son estáticas, ahora son generadas por un lenguaje de programación (PHP por ejemplo) lo cual nos vuelve un poco mas complicado esto de «comprimir el html», pero si usas PHP puedes preguntarme por el código que uso para comprimir el HTML final, ojo solo si tu pagina esta hecha con PHP.
Reducir el uso de recursos que bloquean el render (CSS)
En nuestra Web por lo general usaremos CSS para que esta se vea atractiva, y como ya vimos anteriormente, el CSS bloquea el render de la pagina por lo tanto tenemos que usar técnicas para evitar que este bloqueo suceda por un largo periodo de tiempo si quieres mejorar la velocidad de carga de tu Web. Básicamente tenemos 2 técnicas a) CSS Inline y el uso de Media Queries.
CSS Inline
Lo que debes hacer es revisar si tienes CSS que solo se se use en una pagina en particular (por ejemplo solo en el homepage) y este código si no es mucho colocarlo en el head entre las etiquetas <style></style>. Debes hacer un equilibrio entre esta cantidad de CSS y el peso del archivo HTML final asi que usando el inspector de Google Chrome podrás chequearlo.
Desbloqueando el CSS con Media Queries
Si te dedicas a hacer Webs es muy probable que conozcas sobre CSS. Pues bien, uno de los avances en es que CSS nos permite aplicar estilos a una Web según una condición particular, por ejemplo si es un CSS que se usará solo en el momento de imprimir, o un estilo que se mostrará solo en smartphones en posicion vertical (portrait), o un estilo particular en una Tablet en posicion horizontal (landscape), etc, esto se conoce como Media Queries. Pues bien, según hemos visto en los posts anteriores (si, esos aburridos de solo teoría), el CSS bloquea al navegador (ahh estarás diciendo, para eso servia tanta chachara) y pues considera el siguiente código CSS:
body{ font-size: 16px; color: #AAA; }
@media screen and (orientation: landscape){
.opcionMenu{float: right;}
}
@media screen and (orientation: portrait){
.clase{display: none;}
}
@media print{
body{ font-size: 12px; color: #000;}
}
Si te fijas, tenemos una regla general que aplica a toda la pagina, que son las reglas del body, pero las otras reglas solo aplicaran en las condiciones particulares que se han especificado. Viendo esto y sabiendo que el CSS bloquea al navegador, ¿no crees que es mejor evitar bloqueos innecesarios para reglas que no se vayan a aplicar siempre?, asi que para esto lo que tenemos que hacer es dividir nuestro CSS en archivos independientes, por ejemplo:
- style-print.css para las reglas de impresion.
- style-landscape.css para las reglas de cuando se vea el sitio este en posicion vertical.
- style-portrait.css para las reglas de cuando se vea el sitio este en posicion horizontal.
Luego en nuestro HTML los insertamos con la etiqueta <link>, pero ojo, el navegador asume por defecto de que todo el CSS debe bloquear el renderizado, asi que debemos decirle al navegador cuando cargar y aplicar una hoja de estilos, asi que en la etiqueta <link> debemos agregar el atributo media:
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="print-style.css" media="print"> <link href="other.css" rel="stylesheet" media="(min-width: 40em)">
Con esto, el navegador no pierde tiempo descargando y bloqueando el renderizado de forma innecesaria, lo cual se traduce en una mejora en la velocidad de carga de la Web.
Esto es todo para esta entrega, espero que te sea útil. Si quieres que te avise cuando escriba la siguiente parte o algo nuevo, puedes suscribirte aquí:
No olvides agregarte en el grupo [button color=»success» size=»» type=»squared» target=»false» link=»https://www.facebook.com/groups/HablemosDeSEO.ninja»]Hablemos de SEO[/button] en Facebook
Recuerda que puedes encontrar mas info, tips, comentar, preguntar en los siguientes grupos en Facebook:
[button color=»primary» size=»» type=»» target=»false» link=»https://www.facebook.com/groups/desarrolladores.elsalvador»]Desarrolladores PHP El Salvador[/button][button color=»danger» size=»» type=»» target=»false» link=»https://www.facebook.com/groups/HablemosDeSEO/»]Hablemos de SEO[/button][button color=»info» size=»» type=»» target=»false» link=»https://www.facebook.com/groups/freeit»]Soy de IT y Soy Libre[/button][button color=»warning» size=»» type=»» target=»false» link=»https://www.facebook.com/groups/html5yhtml51/»]HTML5 y 5.1 de Verdad[/button]
