Listado de la etiqueta: Web Performance Optimization

WPO, ¿qué es y para qué sirve el Web Performance Optimization?

WPO o Web Performance Optimization no es más que una serie de técnicas que se pueden emplear para mejorar el rendimiento de nuestras páginas, de cara sobre todo a mejorar la experiencia de usuario. En resumen, con WPO lo que buscamos es ser más eficientes.

Todos somos conscientes hoy en día, por ejemplo, que una página web con unos tiempos de carga reducidos facilita que el usuario permanezca en la misma, tanto si está navegando por sus diferentes secciones, como si intenta acceder a través de un canal externo. Por el contrario, si una página tarda mucho en cargar y no nos permite una navegación fluida, lo más probable es que el usuario acuda a otras fuentes para resolver sus consultas.

La aplicación de estas mejoras no van a garantizar una subida inmediata en tu posicionamiento web, pero de forma indirecta, van a servir para mejorar otros factores importantes para el SEO como son la tasa de rebote, el tiempo de visita en página, etc. Elementos que Google tiene muy en cuenta a la hora de posicionarnos en sus SERPs.

¿Cómo mejorarlo?

No es nuestra intención realizar un artículo técnico y tedioso sobre cómo realizar las mejoras o correcciones relativas al WPO. En todo caso, plantearemos algunos aspectos que consideramos importantes para la optimización, de forma que toméis conciencia de los mismos. No obstante, trataremos de hablar en otros posts, con algún ejemplo práctico, de todos estos factores.
Una herramienta que solemos tener en cuenta para mejorar el WPO no es otra que PageSpeed Insights de Google, la cual nos dará una métrica en una escala de 0 a 100, y nos aportará varias recomendaciones para mejorar nuestra web.

La elección del hosting

Se trata de hacer una buena elección de nuestro servidor, los elementos físicos y recursos de nuestro alojamiento, la cantidad y calidad de las infraestructuras que posea nuestro proveedor, el número de peticiones hacia el servidor, el uso adecuado de la caché, así como una serie de correcciones y optimizaciones que afectan a su rendimiento, pensando siempre en la mejora de la experiencia del usuario.

Alrededor del dominio y su contratación

Aunque pueda parecer un detalle nimio, existen elementos muy importantes alrededor de la elección de nuestro dominio, y no únicamente por la extensión del mismo o el nombre que elijamos, sino por otros factores desde el punto de vista del WPO que muchas veces no se tienen en cuenta, como la correcta elección de los servidores de DNS y su correcta configuración y optimización, lo que nos podría permitir reducir tanto las peticiones como la velocidad de resolución de nuestras DNS. Al igual que no todos los proveedores de hosting son iguales, tampoco todos los servidores de DNS lo son.

La importancia del software

Aunque parezca mentira, muchas empresas de desarrollo no tienen en cuenta los factores para la mejora WPO a la hora de realizar sus desarrollos, algunos tan sencillos como la optimización de nuestras imágenes, la minificación y combinación del código CSS y JavaScript o el uso correcto de las cookies; y otros algo más delicados como la optimización de las consultas a nuestras base de datos, que pueden afectar en gran medida en el rendimiento de nuestra web. Por suerte, algunos de estos factores se pueden optimizar a posteriori, más aún si usamos un CMS como WordPress, mediante la correcta elección y aplicación de módulos para estos cometidos.

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