Reducir la velocidad de carga

Optimizar o reducir la velocidad de carga de web se ha convertido en la obsesión de cualquier propietario de tienda online o web por la implicación que tiene en su posicionamiento SEO, sin embargo, es un aspecto más que trabajar entre muchos, que exige constancia y trabajo continuo. Por ello, en este artículo vamos a ver algunas pautas para mejorar nuestra velocidad de carga.

Lo primero, es mirar cuánto tiarda nuestra web en cargar, para ello tenemos distintas herramientas y aunque generalmente tomamos referencia las de google, existen otras que nos pueden aportar qué problemas tenemos que corregir.

Te recomiendo éstas Herramientas para medir la Velocidad de Carga de una Web.

Los avisos más comunes que suele mostrar Google PageSpeed Insights, son:

  • Optimizar imágenes
  • Minificar CSS
  • Minificar HTML
  • Minificar JavaScript
  • Prioriza el contenido visible
  • Evita los redireccionamientos a páginas de destino
  • Especificar caché de navegador
  • Habilitar compresión
  • Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

Vamos a verlos uno a uno:

Optimizar imágenes

Con el término “optimizar” nos referimos a reducir el peso de una imagen sin que se pierda calidad visual. Cierto es que, en sí, es una pérdida de calidad, pero hoy en día nuestras cámaras hacen fotografías de una calidad que ni las pantallas de los dispositivos ni nuestros ojos advierten, por ello les quitamos en función de lo que la imagen admita. Hay imágenes que por su combinación de colores, tipografías y contrastes admitirán un optimizado más agresivo que otro, pero siempre es necesario coger el menor peso independientemente si nos parece que 10kb está bien porque lo mismo esa imagen puede reducir hasta 1kb y reducido tiempo de carga de esta imagen, más velocidad para tus usuarios.

Para optimizar una imagen correctamente:

  1. Debemos ajustar la resolución a la que sea necesaria para medio en el que vamos a publicarla: 300ppp es para imprenta offset, 150ppp se suele usar mucho ahora por los dispositivos de última generación cuyas pantallas son de Alta Definición, y 72ppp sigue siendo la más habitual para el resto de dispositivos. Todo depende de tus usuarios y tu público objetivo, a través de google analytics podrás saber las características técnicas de los dispositivos con los que tus usuarios navegan por tu web.
    La resolución afectará al tamaño de la imagen, por eso te recomiendo lo hagas en primer lugar.
  2. Ajustar el tamaño de la imagen al tamaño máximo en el que se verá en nuestra web.
  3. Si tienes que hacer alguna corrección o retoque digital.
  4. Y finalmente el ajuste del porcentaje de calidad de la imagen.

La optimización debe ser una costumbre, pero tampoco vamos a negar que a veces las prisas nos hacen publicar imágenes sin una correcta optimización, por ello aquí tenemos un modo de controlarlo ya que nos indicará qué imágenes requieren optimización.

Para ello, podemos usar muchas herramientas, por ejemplo en Photoshop, Fireworks, Illustrator, etc., suele estar en ARCHIVO, GUARDAR PARA WEB o Exportar para web. Tienes la opción de modificar la calidad en porcentaje y sobre poner varias vistas con distintos porcentajes de reducción.

Optimización con Photoshop

También existen otras herramientas gratuitas como RIOT(Radical Image Optmization Tool) que optimiza de manera espectacular los JPG, también puedes ajustar el porcentaje, pero el automático suele funcionar, o PNG Gauntlet para .png

Sin embargo, en el caso de que PageSpeed Insights te recomiende optimizar imágenes de uno o dos recursos, puedes optar por hacerlo manualmente como hemos visto, leer sus instrucciones o puedes ir al final de la sección de VELOCIDAD y descargarte las imágenes ya optimizadas:

Descargar recursos optimizados de PageSpeed

Te descargará todo comprimido, lo des comprimes en tu ordenador y subes a tu servidor mediante cualquier FTP a la ruta que te indicaba PageSpeed y listo. Si vuelves a analizar ya no tendrás ésta advertencia.

Minificar HTML, Minificar CSS y Minificar JavaScript

Cuando hablamos de minificar un archivo, nos referimos a reducir al máximo los espacios y líneas vacías, así como comentarios que una vez finalizado el desarrollo no son necesarios y ocupan espacio.

