Volver al Indice – Estrategia SEO y Posicionamiento en Buscadores
La velocidad lo es todo: mejora la experiencia del usuario en nuestro sitio, asegura su permanencia… y, según los últimos criterios de Google, también influye seriamente en el posicionamiento de nuestra página en los resultados de los buscadores.
Por Alejandro Franco – contáctenos
Google lo domina todo; después de todo, mas del 90% de la población mundial lo utiliza como su motor de búsqueda predeterminado. Pero, a su vez, Google califica contenidos y establece reglas, y sus últimos lineamientos apuntan a privilegiar velocidad y compatibilidad, algo de lo que hemos hablado brevemente en ocasiones anteriores. Es hora de explayarse y mencionar técnicas y recetas de aplicación avanzada.
Optimizando la velocidad de nuestro sitio web
1 – utilice imágenes livianas:
Google prefiere los archivos JPG a los GIF o PNG, fundamentalmente porque el formato se basa en la compresión y ello da por resultado archivos más livianos. La guía la da https://developers.google.com/speed/pagespeed/insights/ , la herramienta on line de Google que analiza sitios y brinda sugerencias sobre estructura y desarrollo. Hay herramientas que pueden comprimir JPG a un ratio aún mayor que el original de su programa de diseño gráfico (a costa de la calidad).
2 – utilice sprites CSS:
aunque parezca mentira, no es lo mismo un archivo de 50 kb que 10 archivos de 5 kb. Se cargan mejor y más rápido los archivos únicos y, en el caso de los elementos comunes a todas las páginas de un sitio – léase botoneras, imágenes de encabezado, banners, etc – es posible unificarlos en una sola imagen y después mostrar la zona que nos interesa. Ello se realiza con la técnica de sprites CSS: básicamente se crea una celda – la cual funciona como “ventana” para visualizar parte de nuestro objeto -, se define que la imagen única será la imagen de fondo, y después se expone la sección de la imagen mediante un rango de coordenadas (con la instrucción “background-position”). Por ejemplo si un botón es pulsado, damos la orden de que la imagen de fondo se desplace 32 pixels para la derecha para mostrar el mismo botón pero en otro estadío (o con otro color). Esta técnica no sólo sirve para visualizar elementos similares con sus diferentes variantes – botones activos / inactivos / pulsados, iconos de redes sociales, etc -, sino que es tan flexible que puede utilizarse con imágenes de tamaño muy diferente que estén incluidas en el sprite original, como el logo / encabezado del sitio, barras, imágenes de fondo (background), etc.
3 – comprima CSS:
Google se fija en la economía, aún cuando sea mínima y apenas llegue a 1 KB. Es lo que ocurre con los archivos CSS (en donde uno coloca las instrucciones del estilo y formato utilizado en todas las páginas de un sitio). Ahorrar espacios en blanco, utilizar abreviaturas (en las instrucciones CSS, en la identificación hexadecimal de colores, etc), aplicar nombres cortos de estilo, etc. ayuda pero, sino, puede apelar a los servicios de un software para que realice el trabajo de optimización. Hay servicios on line gratuitos como http://csscompressor.com/ que le permiten elegir el grado de compresión (y legibilidad resultante) del código CSS optimizado.
4 – comprima código HTML:
aquí ocurre algo parecido al código CSS pero, en este caso, la optimización produce resultados realmente drásticos (hasta un 30 % menos en el peso de los archivos HTML). Quitar espacios, abreviar instrucciones HTML, incluso quitar comillas de las instrucciones (lo cual es compatible con la mayoría de los navegadores pero que atenta contra la legibilidad del código por parte del webmaster) son algunas de las opciones que manejan los compresores. Tal como pasaba con los archivos CSS, usted puede manejarse con un lote de archivos originales – que utilizará para el diseño y para entender / modificar con facilidad el código – y generar un lote de archivos ultracomprimidos, los cuales son utilizados únicamente para levantar en su sitio web; los browsers se encargarán de interpretarlo como corresponde. Existen sitios on line y software gratuito (como el Absolute HTML Compressor; googléelo para encontrar de dónde descargarlo) que sirven para este propósito.
5 – si debe usar código Javascript, hágalo de manera asíncrona:
generalmente incrustar alguna rutina Javascript implica meter el código entre las primeras líneas de instrucciones HTML que conforman la página; pero ello trae el efecto no deseado de que la visualización del sitio se congela hasta que la rutina es ejecutada. Para sobrellevar esto, las rutinas Javascript pueden ser exportadas a un archivo externo (como los archivos CSS) y, después – en el código HTML de la página – utilizamos alguna instrucción que realice la carga asíncrona del mismo: esto es, la página se carga primero y, al finalizar, recién se procesa el Javascript. En HTML 5 es fácil ya que se incluyó la instrucción “async” a tal efecto pero, para versiones anteriores del lenguaje, existen mini rutinas Javascript – livianas y de rápida ejecución – que permiten la ejecución postergada de eventos mas largos y complejos.
6 – habilite la compresión Gzip en su servidor web:
a veces la optimización de código no lo es todo, y es necesario meter mano en la configuración del servidor de hosting. Desde ya que se trata de un tema delicado, ya que una línea de código mal escrita puede congelar la visualización de nuestro sitio. Por otra parte, si usted alquila alojamiento web, no todos los proveedores de hosting son partidarios de dejar a sus usuarios que toquen la configuración del server (o de la fracción del server en donde se aloja su sitio). Los servidores Apache (que corren en plataformas Linux) suelen tener como opción la compresión Gzip en tiempo real: los archivos del sitio viajan reducidos hasta la terminal del navegante, y se descomprimen en su máquina achicando los tiempos de descarga y visualización. El tema es ver si su proveedor de hosting le permite habilitar dicha compresión.
7 – fije la vida útil de los archivos (que componen su sitio web) en el caché del navegador de sus visitantes:
si alguien nos visitó hace poco, debe tener archivados – en la memoria de su browser – un montón de elementos pertenecientes a nuestra web. A su vez, el grueso de dichos elementos no ha cambiado en todo este tiempo – salvo que haya hecho una reforma radical a su sitio justo el día de hoy -. Para acelerar los tiempos de carga, podemos fijar fechas de vencimiento a los elementos que forman un sitio, distinguiendo entre sus clases – y esto se hace cargando instrucciones específicas en el archivo de configuración del servidor .htaccess -. El tema de fondo es: cuando usted agrega un artículo o página nueva a su sitio, ¿qué elementos frescos incorpora?. ¿Un archivo HTML y una imagen JPG?. Entonces puede fijar un tiempo de expiración para la clase HTML / JPG en una hora y, para el resto de los elementos (archivos .CSS, .GIF, fuentes, archivos externos de Javascript .JS, etc), en una semana o un mes. A continuación brindamos un ejemplo de estas instrucciones:
# 1 WEEK (una semana)
<FilesMatch “.(ttf|png|gif|css)$”>
Header set Cache-Control “max-age=604800, public”
</FilesMatch>
# 1 HOUR (una hora)
<FilesMatch “.(html|jpg)$”>
Header set Cache-Control “max-age=3600, public”
</FilesMatch>
La duración del cache se expresa en segundos. El acceso al archivo de configuración del servidor .htaccess se suele dar desde el panel de control provisto por su proveedor de hosting.
8 – compatibilidad con diferentes tamaños de pantalla / legibilidad de fuentes:
en Abril 2015 Google sacudió a la comunidad SEO anunciando que la compatibilidad de los sitios con plataformas móviles (léase, smartphones y tablets) pasaba a ser un factor preponderante en la valuación final de las páginas respecto de su posicionamiento en resultados. Vale decir, Google privilegiaría a los sitios de alta compatibilidad. Esta noticia – a la cual los especialistas SEO llamaron Mobilegeddon – no resultó tan violenta y radical como muchos esperaban, aunque produjo desplazamientos menores en algunas listas de resultados que se consideraban inamovibles. El punto es que muchas plataformas móviles ya poseen un grado de resolución que se equipara a los monitores de escritorio – como ocurre con tablets y celulares de alta gama – y, por otro lado, el grueso de sitios web ha estado utilizando versiones modernas de lenguajes de diseño, los cuales han mejorado muchísimo su compatibilidad. De todos modos la sentencia de Google sirvió para sacar momentáneamente del camino a aquellos sitios de estructura antigua y lenguaje arcaico, obligándolos a modernizarse.
El primer paso en la compatibilidad es asegurarse que el tamaño mínimo de letra (utilizado en el grueso de los textos de un sitio) sea de, por lo menos, 16 pixels (es un detalle expresamente pedido por Google, y deben tener estudios que avalan semejante sugerencia). Una font de 16 pixels es legible tanto en una pantalla full HD (en donde los pixels se achican y se multiplican para dar mayor nitidez) como en el pequeño display de un celular standard (aunque allí entra a jugar otro factor que es el de los navegadores móviles, los cuales implementan un porcentaje de zoom por defecto).
Para mejorar la visibilidad – y la valoración de Google respecto de la compatibilidad visual multiplataforma de nuestro sitio – es necesario apelar a recetas que permitan cambiar el tamaño de la fuente según la resolución del display del navegante. Hay muchas técnicas para hacer esto: una es armar una botonera con código Javascript, en donde el visitante elige el tamaño de letra a aplicar en la visualización del sitio (cada botón llama a un archivo .CSS diferente que define su propio juego de fuentes y tamaño de las mismas). La otra es configurar que todas las fuentes sean escalables en función de una fuente base: para ello, se define el tamaño de la fuente modelo en pixels y el resto de las fuentes se mide en rem – lo que significa que son un X % más grandes que la base -. Si la base es de 16 pixels y la fuente de encabezados es de 1.5 rem, entonces los títulos medirán 24 pixels.
Una vez aplicado el esquema de fuentes escalables, se utilizan instrucciones CSS para cambiar el tamaño de la fuente base (lo que implica alterar el tamaño de las fuentes vinculadas) según la resolución de pantalla. Esto se llama configurar el Viewport, y para ello se utiliza la instrucción @media screen, en la cual se pueden definir tanto los rangos de resolución como los nuevos tamaños de la fuente base.
@media only screen and (max-width: 767px){
html { font-size: 30px; }
}
@media only screen and (max-width: 1025px) and (min-width: 768px) {
html { font-size: 20px; }
En este ejemplo, la fuente base (para resoluciones menores a 767 pixels de ancho) tiene un tamaño de 30 pixels (porque uno asume que se trata de un celular o una pantalla pequeña) y, para resoluciones entre 1024 y 768 pixels (un celular alta gama, una tablet o un viejo monitor de computadora), la fuente modelo pasará a tener 20 pixels. Por otra parte – y siguiendo con el ejemplo antes mencionado del tamaño rem -, la fuente de encabezados tendrá 45 pixels en resoluciones menores a 767 pixels de ancho, y será de 30 pixels para una pantalla que oscile entre 1024 y 768 pixels de ancho.
Conclusiones:
Optimizar la velocidad de nuestro sitio web requiere un esfuerzo adicional y, en muchos casos, es necesario ajustar parámetros sensibles tanto en la página como en el servidor que lo aloja; pero los resultados quedan a la vista en el corto plazo, no sólo en rendimiento y tráfico sino también en nuestro posicionamiento en resultados, el cual constituye la meta principal de nuestra estrategia web.