Optimizar la velocidad de carga de tu web gracias a Google Page Speed

La velocidad de carga de una página web es uno de los factores que consideramos más importantes para la optimización SEO on-page. Influye directamente en la experiencia de usuario de nuestra web porque ¿a quién no le gusta visitar páginas que se carguen prácticamente al momento? ¿Cuántas veces hemos visitado una página y nos hemos salido antes de que terminara de cargar porque nos hemos cansado de esperar?

En este artículo vamos a localizar mediante la herramienta de Google, Page Speed, los principales elementos que provocan la ralentización de nuestra web, centrándonos en solucionar los que consideramos más importantes. Como podréis comprobar a lo largo del artículo, algunos de los mismos son bastante simples de configurar y suponen una mejora notable en la velocidad de carga. Por ello nos sorprende que, a día de hoy, existan muchas empresas que se venden como profesionales del posicionamiento web y no tengan en cuenta estos factores, algo que podemos comprobar realizando un simple test a su página con Google Page Speed.

 

Lo primero, medir la velocidad de carga de nuestra web con Google Page Speed

Google Page Speed es una herramienta web que Google pone a nuestra disposición de manera gratuita, para que podamos medir, mediante una escala de 0 a 100, la velocidad de carga de nuestra web, mostrando información adicional sobre los principales factores que influyen en la ralentización de la misma, y sugiriendo formas para optimizar el rendimiento de nuestra página. Debemos tener en cuenta que estos factores, aunque no son definitivos como hemos comentado antes, son factores SEO on-page que ayuda directamente a mejorar la experiencia de usuario, algo que nos puede ayudar a lograr una mejora considerable en nuestro posicionamiento web.

Google Page Speed test de velocidad

Velocidad de carga de Google en su propia herramienta Page Speed

 

Lo primero que debemos hacer es acceder a la página de Google Page Speed, e introducir la url de nuestra web para poder analizarla:

En las capturas anteriores podemos observar los factores de Google Page Speed nos recomienda mejorar. En este artículo nos centraremos en estos aspectos, y podrás comprobar personalmente la mejora que suponen para tu página web en base a la escala de 0 a 100 que nos muestra Google.

 

Aspectos principales a corregir para optimizar la velocidad de carga de tu web

En las siguientes líneas nos centraremos en los factores principales para optimizar la velocidad de carga de nuestra web, y que podremos modificar de una forma sencilla con independencia del lenguaje de programación o CMS que empleemos para nuestra página web, haciendo que a su vez nos aporten una mejora sustancial como para que merezca la pena aplicarlos:

 

Reducir el tiempo de respuesta del servidor

Reducir el tiempo de respuesta del servidor es uno de los factores principales, y deberíamos tenerlo en cuenta antes de pasar nuestra página web a producción. Por eso, la elección de un buen servicio de hosting es fundamental, debemos huir de proveedores con alojamientos baratos y/o compartidos, ya que dependeremos de factores externos que escapan de nuestro control; entre otras cosas, no tendremos control sobre las páginas de otros clientes que el proveedor tenga alojadas dentro del mismo servicio. Personalmente recomendamos para la mayoría de las webs la contratación de servicios de VPS, lo que nos permite una calidad mínima, garantizándonos una cantidad mínima de recursos para nuestra web, y evitando compartir nuestra máquina con otros clientes del proveedor. Ojo, no todos los VPS son iguales, ni todos los proveedores lo son, y para estos últimos, varían mucho las infraestructuras reales que ofrecen, así como el soporte que prestan, no son ni mucho menos los mismos en todos los proveedores. No obstante, trataremos de extendernos más sobre este tema en un próximo artículo sobre WPO (Web Performance Optimization), pero en resumen, aquí más que nunca, tiene sentido la frase que muchos conocemos: lo barato sale caro.

Por supuesto, todos los factores que comentaremos a continuación influirán en el tiempo de respuesta del servidor, aunque tampoco debemos olvidarnos de tener en la medida de lo posible un código limpio y evitar abusar del uso de módulos en nuestra página web.

 

