Speed page: Cómo mejorar la velocidad de carga de tu web para mejorar el posicionamiento SEO
Requisitos y funcionalidades para mejorar la velocidad de carga (page speed), uno de los factores SEO de más importancia.
Pasos para optimizar la velocidad de carga (speed page)de tu site
Seguro que te has preguntado alguna vez cómo puedes mejorar los resultados de tu página web, en cómo optimizar el posicionamiento web de tu tienda online y muchos te habrán dicho (y no sin razón) que crees contenido de calidad, que escribas para el usuario y no para los buscadores etc… pero no logras aumentar el tráfico hacia tu site. En un mundo tan competitivo con el del marketing online, la diferencia puede estar en los detalles, y uno de los detalles más importantes en el que deberías poner el foco es la Velocidad de carga de tu web (WPO)
Web Perfomance Optimization - Page Speed
Tu página web debe de cumplir una serie de requisitos y funcionalidades para mejorar la velocidad de carga con los que mejoraremos uno de los factores SEO y de posicionamiento web que más influyen en las SERPs (resultados de búsqueda), aparte de mejorar también la experiencia de usuario y reducir el ancho de banda de tu servidor web. Google ya nos dá algunas pistas
Especificar caché del navegador
Mejorar la velocidad de carga de una web (pagespeed) y a su vez el porcentaje de conversión de su negocio, pasa por cachear los elementos que la componen al realizar menos peticiones para visualizar cada página. Al utilizar la caché del navegador para recursos estáticos se ahorra tiempo al usuario si este visita el sitio más de una vez.
Los valores de expiración recomendados dependen de cada cuanto se actualice tu web, si bien, esos tiempos se pueden ajustar a posteriori.
Unos rangos de tiempo que pueden ser orientativos son:
- 900 para html (15 minutos)
- 3600 para xml (1 hora)
- 864000 para css, js, pdf (10 días)
- 2592000 para gif, png, jpg, ico, svg (30 días)
Habilitar la compresión Gzip
Los servidores tienen la capacidad de comprimir archivos en formato gzip antes de enviarlos para su descarga, es recomendable utilizar esta compresión Gzip para archivos con las siguientes extensiones:
- .js
- .css
- .html
- .xml
- .svg
- .woff
Combinar archivos externos
Uno de los factores que más negativamente afectan a la velocidad de carga de tu web es la llamada a muchos recursos externos. Por eso se recomienda combinar los archivos .js y .css para reducir el número de peticiones necesarias para la visualización del site.
No se puede hablar de número óptimo de ficheros, depende de la configuración de la página, lo importante es reducir. Pasar de 20 a 5 es muy buena mejora, 2 es una cifra que se puede fijar como objetivo.
Recomendaciones CSS:
Si los recursos CSS externos son pequeños, se pueden insertar directamente en el documento HTML. Al insertar todo el código CSS, es posible que PageSpeed Insights advierta que la mitad superior de la página es demasiado extensa.
Si se trata de un archivo CSS grande, se deberá insertar en el HTML el código CSS necesario para mostrar el contenido de la mitad superior de la página y aplazar la carga de los otros estilos hasta después de que el contenido principal se haya cargado.
- No insertar URIs de datos en los archivos CSS
- No insertar atributos CSS en elementos HTML
Recomendaciones JavaScript:
Para evitar que JavaScript bloquee la carga de la página, Google recomienda usar el atributo HTML async al cargar JavaScript. Por ejemplo: <script async src="my.js">
Minimizar HTML, CSS y JS
La minimización de recursos se refiere a la eliminación de caracteres/bytes innecesarios, como los espacios adicionales, saltos de línea, sangrías, etc. Es una implementación secundaria frente al Gzip, cacheo y unificación de archivos, pero puede aportar un ahorro extra el eliminar código innecesario en el HTML de la página.
Se recomienda para todos los archivos JS y CSS:
- Unificar cadenas de espacios en uno sólo
- Eliminar indentación
- Usar versiones .min
- Eliminar comentarios
Algunas herramientas para minimizar archivos serían las siguientes:
Los CMS suelen ofrecer plugins para realizar este tipo de optimizaciones, por ejemplo, para Wordpress existe WP Total Cache.
Optimizar imágenes
Utilizar el menor tamaño posible en las imágenes permite reducir el tiempo de carga de los recursos ya que las imágenes de la página se pueden optimizar para reducir su tamaño sin afectar significativamente su calidad visual.
Los formatos de imágenes recomendados por Google:
- Los archivos PNG son casi siempre superiores a los GIF, aunque solo son parcialmente compatibles con algunas versiones antiguas de navegador.
- Usa archivos GIF para gráficos muy pequeños o simples, por ejemplo, inferiores a 10 x 10 píxeles, o con una paleta de color de menos de 3 colores.
- Usa archivos JPG para todas las imágenes de estilo fotográfico.
- No utilices los archivos BMP o TIFF.
- En términos de imágenes la compresión no se refiere a Gzip sino a la reducción de peso sin pérdida de calidad (lossless). Las herramientas de diseño gráfico (ej.: Photoshop) cuentan con opciones para salvar las imágenes optimizadas para internet, con reducción de peso en distintos niveles.
Algunas herramientas que pueden ayudar a realizar este tipo de acciones serían: TinyPNG, CompressPNG, ImageOptim o PNGGauntlet.
Dimensiones
Especificar anchura y altura para todas las imágenes, bien por atributo o bien con clases de CSS, es uno de los factores analizados por Google en su puntuación de PageSpeed. Si no se usa estos atributos, el navegador debe esperar hasta la carga completa del fichero para renderizar el entorno de la imagen lo que conlleva un retardo en la velocidad de carga de la web.
Por otro lado, es importante asegurarse que las imágenes no se redimensionan, es decir, que si se descarga un fichero con una imagen de 1000px de ancho no se muestre luego a 500px. Es necesario usar imágenes del tamaño adecuado a su representación. En sitios mobile responsive, puede ser habitual usar las imágenes de mayor tamaño por defecto, aunque esto no es lo óptimo para la optimización de la velocidad de carga.
Uso de CSS Sprites
Los CSS Sprites son un conjunto de imágenes agrupadas en una única imagen, a cada una de ellas se accede mediante un desplazamiento respecto del borde superior izquierdo y sus dimensiones absolutas. Esta técnica se suele usar para las iconografías o elementos de background que repiten a lo largo de todo el site.
Evitar las redirecciones a páginas de destino
Las redirecciones recurrentes o en gran número pueden terminar aumentando la latencia (retardos temporales que se registran en una red. Estos retardos se producen por la demora en la propagación y en la transmisión de los paquetes de datos. Al sumarse todos estos retardos, se obtiene la latencia de la red)
Optimización de carga del primer pantallazo
Si se identifican los bloques de CSS y JS que pueden bloquear la visualización en primer pantallazo se puede mejorar aún más la velocidad de carga de la web, se trata de no hacer depender la visualización de los elementos del primer pantallazo de la carga de ficheros agrupados anteriormente.
No existe configuración única, dependerá de la página, pero puede ser necesario extraer parte de las reglas CSS o bloques javascript de los ficheros para cargarlos junto a la página.
Subdominios para contenidos estáticos
Debido a las configuraciones de los navegadores, existe un cuello de botella en la descarga de páginas con muchos elementos (imágenes, css, etc.. ) dentro de un mismo dominio.
Para mejorar esta carga en paralelo se pueden usar subdominios o incluso dominios externos para alojar ciertos elementos:
- Archivos relacionados a la plantilla: imágenes, archivos de javascript y hojas de estilos.
- Imágenes usadas para complementar el contenido.
- Archivos complementarios como PDF’s, videos o cualquier otro archivo que no sea generado dinámicamente.
- Con esto se logrará quitar carga del servidor principal, encargado de generar las páginas de un sitio web.
CDN
El uso de Content Delivery Network (CDN) es necesario para las webs que quieren ofrecer servicios a nivel internacional. Es imprescindible para dar servicio a usuarios de todo el mundo, ya sea para ofrecer la descarga de archivos o para implementar sitios y aplicaciones web.
Una CDN (Content Delivery Network) "es un conjunto de ubicaciones en el mundo, que redistribuyen localmente el contenido de los servidores y guardan en caché los archivos que no necesitan actualización permanente. Esto permite una mayor rapidez en el tiempo de descargas del site al producirse un balanceo de carga entre los servidores que forman parte del sistema y al descargar los contenidos desde el servidor más cercano a cada cliente"
Medición de la velocidad de carga
Para evaluar la evolución y el impacto en la velocidad de carga, se pueden utilizar diferentes herramientas de medición gratuitas:
Herramienta para la evaluación del rendimiento, velocidad, timeline de descargas de elementos, los recursos a los que acude la carga de la página, etc.
Las puntuaciones de velocidad de página van de 0 a 100, siendo 100 lo mejor en velocidad.
Otra Herramienta para medir la velocidad de carga: