00.4 Planteamiento del sitio web

Planteamiento del sitio web

Cuando vamos a afrontar la optimización WPO de un sitio web pueden darse dos circustancias:

• El sitio web se encuentra en producción a disposición de los usuarios.
• El sitio web es de nueva creación y no se ha publicado o creado.

En la mayoría de ocasiones nos vamos a encontrar con la primera opción. El sitio ya estará publicado y tendremos que proponer intervenciones que consigan reducir su peso y aumentar su velocidad de carga.

Para conseguir esto, tendremos que hacer un planteamiento que definan cómo serán dichas intervenciones.  Para que puedas ver cómo lo he llevado a cabo en el home de mi sitio web personal, voy a explicarte en detalle cómo lo he realizado. Antes, quiero comentarte las características de este sitio para ubicarte.

Como puedes ver, mi web está creada con WordPress. Uso Google Tag Manager para la carga de los scripts de medición como Google Analytics. El editor de WordPress empleado es Elementor y los plugins de optimización empleados son WPRocket y Perfmatters. La versión de PHP que uso es la 7.3 y el tema que uso y os recomiendo es Astra.

Si quieres saber cómo está confeccionada una página y qué elementos emplea te recomiendo la extensión para chrome “WhatRuns” que es muy útil para identificar los datos de cualquier página.

Bien, analicemos la página de inicio de mi web personal. Como puedes ver se compone de los elementos que habitualmente podemos encontrar en un sitio web de estas características.

Menú prinicipal, encabezado, video, CTA, últimos artículos del blog y otros elementos simples. Vamos a comentar cómo he tratado cada elemento para conseguir la máxima puntuación en la herramienta PageSpeed Insights de Google:

• Header y footer

Como os decía, mi web está construida con el editor Elementor. Aunque se trata de un editor visual muy atractivo y potente para construir sitios web, la realidad es que el uso de elementor sobrecarga las páginas con un importante número de llamadas, archivos css, etc. Esto quiere decir que, si usas un encabezado que contiene el menú principal y un pie de página creado desde elementor; este cargará estos archivos en todas las páginas que contenga tu sitio. Es decir, harás más pesado todo el sitio web porque Elementor estará realizando todas estas llamadas una y otra vez, aunque se trate de la página de error 404. 

Para evitar ese derroche de recursos y mejorar la velocidad de carga de nuestro sitio vamos a construir el header (encabezado de la página) y el footer (pie de página) desde la propia plantilla de WordPress. En mi caso, Astra y no desde Elementor. Con esto estamos ya aligerando el peso total de cada página de nuestro sitio.

• Sliders

El uso de sliders para la creación de sitios web es una tendencia muy extendida. Pero existen estudios que demuestran que sólo el 1% de los usuarios hacen clic en un slider. Para mi, este es motivo más que suficiente para no usarlos. Los sliders aumentan considerablemente el peso de tu página web. Si a esto le sumas que es habitual que las imágenes que se suben a un slider suelen ser de un tamaño superior al necesario, nos encontramos con que el peso de nuestra página se dispara por un único elemento. Además, aumenta la carga de scripts (debido a las animaciones javascript). Definitivamente, usar un slider en tu web no es una buena idea.

Pero si te ves obligado a insertarlo, puedes optimizarlo asegurándote el no usar más de 4 slides, usar el tamaño adecuado y formatos de imagen de nueva generación como Webp. Evita si es posible el uso de video.

Al eliminar el slider de mi web lo que he hecho es crear un mensaje de bienvenida dejando claro cuáles son mis intenciones con mi blog. 

• Contenido de video

Para mostrar videos en la página de inicio de mi sitio web empleaba la opción que usan la mayoría de creadores de contenidos en Internet: subía el video a Youtube, y lo insertaba a través del código de inserción de esta plataforma. Insertar un video de Youtube en tu web genera más de 10 peticiones y aumenta el tiempo de carga en dos segundos. Aunque suene contraproducente decir o escuchar esto, usar el código de inserción de la plataforma de videos de Google hará que no superes la prueba de velocidad de carga de Google.

¿Cómo lo he solucionado? he contratado un servicio de CDN y cargo todos los videos desde ahí. Al mostrar el video me aseguro de que no tenga autoplay, es decir, que no se reproduzca hasta que el usuario haga clic en él. Además, en WP Rocket tengo activa una casilla que me permite reemplazar el iframe del player de video con una imagen en vista previa. El resultado es que no se realizan más de una petición en la carga inicial de la página y, aunque el usuario sabe que ahí hay un video; a efectos técnicos es una imagen con lo que nuestro sitio está optimizado en este aspecto.

• Fuentes e imágenes

Hablemos ahora de un aspecto fundamental para optimizar nuestra web. Las fuentes y las imágenes que componen nuestro sitio web. No deberías usar más de 3 fuentes diferentes.

Si tu plantilla o tu editor usa un sistema externos de fuentes como Google Fonts (suele ser muy habitual) lo recomendable es que descargues esas fuentes y las hagas locales subiéndolas directamente a tu servidor o a tu servicio de CDN.

En mi caso, además de realizar lo que aquí te comento, realicé la precarga de estas a través del plugin WP Rocket que me permite precargar en la caché las fuentes. 

Para las imágenes, debes asegurarte usar el tamaño y el formato adecuado que sería Webp. Cada imagen no debería superar los 50 kb siendo los 30 kb el peso recomendado.

• Resumen y recomendaciones

Resumamos: tu página web no debería pesar más de 1 megabite. No debería realizar más de 50 peticiones internas y externas. La página debe cargar en 3 segundos como máximo y el tiempo de respuesta de la misma debe ser inferior a 100 milisegundos. Usar una CDN es una gran idea y hacer las fuentes locales también. No insertes más de un video por página y utiliza formatos de imágenes de nueva generación.

En este gráfico puedes ver la gráfica de las peticiones que realiza mi página web y como se distribuye el peso. Para obtener estos datos he usado la herramienta webpagetest.org.

Este sería el planteamiento que te recomiendo para construir las páginas de tu sitio web. Ahora veremos las otras dimensiones que deberíamos tener en cuenta a la hora de trabajar la optimización de nuestra página. Vamos a ello.