Habilitar la compresión

Habilitar la compresión de nuestra página web es algo muy sencillo, para ello tendremos que acceder a través del servicio de ftp que nos haya proporcionado nuestro proveedor, y modificar el archivo .htaccess que encontraremos en la carpeta principal del ftp (deberíamos crearlo en caso de no existir), añadiendo al final del mismo las siguientes líneas de código:

# BEGIN GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
# END GZIP

Con esto, lo que estamos haciendo es indicarle a nuestro servidor que comprima previamente toda información que transmitamos desde nuestra página web hacia el navegador de cualquier cliente. Así logramos, a cambio de un pequeño aumento en la carga del servidor, reducir el tamaño de la información que nuestra web tiene que enviar a los navegadores.

 

Especificar caché de navegador

Para especificar la caché del navegador debemos incluir las siguientes líneas de código en el fichero .htaccess tal y como hemos comentado en el punto anterior:

<IfModule mod_expires.c>
<filesmatch «.(jpg|JPG|gif|GIF|png|PNG|css|js)$»>
ExpiresActive on
ExpiresDefault «access plus 30 day»
</filesmatch>
</IfModule>

Con esto, lo que buscamos es reducir la cantidad de información transmitida entre nuestra página web y nuestros clientes. No tiene mucho sentido que un navegador se descarguen las mismas imágenes de nuestra página cada vez que acceda a ella, con lo que lo que hacemos es indicarle a los navegadores que nos muestren la imagen que tienen guardada localmente en su caché, procedente de la visita que realizaron anteriormente a nuestra página.

Si vemos que tras realizar este cambio no se aplica, tendremos que activar en nuestro alojamiento el módulo correspondiente para su correcto funcionamiento. Os recomiendo, en caso de no tener los conocimientos suficientes en este sentido, que se lo solicitéis directamente a vuestro proveedor, ya que para ellos es una tarea sencilla y habitual.

Debemos tener en cuenta también que existen algunos recursos externos, a los que no le podremos modificar la fecha de caducidad, por lo que si usamos servicios como Google Analytics o los streams de Facebook o Twitter (algo muy habitual), por poner algún ejemplo, tendremos que asumir que no tendremos el control sobre dichos ficheros.

 

Otros aspectos a tener en cuenta para optimizar la velocidad de carga de tu web

A continuación trataremos otros aspectos que también influyen para la optimización de la velocidad de carga de nuestra web, pero en este caso, nos centraremos en cómo mejorarlos si tenemos hecha nuestra página con un CMS, en concreto WordPress. Si estás desarrollando tu página a medida, entendemos que debes tener los conocimientos suficientes como para aplicar estas mejoras, sólo debes tenerlas en cuenta.

 

Optimizar imágenes

Optimizar nuestras imágenes es algo que, aunque a muchos nos parezca algo elemental, una amplia mayoría ni siquiera lo tiene en cuenta. Y es que, ¿no creéis que no tiene mucho sentido hacer que nuestro navegador descargue una imagen el doble de grande que el recuadro donde nuestra página lo va a mostrar? ¿Tiene sentido almacenar los metadatos de la imagen que descargamos, es decir, información como el modelo de cámara con que se tomó la foto, la apertura del diafragma, la sensibilidad del sensor, etc.? Si fuéramos fotógrafos seguro que sí pero, en este caso, lo que buscamos es mejorar la experiencia del usuario, por lo que no sólo se trata de adecuar el tamaño de nuestra imagen al espacio donde se va a mostrar, sino de eliminar toda la información que no resulte útil para el usuario.

Para esto, nosotros usamos dos plugins de WordPressImsanityEWWW Image Optimizer. El primero reduce el tamaño de todas las imágenes que subamos de forma automática, a unos márgenes que consideremos lógicos. En nuestro caso,  consideramos que el tamaño de 1024×1024 píxeles es más que suficiente para la mayoría de las webs, y con esto también ayudamos a reducir el espacio de almacenamiento en nuestros servidores. El segundo plugin nos permitirá eliminar los metadatos innecesarios para nuestras imágenes, así como comprimirlas lo suficiente como para reducir su peso sin perder calidad.

 