Tanto para Joomla como Prestashop o WordPress, existen multitud de extensiones que sirven para hacer esto. Todas las extensiones están bien si no tienes otras opciones, pero debemos tener en cuenta que al instalar multitud de extensiones indiscriminadamente, también ralentizará tu web así que debes tener escrúpulos para instalarlos y evaluar si realmente los necesitas, también desinstalar aquellos que descubras que no usas y que se instalan por defecto con los gestores de contenido o si los has dejado de usar.

Como comentaba, la primera solución es instalar una extensión.

En el caso de Joomla cobra nombre JCH Optimize. Realmente hay que tener cuidado ya que lo que hace esta extensión es unificar ficheros en uno. Por ejemplo, si tenemos 5 hojas de estilos nos lo agrupará todo en una para reducir las llamadas a estos archivos. Sin embargo, en la unificación, no tienen en cuenta la jerarquía de las hojas de estilos, recordemos que prevalece la última en caso de que haya un mismo estilo en ambas hojas con diferentes atributos, y por lo cual se puede liar parda y transformar nuestra bonita web en un churro.
Por lo que antes de instalar nada copia de archivos CSS por separado.

La segunda solución es usar herramientas para minificarlos.

Tenemos web/herramientas que hacen justo ésto:

Para CSS: CSS Compresor

CSS Compresor

Para HTML,PHP Y JS: HTML MINIFIER

Para Minificar estos archivos hay que tener claro que el desarrollo de la web ha finalizado ya que será casi inviable trabajar con estos archivos en el futuro, no imposible, como si a una costurera le haces coser a vela, poder puede, pero no es recomendable. Así que antes de minificar te recomiendo que copies el archivo en tu local o servidor de trabajo backend y el archivo minificado lo renombres con las siglas .min de este modo:

index.php

Código natural tras maquetación

index.mini.php

Código comprimido

  1. Trabaja siempre sobre el que no está comprimido ( index.php)
  2. Copia su contenido y lo comprimas con la herramienta determinada (index.min.php)
  3. Subelo al servidor
  4. Quitale la extensión .min.

De este modo trabajarás cómodamente siempre y de manera eficiente.

Y la última opción y no por ello la peor, tomar los archivos que te descargaste de PageSpeed y subirlos.

Prioriza el contenido visible

Esto es tan simple como una maquetación HTML correcta, debes conocer la estructura básica de una web y las etiquetas de marcado de este modo el navegador sabe cuál cargar antes y cuáles después.

Evita los redireccionamientos a páginas de destino

Los redireccionamientos ralentizan el llegar al contenido, debes evitarlos sobre todas las cosas si te muestra este aviso revisa si manualmente has metido en el .htaccess redirecciones del tipo 301 o 302 o algún recurso lo hace. Si es así, evalúa si realmente necesitas esa redirección o puedes poner directamente el nuevo enlace o eliminarlo sino puedes.

Especificar caché

Tenemos dos importantes puntos dónde configurar la caché:

  • Configurar nuestro gestor de contenidos
  • Crear correctamente nuestro archivo .htaccess

En los gestores de contenido siempre hay material al respecto por parte de las comunidades.

En el caso de Joomla, pese a que hay muchos plugins, sigo insistiendo en que hay que ser escrupulosos en su uso porque no suelen ser necesarios. La caché se configura así:

Configurar nuestro gestor de contenidos

Para Joomla:

Vamos a EXTENSIONES–>Plugins y buscamos Caché

Caché Joomla

Lo activamos porque por defecto, viene deshabilitado.

Si entramos en él, activaremos la opción Usar la caché del navegador. Guardamos y cerramos.

Luego debemos ir a SISTEMAS–>Configuración Global–> Pestaña Sistemas

Caché joomla Sistemas

Activamos la caché y guardamos.

Después nos dirigimos a SISTEMA–>Configuración Global –> Pestaña Sitio y activamos las URLs amigables y Usar la reescritura de URLs

Para Prestashop:

Puedes consultar el artículo relacionado sobre Optimizar Velocidad de Carga con Prestashop de aquihaydominios.com

 Crear correctamente nuestro archivo .htaccess

Generalmente joomla lo instala con el paquete de instalación como htaccess.txt en la raíz del sitio, es decir, no está dentro de ninguna carpeta. Normalmente te advierte de que debes cambiarle el nombre, sino lo has hecho es el momento de pasar de htaccess.txt a .htaccess Es importante el punto que va delante, ¡no lo olvides! Todas las webs deben tenerlo, sino lo ha creado tu gestor de contenidos créalo tu.

Dentro ponemos el código siguiente:

