Aumentar la velocidad de una web

Hace aproximadamente dos meses, escribí un artículo sobre cómo posicionar una página web previo a una serie de artículos que iría añadiendo en la sección IBERMEGA tutoriales. Pero por cuestión de exceso de trabajo tengo un poco olvidada ésta sección. Intentaré ser más eficiente en la inserción de nuevos contenidos en este apartado dedicado el posicionamiento web.

Cuando en términos de posicionamiento en buscadores hablamos de aumentar la velocidad de una web, en realidad nos referimos a optimizar los recursos o activos de la propia página web (imágenes, archivos JS y CSS, etc) y de la configuración técnica y eficaz del propio servicio de web hosting donde se aloja la página web. Entre ambas optimizaciones bien configuradas, página web y web hosting, se crea el resultado técnico y denominativo de: “la mejor experiencia del usuario”  que es la satisfacción del usuario cuando entra por primera vez en nuestro sitio web.

Siempre se ha dicho que, los primeros segundos son los más importantes para captar la atención de un nuevo usuario. Si conseguimos captar esa atención en el primer minuto, el éxito lo tenemos garantizado. Por el contrario, si la experiencia del usuario resulta negativa porque la web tarda en abrir, por mucho contenido de calidad que tengamos, estamos expuestos al fracaso constante, provocando las temidas visitas de rebote.

Aumentar la velocidad de la web y así conseguir que un nuevo usuario obtenga una buena experiencia al visitar nuestra web provocando que siga navegando por nuestro sitio o que guarde nuestra página en los favoritos de su explorador es muy sencillo de conseguir.

Medir la velocidad de nuestra web

Hoy, gracias a Google, disponemos de herramientas OnLine para medir la velocidad de apertura de una web y en consecuencia, poder optimizar los recursos y activos que están causando la ralentización. Éstas herramientas nos señalan donde están los errores y somos nosotros los que tenemos que repararlos manualmente, en la mayoría de los casos.

Por ejemplo, si analizamos nuestra web con PageSpeed Service que es una de las herramientas más populares de medición de Google, obtenemos dos tipos de resultados referentes a la visualización de la web para formatos de ordenador y dispositivos móviles como smartphones. Para ambos casos, nos mide “la experiencia del usuario” para móviles y ordenadores de sobremesa en un resultado de 100/100.

Dar soluciones a los resultados negativos de PageSpeed

Sin hacer mucho hincapié en todos los resultados que nos da PageSpeed, vamos a enumerar los más comunes, que son el problema del 98% de las páginas web que pululan por Internet:

• Especificar caché del navegador
• Habilitar compresión
• Minificar JS, CSS y HTML

Caché del navegador y habilitar compresión

Especificar caché de navegador y habilitar compresión, son dos configuraciones que concierne directamente al servicio de web hosting o servidor donde está alojada la página web. Si tu servicio es de calidad, seguramente ya lo tengas habilitado por defecto, por el proveedor de este servicio. Si por casualidad aparece este defecto en el análisis, deberás de solicitar al proveedor del web hosting que lo active. En caso contrario, de que tu proveedor no de soporte directo a éstas dos cuestiones, deberás de preguntar si puedes modificar el archivo .htaccess para servidores Linux y web.config para servidores Windows. En estos dos últimos puntos, la mayoría de los proveedores sí dan soporte de configuración. Pero, si por casualidad tampoco dieran soporte, la solución es muy sencilla: cambia de proveedor urgentemente, porque el éxito o fracaso de tu página web en su posicionamiento, depende de ello.

La caché y la compresión por el lado del servidor es muy importante que esté activada para que la experiencia del usuario sea la más elevada. Para ello, deberás de añadir dentro de los archivos .htaccess y/o web.config, dependiendo de qué tipo de servicio tengas contratado, las siguientes directivas:

.htaccess (servidores Linux)

# Cabecera
<IfModule mod_headers.c>
 <FilesMatch "\.(js|css|xml|gz|html)$">
  Header append Vary: Accept-Encoding
 </FilesMatch>
</IfModule>
# /Fin Cabecera
 