Minificar JavaScript, CSS y HTML

Al minificar el código de nuestros ficheros, ya sea en lenguaje JavaScript, CSS o HTML, lo que buscamos como en la mayoría de los puntos anteriores es reducir la cantidad de información que se va a tener que descargar nuestro navegador. Lo que se hace realmente con la minificación es eliminar código innecesario para que nuestra máquina interprete el fichero, como son las líneas en blanco o los comentarios sobre el código que, si bien para el desarrollador son útiles ya que facilitan la comprensión lectora del código, al navegador no le aporta nada.

Es este caso, no estábamos convencidos con el plugin que usábamos hasta la fecha en WordPress, por lo que recientemente estamos probando JCH Optimize, que tiene dos versiones, una gratutita, suficiente para la mayoría de las webs, y otra de pago, que tendremos que estudiar más a fondo.

Con la siguiente imagen os podéis hacer una idea de la importancia de aplicar estas técnicas a través de un ejemplo muy simple:

Diferencia entre comprimir y minificar

Imagen obtenida de css-tricks

Aspectos más complejos que no vamos a tratar en este artículo

Aparte de todos los aspecto mencionados anteriormente, existen otros factores que requieren un mayor conocimiento de la materia, y que no trataremos en este artículo ya que pueden requerir cambios en el desarrollo o en la forma de plantear la estructura de nuestra página web, tal y como puede ser con el caso del punto: Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página, que, básicamente, lo que nos dice es que debemos evitar cargar contenido en la parte superior de la página que suponga una ralentización de la página, tales como slides avanzados, hojas de estilo (css) o ficheros de Javascript, ya que antes de mostrarnos la página, nuestro navegador descargará todos estos ficheros, lo que supondrá un aumento en el tiempo de carga de la web. Para ello, lo que os vamos a recomendar, si hacéis uso de WordPress, es que procuréis usar plantillas que ya estén contrastadas, que evitéis abusar del contenido dinámico en la portada de vuestra web, así como de los slides avanzados que hacen uso de efectos que, si bien, pueden resultar muy bonitos, no ayudan para nada en este sentido.

 

A continuación podemos ver como nos indica Google la mejoría una vez optimizados los factores anteriores:

Lógicamente, con algunos conocimientos más al respecto podremos mejorar estos valores, pero este creo que es un buen punto de partida para la mayoría de las personas que quieran empezar a tener en cuenta el WPO (web performance optimization) de su página web.

 

Por @targess

2 comentarios
  1. ivan carreño
    ivan carreño Dice:

    hola mi pagina tiene un slide en la pagina de inicio, hay alguna forma de mantenerlo pero aplicando código para «Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página», lo he hecho pero me desaparece el slide, hay alguna forma de mantenerlo??

    gracias

    Responder
    • josetoscano
      josetoscano Dice:

      Hola Iván, ante todo, gracias por escribir. Te recomendaría que buscaras y probaras un slide que no haga uso de JavaScript, se que existen algunos, ya que hoy día se pueden hacer slides aparentes con CSS3, pero personalmente no he probado ninguno. Con esto no deberías tener problemas al pasar los elementos JavaScript al final de la página.

      De todas formas, en mi opinión lo ideal es tratar de mantener un equilibrio entre la optimización y la funcionalidad de tu web, no se si te has fijado, que algunas webs al cargarlas hacen un efecto raro de visualización, esto es porque a costa de aplicar estas técnicas provocan que la web durante unas décimas de segundo (a veces más) se carguen sin estilos, ya que el navegador no es capaz de mostrarlos hasta que no los lee al final de la misma, esto suele causar una mala experiencia al usuario, sobre todo en páginas con tiempos de carga elevados que hace que no compense dicha optimización.

      PD: Acabo de encontrar este slider que no hace uso de JavaScript: CSS Slider. Seguro que existen más.

      Responder

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


El periodo de verificación de reCAPTCHA ha caducado. Por favor, recarga la página.