<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|woff|svg)$">
 Header set Expires "Wed, 15 Apr 2016 20:00:00 GMT" Header set Cache-Control "public"
</FilesMatch&gt

Si quieres especificar un tiempo determinado para cada tipo de archivo puedes usar otra manera más extensa y concreta por tipo de archivo.

<IfModule mod_expires.c>
 ExpiresActive On ExpiresByType image/jpg "access 1 year"
 ExpiresByType image/jpeg "access 1 year"
 ExpiresByType image/gif "access 1 year"
 ExpiresByType image/png "access 1 year"
 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" 
</IfModule>

Si PageSpeed te recomienda establecer la caché de un tipo de archivo que no está especificado en el código anterior, no temas incorporarlo. Normalmente, el archivo que te avisa PageSpeed de que no tiene especificada la caché es curiosamente de google analytics, que al estar alojado fuera de tu servidor y pese a que nos da el código Google propiamente, no tenemos forma de especificarle caché.

analytics

 

Habilitar compresión

Tenemos varias formas de activar la compresión, por el gestor y por nuestro archivo .htaccess

En nuestro archivo .htaccess tras lo que pusimos unas líneas más arriba de este artículo, añadimos:

<ifModule mod_deflate.c>  <filesMatch ".(js|css|html|php)$"> SetOutputFilter DEFLATE </filesMatch>  </ifModule>

Después haz la prueba de velocidad, si no te funcionara tendrías otra posibilidad:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Solamente para webs alojadas en Apaches.

Y después vamos a configurar la compresión en jommla:

Vamos a Sistema–>Configuración Global  –> Pestaña Servidor

Activa la opción Compresión ‘Gzip’ de páginas.

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

Las soluciones a éste aviso que he encontrado tampoco han sido muy buenas pero al menos ha dejado de ser un error a ser una recomendación.

Una de las soluciones poco ortodoxas son ponerlo al final del código, es decir, los <script> en lugar de cargarlos en el head, lo cortamos y pegamos justo antes del cierre del </body>. Recordemos que lo correcto es ponerlas siempre entre las etiquetas de <head></head>.

Otra “solución” es la carga asyncrona que realmente la veo enrevesada y sin resultados porque también trae otros problemas. Pondríamos “async” en el código del script:

<script async src="my.js">

Escogiendo la primera opción, primeramente nos topamos con el problema de que el framework de Bootstrap para joomla mete multitud de .js que no usaremos o que en la versión Joomla 3 ya no son necesarias, lo malo, es que hay otras que sí, así que lo primero es indicarle cuales sí, cuales no.

Por ejemplo, vamos a decirle que no cargue la de conflict, ya que joomla 3 puede trabajar con una u otra librería, y lo escoges tu, no hay conflicto. Así que dentro del pondremos:

<?php unset($this->_scripts['/turuta/jquery-noconflict.js']); ?>

Si tenemos más .js que queramos que no cargue porque no usaremos, simplemente ponemos la misma línea y cambiamos la ruta del archivo.
Dejaremos que carguen aquellas que sí necesitamos al inicio de la carga para que ésta funcione, simplemente no poniéndola o comentándola con // antes del unset.
Y los archivos que necesitamos que carguen, pero no es necesario al comienzo de la carga, los pondremos antes de la etiqueta </body> habiendo evitado su carga al inicio de la carga en las etiquetas <head>y </head> con unset.

Y para la visualización de CSS, he agrupado todos con @import dentro de una hoja, no es una bonita práctica… pero funciona algo, y colocado la carga del archivo css como se debe dentro del head.

Otras recomendaciones:

  • Evita tener recursos en otros servidores a los que tengas que llamar, por ejemplo, si utilizas bancos de contenidos tan supuestamente recomendados hoy en día, y que afectarán a la carga de tu web.
  • Evita instalar extensiones para todo, elimina las que pueda traer tu gestor por defecto y no te sean útilies, desinstala las que dejaste de usar o se quedaron obsoletas y mantenlas actualizadas.
  • Revisa cada X tiempo la velocidad de tu web en distintas herramientas para detectar problemas ya que no hay web perfecta siempre, no solo referentes a la velocidad, también a la experiencia del usuario.
  • Si muestra el aviso “Reducir el tiempo de respuesta del servidor” de manera habitual, debeis consultar con los administradores de vuestro servicio de hosting o alojamiento web ya que probablemente estáis usando un servidor compartido, suelen ser más económico y puede estar sobre cargado.

De este modo estamos muy cerquita de tener grandes resultados:

Resultados

Resultados móviles

 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s