# Compresión
<ifmodule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/text text/html text/php text/plain text/xml text/css text/js application/x-javascript application/javascript
</ifmodule>
# /Fin compresión

En algunos servicios de hosting o servidores Linux, la directiva Accept-Encoding ya viene por defecto activada en el servicio. Antes de poner esta directiva en tu .htaccess, consúltalo con el servicio de soporte técnico de tu servicio de hospedaje que, si fuera afirmativo, no se debe de incluir el contenido de # Cabecera.

# Cache Headers
<ifmodule mod_headers.c>
  # Cache specified files for 1 days
  <filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
   Header set Cache-Control "max-age=86400, private"
  </filesmatch>
  # Cache HTML files for a couple hours
  <filesmatch "\.(html|htm)$">
   Header set Cache-Control "max-age=14400, private, must-revalidate"
  </filesmatch>
  # Cache Javascripts for 1 days
  <filesmatch "\.(js)$">
   Header set Cache-Control "max-age=86400, private"
  </filesmatch>
</ifmodule>

<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>

web.config (servidores Windows)

// Cabecera
<system.webServer>
 <httpProtocol>
  <customHeaders>
   <remove name="Vary"></remove>
   <add name="Vary" value="Accept-Encoding"></add>
  </customHeaders>
 </httpProtocol>
</system.webServer>
// Fin Cabecera

// Compresión
<urlCompression doStaticCompression="true"
  doDynamicCompression="true"
  dynamicCompressionBeforeCache="true"/>
<httpCompression directory="%SystemDrive%\inetpub\temp\IIS
  Temporary Compressed Files" sendCacheHeaders="true"
  cacheControlHeader="max-age=31536000"
  dynamicCompressionDisableCpuUsage="90"
  staticCompressionDisableCpuUsage="90"
  dynamicCompressionEnableCpuUsage="0"
  staticCompressionEnableCpuUsage="0">
  <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll"
    doStaticCompression="true"
    doDynamicCompression="true"
    dynamicCompressionLevel="10"
    staticCompressionLevel="10"/>
  <staticTypes>
    <add mimeType="text/*" enabled="true"/>
    <add mimeType="message/*" enabled="true"/>
    <add mimeType="application/javascript" enabled="true"/>
    <add mimeType="application/x-javascript" enabled="true"/>
    <add mimeType="application/json" enabled="true"/>
    <add mimeType="*/*" enabled="false"/>
  </staticTypes>
  <dynamicTypes>
    <add mimeType="text/*" enabled="true"/>
    <add mimeType="message/*" enabled="true"/>
    <add mimeType="application/javascript" enabled="true"/>
    <add mimeType="application/x-javascript" enabled="true"/>
    <add mimeType="application/json" enabled="true"/>
    <add mimeType="*/*" enabled="false"/>
  </dynamicTypes>
</httpCompression>
// Fin compresión

Igual que con los alojamientos Linux, pregunta a tu proveedor por si tuviera la directica Accept-Encoding activada por defecto en tu hospedaje en sistemas Windows. Recuerda que si tu proveedor le confirma que ya dispone de ello, no insertes el contenido de // Cabecera.

<system.webServer>
  <staticContent>
   <clientCache cacheControlCustom="public"
                cacheControlMaxAge="7.00:00:00" //d.hh:mm:ss
                cacheControlMode="UseMaxAge" />
   <remove fileExtension=".js" />
   <mimeMap fileExtension=".js" mimeType="text/javascript" />
   <remove fileExtension=".css" />
   <mimeMap fileExtension=".css" mimeType="text/css" />
  </staticContent>
</system.webServer>

Dependiendo del tipo de servidor que utilices, sube por medio de cualquier cliente FTP, el archivo correspondiente, al root (directorio principal) de tu sitio web. Cuando lo tengas subido en el root, ve a tu página principal y pulsa en el teclado de tu ordenador la tecla F5 para actualizar las cookies y comprobar que el archivo de configuración funciona correctamente. Si funciona, tu página abrirá mucho más rápida de lo habitual. Por el contrario, puede que te salga un error 500. Si este fuera el caso, elimina el archivo subido y, como he dicho antes, cambia de proveedor.

