La velocidad de carga web es hoy en día uno de los factores más importantes en el SEO. Es por ello que estamos obligados a que nuestro blog cargue en pocos segundos y para ello tenemos que tener en cuenta una serie de consejos, entre los cuales, el más importante es contar con un hosting rápido.
Un hosting rápido mejoral la velocidad de la web.
Comprimir las imágenes, habilitar la compresión gzip, un plugin de caché, actualizar a la última versión de PHP… Sigue leyendo para saber todo lo que necesitas para mejorar la velocidad de carga de tu sitio web y enamorar a Google.
¿Cómo hacer un test para medir la velocidad web?
Lo primero de todo es saber en qué condiciones se encuentra nuestro sitio web o blog. Es decir, necesitamos conocer qué factores debemos mejorar y cuáles son aquellos que ya tenemos optimizados. Pare ello utilizaremos las herramientas online más conocidas y fiables.
Para obtener datos más precisos, haremos un test de velocidad en al menos estas tres herramientas: Google Page Speed, Pingdom Website Speed Test y Web Page Test.
Una vez conozcamos cuáles son nuestras debilidades, vamos a ver cómo podemos mejorar esos tiempos de carga que nos traen de cabeza. Al menos a mí es una de las cosas que más dolores de cabeza me han dado y más desde que Google lo tiene tanto en cuenta a la hora de posicionar una página en los primeros resultados de las búsquedas.
Google Page Speed Test
Mención especial merece Google Page Speed Test. Se trata de la herramienta que pone Google a disposición de sus usuarios para que comprueben qué aspectos o factores deben mejorar en su website para optimizar la velocidad. Aunque hay que decir que una buena puntuación en Google Page Speed no siempre está relacionada con una buena carga de la página web.
No hay que confundir la puntuación de Google Insights y la velocidad de carga. Al medir la velocidad en esta herramienta, Google nos mostrará varios aspectos que debemos mejorar.
Asimismo, separa estas recomendaciones en dos apartados: dispositivos móviles y ordenadores. Cada vez Google le da más importancia a los dispositivos móviles. Buena muestra de ello son las páginas AMP. Se trata de un proyecto de Google llamado Acelerated Mobile Pages para que las páginas carguen muy rápido en dispositivos móviles.
Si hacemos la prueba del test de velocidad de Google veremos que siempre, o casi siempre, la velocidad en ordenadores es mejor que en dispositivos móviles. Es por eso que surgen las AMP y se cree, aunque no está confirmado, que Google posiciona mejor este tipo de páginas en dispositivos móviles.
Tanto en Joomla como en WordPress se puede utilizar las AMP instalando un módulo o plugin. Aunque es mucho más fácil la integración en WordPress, como en la mayoría de casos.
Consejos para mejorar la velocidad de carga para cualquier web
- Escoger una plantilla ligera y sin errores. Una plantilla que cargue rápidamente nos va a solucionar muchos de los problemas con los que nos podemos encontrar. Utiliza solo lo necesario según tus intereses. De nada sirve elegir una plantilla con muchas funcionalidades si después no vas a utilizarlas.
- Comprimir las imágenes: Junto con contratar un hosting rápido, comprimir las imágenes es lo más importante. De verdad, es un error que mucha gente comete, colgar las fotos con tamaños mucho más grandes de los necesarios y, además, sin comprimir. Si guardamos las imágenes con las medidas adecuadas y las comprimimos vamos a mejorar la carga muchísimo. Podéis hacer la prueba. Para comprimir las imágenes recomiendo usar la siguiente herramienta online:
» https://compressor.io/compress
- Contar con la última tecnología PHP: Aplicando un simple código al principio de tu archivo .htaccess haremos que se aplique PHP 7, lo que hará que tu web vuele. Este archivo se encuentra en la raíz de vuestro sitio web. Si no sabéis cómo hacerlo, mejor preguntar al personal de vuestro hosting. Antes de hacer cualquier modificación, siempre es aconsejable hacer una copia de seguridad. Este es el código que debéis colocar al principio del archivo .htaccess:
» AddHandler application/x-httpd-php7 .php
- Javascript y CSS: Uno de los aspectos más complicados de solucionar es eliminar el Javascript que bloquea la visualización y el CSS del contenido que tenemos en la parte superior de nuestra página. Este es el primer tip que encontramos cuando analizamos nuestro blog o web en Google Page Speed (para medir la velocidad de carga web esta es la aplicación que nos brinda Google). Lo que sí podemos hacer aquí es conseguir que el contenido estático se cargue al final, en lugar de en la parte superior de la página. Esto hará que el primer momento de carga sea más rápido. Para solucionar esto podemos valernos de un plugin.
» Este plugin se llama Javascript to Footer, en el caso de WordPress. Mientras que en Joomla utilizaremos su equivalente. Javascript to Footer permite que el contenido estático de tu página se cargue al final, en lugar de en el head de la misma. Esto hace, como hemos dicho anteriormente, que el primer momento de carga sea más veloz, aunque el tiempo total de carga será exactamente igual. Además, influye cuánto contenido Javascript carga tu sitio para que resulte realmente efectivo. Normalmente, en pequeños proyectos el impacto en el rendimiento general de esta acción es mínimo. En proyectos más ambiciosos, es totalmente recomendable activar este plugin.
Imagen del resultado de la carga de la web tras los ajustes.
¿Cómo mejorar la velocidad de carga web en Joomla?
- Vamos a separar los consejos para webs Joomla y WordPress. Si bien coinciden en algunos aspectos, en otros hay ciertas diferencias. Para especificar la cache del navegador en Joomla puedes incluir estas líneas al comienzo del archivo .htaccess:
## ESPECIFICAR LA CACHE DEL NAVEGADOR ##
ExpiresActive On
ExpiresByType image/jpg «access 1 month»
ExpiresByType image/jpeg «access 1 month»
ExpiresByType image/gif «access 1 month»
ExpiresByType image/png «access 1 month»
ExpiresByType text/css «access 1 month»
ExpiresByType text/html «access 1 month»
ExpiresByType application/pdf «access 1 month»
ExpiresByType text/x-javascript «access 1 month»
ExpiresByType application/x-shockwave-flash «access 1 month»
ExpiresByType image/x-icon «access 1 year»
ExpiresDefault «access plus 1 month»
## ESPECIFICAR LA CACHÉ DEL NAVEGADOR ##
- Como ya se hemos comentado se pueden optimizar las imágenes comprimiéndolas. Hay muchos sitios web dónde puedes hacerlo online. No obstante, en algunos hostings, como el de Webempresa, de forma gratuita proporcionan un optimizador de imágenes llamado Imgoptimizer. Este servicio está automatizado y tan solo tienes que pedirlo desde tu área de cliente. Es pocos minutos los resultados te llegan al correo electrónico. Aplicando esta herramienta mejorarás varios puntos en Google Page Speed y/o Pingdom Tools. De media los resultados mejoran en un 19%. La optimización de las imágenes es global en toda la web. Sin embargo, tienes que tener en cuenta que la calidad de las imágenes será mucho peor. Yo mismo he utilizado esta herramienta, por lo que puedes observar que la pérdida de calidad en las fotografías que utilizo es evidente. Tuya es la elección entre calidad de imagen y mejora de la velocidad de carga web.
- Para solucionar el contenido estático se puede habilitar http2 mediante el protocolo ALPN que utilizan las versiones de los navegadores más recientes como Google Chrome. Esto también lo podéis preguntar en el hosting que estéis utilizando, como hemos indicado al principio del artículo. Los chicos de Webempresa lo activan sin problemas. Para esto debes tener instalado un certificado SLL, como el Let’s Encrypt que ofrece este alojamiento totalmente gratis. En WordPress veremos más adelante que se puede solucionar desde un plugin y creando un subdominio.
- Por lo que respecta a la carga del JavaScript y el CSS que bloquea la visualización del contenido de la mitad superior de la página, hay que tener en cuenta que la sugerencia que apunta la herramienta de Google Page Speed es muy estricta. La mayoría de plantillas (templates en Joomla) actualmente no lo contemplan. Google propone tener un archivo css o javascript pequeño al inicio y el resto de CSS o javascript cargarlo al final. Hay más información sobe esto en las mismas páginas de Google para desarrolladores:
– https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
– https://developers.google.com/speed/docs/insights/BlockingJS
No te olvides de hacer esto para mejorar la carga de la web
- Instala JPH Optimize: Este plugin comprime los archivos CSS y Javascript ubicados en la sección principal del blog. Esto hace que las peticiones al servidor se reduzcan de una manera considerable.
- Activa la comprensión Gzip desde la configuración global de tu Joomla. Una vez en Configuración global, pulsa sobre Servidor y desde ahí activarás la casilla de comprensión Gzip de las páginas.
- No sobrecargar Joomla de extensiones. Al igual que ocurre en WordPress con los plugins, en Joomla debes utilizar solamente las extensiones y componentes necesarios. Aquellos que no utilizamos o no sean realmente necesarios para el funcionamiento de nuestro Joomla será mejor que los eliminemos.
- Habilita las urls amigables en nuestro Joomla. Para habilitarlo tendremos que seguir la siguiente ruta: Sistema-Configuración global-Sitio. Ya en el apartado Configuración SEO seleccionaremos las Urls amigables y Usar la reescritura de Urls. Es entonces cuando iremos al achivo .htaccess y pegaremos las siguientes líneas al principio:
<FilesMatch «\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$»>
Header set Expires «Wed, 15 Apr 2020 20:00:00 GMT»
Header set Cache-Control «public»
</FilesMatch>
<ifModule mod_deflate.c>
<filesMatch «\.(js|css|html|php)$»>
SetOutputFilter DEFLATE
</filesMatch>
</ifModule>
- La caché de Joomla se activa desde Configuración global-Sistema. Desde allí seleccionamos la Caché Conservacional. Para mejorar aún más la caché de Joomla te recomendamos usar el plugin JotCache. En el siguiente artículo está muy bien explicado cómo instalar y configurar este plugin.
– https://www.webempresa.com/blog/mejorar-la-velocidad-de-carga-de-tu-joomla3.html
Ajustes en una web de prieba
♥ Tras aplicar estos consejos en Publicidadparaweb.com vamos a ver los resultados en Google Page Speed.
Resultado velocidad de cargas tras los ajustes.
89 puntos de 100. Esto está muy bien, teniendo en cuenta la cantidad de módulos, extensiones e imágenes que estoy utilizando. Os recuerdo que son peticiones que hacemos al servidor, por lo que aumenta el tiempo de carga de la web.
Voy a mostrar ahora el test de velocidad web en Pingdom Tools Speed, antes y después de aplicar estos consejos.
ANTES:
Resultados de la carga web antes los ajustes en Pingdom.
AHORA:
Resultados de la carga web en Pingdom tras los ajustes.
Como podéis ver la diferencia es brutal. Hemos pasado de 73 a 93 puntos. Nada más y nada menos que 20 puntos de diferencia. Las peticiones al servidor se han reducido de 96 a 78. Y lo más importante, la velocidad web ha pasado de ser de 1,72 a 1,29. Unos datos magníficos, que sin duda han ayudado en el posicionamiento de este blog. Aunque os recuerdo que este es solo un aspecto más de los más de 200 que afectan al SEO.
En este artículo podéis ver los principales aspectos a tener en cuenta en el posicionamiento SEO de vuestro blog o sitio web:
» https://joancasan.com/posicionamiento-seo-trucos-consejos-alternativas
Nota: Utilizar anuncios de publicidad siempre va a ir en contra de la velocidad de carga del sitio web.
¿Cómo mejorar la velocidad web en WordPress con un hosting rápido?
- En cuanto a WordPress, recomiendo revisar qué plugins no son necesarios y te están consumiendo más tiempo de ejecución. Si deseas detectar qué plugins están consumiendo en exceso puedes utilizar el siguiente plugin: P3 (Plugin Performance Profiler). Este plugin mide el impacto que tiene cada plugin que utiliza tu blog en el tiempo de carga. Podrás detectar aquellos que te están ralentizando la carga y decidir si realmente merece la pena tenerlos. De no ser así, es mejor desinstalarlos.
- Con respecto a habilitar la comprensión gzip, desde los servidores de Webempresa (el alojamiento que yo uso) se consigue accediendo a la siguiente ruta: cPanel-Software-Optimizar mi sitio Web.
- Crear un subdominio estático. Por ejemplo se crearía un subdominio llamado estaticos.levantemedia.com. Si lo creamos y estamos usando https no os olvidéis instalar un certificado para el subdominio que acabamos de crear. Además, el subdominio creado debe apuntar a la misma carpeta del dominio raíz. Plugins como WP Super Cache llevan integrado la opción de utilizar un subdominio estático desde la pestaña CDN. Si no tenéis suficiente con esto podéis añadir un CDN a vuestro hosting como CloudFlare. No obstante, http2 soluciona este problema.
- Optimiza la base de datos. Es totalmente recomendable de vez en cuando borrar la datos innecesarios que se han ido creando por el uso de nuestro WordPress. Por ejemplo, cada vez que actualizamos una entrada o se crea un comentario. Para mantener limpia la base de datos puedes utilizar el plugin WP-Optimize.
- Valora el plugin Autoptimize. Este plugin lo que hace es comprimir los ficheros Javascript, CSS y html. Puedes probar y ver si realmente mejora la carga de tu sitio web. Yo uso este plugin junto con Super Cache y los resultados son buenos.
Todo esto es posible con un buen hosting como el de Webempresa.
Conseguir una puntuación de 87 en dispositivos móviles en un sitio web con bastantes plugins y publicidad no es nada fácil. Pero aquí tenéis una muestra de que con estas optimizaciones en WordPress, es posible.
Resultados de la carga web en Page Speed de Google.
La guinda del pastel para que tu web vuele: Magic Cache
Y la guinda del pastel del hosting rápido Webempresa para que tu web sea ultrarápida llega con Magic Cache. Se trata de un sistema de caché, a nivel de servidor, que se basa en el acelerador Varnish. Estamos hablando de un sistema generado por el propio equipo de Administradores de Sistemas de Webempresa, en el cual se agrupan varias herramientas como OPCache, Varnish, Nginx, MemCache o Apache para conseguir tiempos de carga de menos de 1 segundo para páginas web estándar.
Magic Cache cachea todo el contenido de la página en la memoria RAM del servidor. Acceder a la memoria RAM es mucho más veloz que acceder al disco. Al no tener que entrar a los ficheros y bases de datos, se logra que los sitios web carguen mucho más veloces, con tiempos de respuesta de entre 60 y 140 milisegundos para páginas web de menos de 5 megas. En el siguiente vídeo queda muy bien explicado.
Los plugins de carga web imprescindibles
Resultados en la antigua web de Levantemedia, previa a Joancasan.com.
NOTA MUY IMPORTANTE: Cuando se actualicen los sistemas de gestión de contenidos a una nueva versión, tienes que verificar si todo esto sigue funcionando correctamente, sobre todo los códigos.
Como habéis podido comprobar, disponer de un hosting rápido es muy importante para mejorar la velocidad de carga web. Si seguís al pie de la letra estos consejos seguro que a Google le va a gustar mucho más vuestro blog y, por ende, os premiará con un aumento de posiciones en las SERP.
