SEO

Mas allá del WPO convencional

En los últimos años hemos visto como el performance de la página influye en la visibilidad y prueba de ello es la actualización de las métricas de PageSpeed, donde veíamos a principios de año conceptos nuevos como el FP (First Paint), FCP (First Contentful Paint) o el DCL (DOM Content Loaded).
Lo que los motores de búsqueda persiguen con este tipo de actualizaciones son dos objetivos: ahorrar en sus propios recursos a la hora de procesar las páginas y mejorar la experiencia de los usuarios. Por tanto, como SEOS, debemos intentar mejorar nuestros tiempos de carga para evitar que los usuarios se vayan de nuestras páginas.
Si ya has probado los consejos que compartió mi compañero Roberto en este artículo, sobre los factores olvidados del WPO y quieres ir un paso más allá en el performance de tu página, desde iProspect tenemos algunos consejos que harán que el site cargue rápido incluso en móvil con una mala conexión.

Lazy Load: mediante el lazy loading podemos elegir qué elementos queremos cargar más tarde, priorizando de esta manera, el contenido above the fold (aquel contenido visible sin hacer scroll). Si bien es una técnica que habrás oído en numerosas ocasiones, lo que proponemos es que esta carga la realicemos en sliders, de tal manera que retrasamos la carga del slide siguiente al que estamos viendo actualmente. 

<importance>: en la presentación del pasado mayo de Google I/O, uno de los ingenieros de Chrome habló de un nuevo atributo para determinar la relevancia de cada recurso, de tal manera que conseguimos priorizar la carga de cada una de las peticiones que hacemos. No solo será útil para imágenes, sino también para recursos CSS no críticos o llamadas externas, aunque por el momento es un atributo experimental, estaremos muy atentos a su evolución. Puedes encontrar más información aquí.

Code Splitting: mediante esta técnica vamos a conseguir un mayor control sobre nuestras librerías de JavaScript, así como decidir el cacheo de las mismas. Lo que conseguimos básicamente con code splitting es particionar el JavaScript que utiliza una página, para hacer una carga más efectiva del mismo o incluso hacerla en paralelo. Si quieres profundizar un poco más sobre el Code Splitting, aquí puedes consultar la documentación en Github.

¿Vídeo o imagen? Depende de tu conexión: debido a la gran penetración que han tenido los móviles (especialmente en España) y sobre todo, para beneficiarnos del update de uno de los principales motores de búsqueda, el cual supone que el tiempo de carga de la página sea un factor de posicionamiento en mobile first index. Por ello, debemos prestar especial atención al comportamiento de nuestra web en los diferentes dispositivos. En esta linea, otra de las técnicas que puedes utilizar en tu site es la de servir un vídeo o una imagen en función del tipo de conexión (LTE, 4G, 3G, …) de los usuarios.

Font Display: mediante este atributo, tendremos el control total de la carga de tipografías, utilizando el tipo “Font-display:swap;” veremos como el navegador pinta una tipografía de inmediato, intercambiándola en el momento en el que esté cargada la fuente de nuestro proyecto. Con esta técnica, evitamos el famoso texto invisible que experimentamos en numerosas ocasiones cuando accedemos a la web.

Preconnect, Preload y Prefetch: como hemos comentado anteriormente, en el artículo que escribimos hace un tiempo, explicábamos en profundidad estos conceptos. Ahora veremos cómo podemos utilizar cada uno de ellos para optimizar los tiempos de carga de nuestro site. Recomendamos el uso de:


o Preconnect para critical assets
o Preload para aquellos recursos que son necesarios para la conexión que está realizando el usuario en ese momento
o Prefetch para futuras navegaciones. Para este último, debemos tener en cuenta el análisis predictivo de navegación de analytics de tal manera que aplicaremos prefetch sobre la siguiente página que se suele cargar en la navegación común de los usuarios.

Conclusión

En definitiva, los principales motores de búsqueda están dando pasos hacía webs que carguen más rápido y que, por otro lado, sea más “rentable” procesarlas por parte de los bots de rastreo, por tanto, nos toca remangarnos y trabajar en aquellas partes del site menos visibles, pero que pueden suponer un valor diferencial frente a la competencia. Si tienes alguna duda, contáctanos.

 

comments powered by Disqus