En el caso positivo, donde tu web abre mucho más rápido, compruébalo ahora desde PageSpeed y cerciórate de que en los resultados ya no sale como error lo de especificar la caché del navegador y habilitar la compresión, además de haber subido la puntuación.

Minificar JS, CSS y HTML

Minificar significa reducir. Por tanto, todos los archivos JavaScript (JS), Hojas de Estilo (CSS) y documentos HTML deben de ser reducidos desde su código fuente, eliminando espacios y saltos de línea.

Reducir o Minificar los archivos JS y CSS es una tarea muy fácil de hacer, pero los documentos HTML pueden llegar a ser un engorro peligroso si utilizas cualquier CMS como WordPress, PrestaShop, Magento, etc. Por eso, de momento vamos a minificar cada uno de los archivos JS y CSS que PageSpeed nos señala.

Abre con un editor de texto o cualquier programa de diseño web, cada uno de los archivos que aparecen en negativo en los resultados del análisis, seleccionas todo el código y lo copias. Abres esta página web: http://www.willpeavy.com/minifier/, pegas con Ctrl+V, pulsas en el botón Minify (minificar) y lo vuelves a copiar y pegar en el documento JS o CSS que tengas abierto y trabajando en ese momento.

Como consejo, hazlo con un solo documento JS o CSS, lo subes nuevamente al directorio correspondiente de tu web y lo compruebas con un nuevo análisis con la herramienta PageSpeed de Google. En teoría, el archivo en cuestión ya no aparecerá como “archivo para minificar”, además de que irá subiendo la puntuación del medidor. Sigue todos los pasos con cada uno de los archivos JS y CSS  restantes.

Los documentos HTML, si están en alguna subcarpeta de diseño como /templates, /themes, etc, puedes probar a reducirlos (minificar) uno a uno comprobando con F5 que no alteran el diseño. Por ejemplo, prueba primero con la plantilla que se refiere a la cabecera de la web. Ésta se suele llamar header o head y es la que cuelga todo el diseño de la web. Si al minificar se deforma, vuelve hacia atrás y déjalo como estaba. Por el contrario, si la reducción es correcta, hazlo con todos los documentos HTML restantes. Igualmente, comprueba en el medidor los resultados.

Ojo con la cantidad de JS y CSS

Es muy común ver muchísimas páginas web con más de TRES (3) archivos de JavaScripts y Hojas de Estilo. Si fuera tu caso, entiende que por mucho que reduzcas los archivos, estás ralentizando la carga de la web en ordenadores y/o teléfonos móviles de los usuarios. Date cuenta que, cuando una web abre por primera vez ante un usuario potencial, su navegador carga estos archivos uno a uno y según el orden en que estén incrustados en el código HTML. Y hasta que no terminan de cargar, la web no la visualizarán correctamente. La mayoría de las visitas de rebote se producen por culpa de esta mala práctica.

Aunque utilices solo dos archivos de cada, intenta unificarlos en uno solo. Si son dos CSS, únelos en uno solo y ponlo antes de la etiqueta </head> e igualmente hazlo con los JS. Unifícalo en uno solo y lo insertas antes de la etiqueta </body> ¿Por qué este orden? Porque cuando carga por primera vez la página, la primera descarga será la de la hoja de estilo y es justo la que lleva el diseño de toda la web. En último lugar cargará el JS que es el que hace el dinamismo o los movimientos del menú, ventanas modales (popups), etc.

¿Y si utilizo cualquier CMS?

Si tu web no es una web diseñada a medida, o sea que, utilizas cualquier CMS gratuito como WordPress, PrestaShop, Magento, etc, intenta que la plantilla web que escojas o que te hayan hecho tenga los activos minificados y unificados en solo uno por cada tipo.

Evita también la instalación de múltiples plugins. Éstos sobrecargan la web de forma extrema y lo que crees que es funcional, para el usuario potencial es una pesadilla provocando la huida a otro resultado de búsqueda.