SEO

Si haces una prueba de velocidad de tu página con Pagespeed o con Gmetrix, uno de los ficheros que verás que está ralentizando la portada de tu web en WordPress es dashicons.min.css ¿Qué es dashicons.min.css? Este fichero carga los dashicons de WordPress, unos iconos que usa WordPress en su escritorio del backend y en la barra de administración. Pero, como ocurre mucho en WordPress, se carga también en el frontend. Y no tiene sentido. Iremos dedicando varios artículos a cómo dejar de cargar estos elementos no necesarios de la portada de nuestra web, y así mejorar la velocidad y puntuación de la misma. Cómo evitar que se carguen los dashicons donde no son necesarios. Nota: prueba esto en tu web antes de publicarla porque hay temas que si que usan los dashicons para PC, tablet o móvil. Lo que vamos a hacer es desactivarlos en toda la parte de la web que no tiene barra de administración ni escritorio de WordPress. Es decir, para el frontend. Os dejamos dos scripts posibles que, como siempre, tenéis que poner en el fichero functions.php de vuestro tema hijo o en un plugin de Snippets. Opción que detecta si está la barra de administrador y, si no, quita los dashicons. Esta la hemos usado y funciona perfectamente. Opción que detecta si el usuario está registrado y, si no, quita los dashicons. Como siempre podéis hacer mezclas de estas funciones, con capacidades diferentes de los usuarios (si es administrador o no). Haced una prueba con y sin el código y veréis que el aviso se va y la puntuación mejora.

Si quieres mejorar tu página web, es una buena idea analizar la misma con Google Page Speed. Cuando lo haces, muestra varios errores, como “Publica imágenes con formatos de próxima generación” que os indicamos cómo solucionar aquí. O el error que os vamos a explicar cómo solucionar hoy: “Elimina los recursos que bloqueen el renderizado“. ¿Cuáles son los recursos que bloquean el renderizado? Esta es la primera pregunta que nos surge. Para poder explicarlo necesitamos entender qué es “renderizar” una página web y cómo se hace. El renderizado se refiere a: la cadena de acciones que realiza un navegador para presentar una página web. Es decir, analizar, procesar y visualizar una web. El navegador web lee el código de una web de arriba a abajo durante el “renderizado“. Si encuentra un recurso CSS o Javascript, tiene que detener la lectura hasta que se cargue el recurso. Pero muchas veces dichos recursos no son necesarios para mostrar la primera presentación que necesita ver la persona que accede a la página. Así que son recursos que están bloqueando que se cargue la página. Y esto hace que tu página se cargue más lenta. Es importante destacar que no todos los recursos bloquean la carga de la web. Sólo los que no son necesarios para esa carga inicial. Lo importante es cargar el HTML y los que se llama el CSS crítico (el obligatorio). Lo más normal es tomar una de dos soluciones para diferir ( cargar más tarde) los recursos). Puedes ver más información aquí. Async. la carga del recurso se realiza mientras se sigue leyendo el HTML. No detiene la lectura del HTML. Pero si que habrá un parón cuando haya que ejecutar el recurso. Defer: El recurso se descarga mientras se lee la web, y no se ejecutará hasta el final de la carga del HTML. Solucionar el error “Elimina los recursos que bloqueen el renderizado” en Wodpress. Existen varias maneras para solucionar este problema. Obviamente se podría cambiar a mano la carga de los recursos para que lo hagan después (esto se hacía antes). Afortunadamente ya existen varios plugins que nos ayudan en este proceso. Y hoy os vamos a dejar un par con los que podéis arreglar este problema de manera muy sencilla (lo hemos probado en varias webs de clientes). El proceso consiste en instalar y configurar dos plugins del mismo desarrollador: Async JavaScript y Autoptimize (del que ya os hemos hablado). Esto es lo que tenéis que hacer. Instalar Async JavaScript y activarlo Instalar Autoptimize y activarlo. Ir a la configuración de Async Javascript y marcar la casilla en la parte superior de la configuración para activar JavaScript Async. Escoger si quieres Apply Async o Apply Defer dependiendo del método que quieras (que hemos explicado encima de estas líneas. Ir a la configuración de Autoptimize. Marcar la casilla para optimizar el código JavaScript. Marcar la casilla para optimizar el código CSS. Con esto navega un poco por tu sitio, y vuelve a hacer la prueba de Page Speed. Si no se ha quitado el aviso prueba a hacerla varias veces, o espera hasta el día siguiente, porque Page Speed cachea sus resultados. En nuestras pruebas, al cabo de hacer varias pruebas y esperar un poco, vimos que el error había desaparecido (y con ello mejorado nuestra puntuación en Page Speed).

Si pruebas tu página en Google Page Speed, una de las primeras cosas que te dirá hoy en día es: ” Publica imágenes con formatos de próxima generación“. Uno de estos formatos es Webp, diseñado por Google y que comprime las imágenes, haciendo la web más rápida, haciendo que los usuarios no tengan que usar tantos datos para ver tu página, y mejorando así, la puntuación de SEO. Problemas: no todos los navegadores son compatibles con webp (casi todos ya), no todos los alojamientos permiten estas imágenes, y Wordress no las acepta (no puedes subir las imágenes directamente, da error). Además, puede que tengamos muchas ya subidas y convertir todas sería tedioso. Solución: os vamos a explicar cómo usar el plugin EWWW Image Optimizer, gratuito, para mostrar vuestras imágenes png y jpg en formato webp. Esto hará que se quite el aviso en PageSpeed, que mejore vuestro SEO y velocidad de la web (experiencia del usuario) y que se muestren los formatos “antiguos” si los navegadores no son compatibles. Cómo activar Webp en EWWW Image Optimizer. Para ello tenemos que (tras instalar y activar el plugin) irnos a la pestaña de Webp y marcar la primera opción. Una vez hecho esto, está preparado para mostrar las imágenes png y jpg en Webp, pero hay que decírselo al servidor web. Podemos hacerlo de dos maneras: Al activar la primera casilla en Webp veréis que debajo aparece una serie de reglas de htaccess. Podéis pinchar en el botón para que inserte esas reglas en vuestro fichero o insertarlas vosotros.Tras refrescar varias veces, tenéis que comprobar que la imagen en la esquina inferior derecha pasa de rojo png a verde webp. Si es así, lo tenéis activado y podéis inspeccionar vuestra web para ver que ya está mostrando imágenes en formato webp.O analizar de nuevo vuestra página con Page Speed. Si lo anterior no funciona- no es compatible con todas las configuraciones- el plugin permite instalar un javascript que será el encargado de ver si piden una imagen, y mostrar su webp. Esta opción es menos recomendable porque estamos añadiendo un script más…pero funciona casi siempre. Podéis ver cómo se hace en este vídeo.