Como Aumentar la Velocidad de Carga tu Web

¿Que si es importante la velocidad de tu sitio web?

Amazon incrementa sus ingresos un 1% por cada mejora de 100 ms en el tiempo de carga.

Lo mismo hace Google. Sus experimentos demuestran que cuanto más rápida es una web, más tiempo pasan los usuarios navegando por ella. No es de extrañar que la velocidad sea un factor de ranking en Google.

Pero eso no es todo. Un estudio ha desvelado que 3 segundos es lo máximo que un visitante está dispuesto a esperar antes de abandonar el sitio.

Por todo ello queda claro que acelerar tu web es imprescindible, y no sólo para posicionarte en Google, sino para preservar tus ingresos.

En esta guía te explico cómo optimizar el rendimiento de tus páginas y la experiencia de usuario para lograr rankings y beneficios más altos.

Para realizar un test de velocidad de tu sitio web y analizar su rendimiento, puedes utilizar varias herramientas en línea que ofrecen informes detallados. Aquí te explico algunas de las opciones más populares y cómo usarlas para obtener el máximo provecho.

Realizar un test de velocidad de tu sitio web y analizar su rendimiento

1. Google PageSpeed Insights

• URL: PageSpeed Insights
• Cómo usarlo: Solo necesitas ingresar la URL de tu sitio web y hacer clic en “Analizar”. La herramienta evaluará tanto la versión móvil como de escritorio de tu web.
• Qué ofrece: PageSpeed Insights te proporciona una puntuación general de rendimiento y muestra oportunidades de mejora, como la optimización de imágenes, la eliminación de JavaScript no utilizado y la reducción del tiempo de carga.

2. GTmetrix

• URL: GTmetrix
• Cómo usarlo: Introduce la URL de tu sitio web y selecciona la ubicación desde la que quieres probar la velocidad (GTmetrix ofrece distintas ubicaciones para análisis de prueba).
• Qué ofrece: GTmetrix genera un informe detallado con métricas clave como el “Tiempo hasta el Primer Byte” (TTFB), “Tiempo de Carga Total” y “Largest Contentful Paint” (LCP). También sugiere áreas de mejora, como la compresión de archivos o el uso de un CDN.

Reducir el tiempo de respuesta

Lo que tarda tu servidor en responder a una solicitud del navegador se conoce como tiempo de respuesta. Cuanto mayor es, más lentas son tus páginas. Y no importa lo bien optimizadas que las tengas, el tiempo de respuesta suma a todo lo demás.

Cualquier sitio web debería aspirar a 200 ms o menos, que es lo que Google recomienda.

Cómo medir el tiempo de respuesta del servidor

Introduce tu sitio en la herramienta Server Test y selecciona el país más cercano a tus visitantes. Te dará el tiempo de respuesta (response time) como la suma del tiempo que lleva la búsqueda de DNS, la conexión y los posibles redireccionamientos.

Cómo mejorar el tiempo de respuesta del servidor

Si el tiempo de respuesta de tu servidor está por encima de 200 ms, debes intentar reducirlo ante todo. Tienes varias alternativas:

• Descargar al servidor– Si el servidor tiene una carga de trabajo demasiado grande, no podrá responder agilmente a los solicitudes que se le hagan. Puedes liberarlo si optimizas tus páginas para que empleen menos recursos. También puedes usar una CDN para distribuir la carga en varios servidores alrededor del mundo, aunque esta opción no sirve si tus visitas proceden de una misma región o país.
• Optimizar el servidor– Quizá el servidor hace mal uso de los recursos. Si está en tu mano, puedes acelerar su respuesta instalando otro software (p.e. NGINX o LiteSpeed en lugar de Apache). También puedes evitar los cuellos de botella si aumentas los recursos (p.e. más memoria, almacenamiento y potencia del procesador), o incluso si cambias la tecnología (p.e. discos SSD en lugar de HDD).
• Cambiar de hosting– Cuando ya no puedes mejorar más, es la única solución. Si estás en un servidor compartido y se te queda corto te interesará migrar a un VPS. Pero si ya estás en un servidor virtual probablemente quieras pasarte a uno dedicado. Para WordPress te recomiendo un hosting especializado como Synthesis o WP Engine.

Minimizar las solicitudes HTTP

Según Steve Souders en el libro High Performance Web Sites:

Sólo el 10-20% del tiempo de respuesta se emplea en descargar el documento HTML. El otro 80-90% se emplea haciendo solicitudes HTTP para los componentes referenciados en la página.

Esta proporción, conocida como regla de oro del rendimiento web, sugiere que un método eficiente para mejorar el tiempo de respuesta es reducir los componentes en la página y, por consiguiente, las solicitudes HTTP.

Qué componentes puedes plantearte quitar

No hay forma de saber de antemano qué componentes quitar. Debes valorar si el beneficio que ofrecen las imágenes, hojas de estilo y scripts de tus páginas superan el retraso que provocan en la carga.

Dependiendo del caso, puede que te sobren:

• Widgets
• Insignias sociales
• Botones
• Imágenes
• Iconos
• Avatares

Si no lo ves claro, piensa en qué componentes necesita ver el usuario en la página (¿con cuáles interactúa?) Te ayudará a identificar aquellos de los que puedes prescindir.

El problema de los scripts de terceros

Debes ser especialmente crítico con los scripts de terceros, pues son el mayor problema de los sitios lentos. Los códigos de seguimiento, publicidad y redes sociales llaman a recursos externos que a su vez pueden depender de otros recursos, provocando el aumento en cadena de solicitudes HTTP (efecto script de cuarta persona).

Cómo reducir las solicitudes HTTP sin quitar componentes

El problema de eliminar componentes es que implica un compromiso. Por cada imagen, archivo CSS o JavaScript que quitas te libras de al menos una solicitud HTTP, pero también de una funcionalidad, y llega un momento en que no puedes deshacerte de un sólo componente más.

Pues bien, ciertas técnicas permiten reducir el número de solicitudes HTTP sin tener que renunciar a ninguna característica:

• Mapas de imágenes– Permiten asociar varias URL a una imagen. Dependiendo del área de la imagen sobre la que el usuario hace clic, es conducido a una URL concreta. Aunque la técnica apenas se usa, es útil para ahorrar solicitudes HTTP porque evita tener que cargar una imagen por cada URL de destino. Puedes aprender a configurar mapas de imágenes aquí.
• Sprites CSS– La técnica consiste en combinar varias imágenes en un sólo archivo y emplear las propiedades CSS de imágenes de fondo para mostrar cada una individualmente. De este modo, basta con enlazar un archivo de imagen para disponer de todas las imágenes necesarias en la página, lo que ahorra solicitudes. En esta guía tienes cómo implementar sprites.
• Imágenes en línea– Existe la posibilidad de incluir imágenes dentro del documento HTML mediante el esquema data: URI. Es similar al esquema mailto: que seguramente conoces, y consiste en incluir los datos de la imagen en la URL siguiendo el formato data:[image/<formato>][;base64],<datos>. La codificación base64 aumenta el tamaño de la imagen, pero cuando se trata de imágenes pequeñas (p.e. iconos) compensa las solicitudes HTTP. Puedes generar imágenes en línea mediante la herramienta Base64 Image Converter.
• CSS y JavaScript combinados– En lugar de dividir las hojas de estilo y los scripts en varios archivos pequeños, se pueden reducir las solicitudes HTTP si se combinan en archivos más grandes. Ahora bien, la idea no es juntar los CSS con los scripts, sino combinar varias hojas de estilo en un solo archivo CSS y varios scripts en un sólo JavaScript. En el mejor caso, tendrás un único archivo de cada, aunque no siempre es fácil.

Minimizar las búsquedas de DNS

Para acceder a un recurso web, el navegador debe contactar con un servidor DNS y obtener la dirección IP donde se aloja. La operación se conoce como búsqueda de DNS y debe repetirse una vez por cada dominio al que la página llama para obtener recursos.

Las búsquedas de DNS conllevan un retraso en la carga debido al tiempo que el navegador pasa esperando la IP, de ahí que cuantas menos búsquedas se hagan, menor será la latencia.

Cómo identificar las búsquedas de DNS

Puedes hacerte una idea accediendo al código fuente de la página (CTRL+U en el navegador) y contando el número de dominios distintos del que la página obtiene recursos (imágenes, hojas de estilo y scripts). Aunque si quieres tener una visión realista de cómo las búsquedas de DNS afectan al tiempo de carga, lo más práctico es usar la herramienta WebPageTest.org.

Tras analizar la página, el gráfico en cascada mostrará la cantidad de búsquedas de DNS (en inglés, DNS lookup), cuándo se realizan y el tiempo que consume cada una. Quizá te sorprenda.

Cómo minimizar las búsquedas de DNS

Cuando la caché del navegador está vacía, el número de búsquedas de DNS equivale al número de dominios en la página web. No es así la segunda y sucesivas visitas debido a que el navegador puede recordar la equivalencia dominio-IP. Por tanto, minimizar las búsquedas de DNS tiene el objetivo de reducir el tiempo de carga en el primer acceso.

Hay dos formas de mantener al mínimo las búsquedas de DNS:

• Reducir el número de dominios– Cuantos menos dominios tenga una página web, menos tiempo se empleará en búsquedas de DNS. Ahora bien, en la mayoría de los casos conviene conservar más de un dominio para permitir la descarga en paralelo.
• Activar Keep-Alive– Al usar la cabecera HTTP Keep-Alive, la conexión se mantiene abierta durante la sesión. De este modo, se evita tener que repetir la búsqueda de DNS por cada solicitud que el navegador hace al servidor.

Activar Keep-Alive

Antiguamente, cada vez que el navegador solicitaba un recurso al servidor había que establecer una nueva conexión. Esto retrasaba la carga dado que abrir una conexión conlleva un tiempo y las páginas suelen hacer varias solicitudes al mismo servidor.

La cabecera HTTP Keep-Alive se ideó para no tener que abrir y cerrar conexiones continuamente. Lo que hace es permitir que el navegador haga múltiples peticiones al servidor sin cerrar la conexión, lo que ahorra tiempo.

Cómo comprobar Keep-Alive

Aunque Keep-Alive es la configuración por defecto en HTTP/1.1, es posible que tu proveedor de hosting lo haya desactivado. Por eso es importante verificarlo.

La herramienta Keep Alive Checker comprueba si tu servidor mantiene abiertas las conexiones, aunque también puedes revisar las cabeceras HTTP y buscar aquella que dice Connection: keep-alive.

Cómo activar Keep-Alive en Apache

Hay dos formas de hacerlo, dependiendo de si tienes acceso al archivo de configuración de Apache o no.

.htaccess

Si trabajas con un servidor compartido, tendrás que añadir las siguientes líneas al archivo .htaccess:

<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>

Archivo de configuración de Apache

Abre el archivo (normalmente en /etc/httpd/conf/httpd.conf) e incluye las líneas:

KeepAlive On
MaxKeepAliveRequest 100
KeepAliveTimeout 15

Esta es la configuración por defecto, donde:

• KeepAlive On– Activa o desactiva Keep-Alive
• MaxKeepAliveRequest– Establece el número máximo de peticiones que aceptara una misma conexión. En principio no deberías necesitar más de 100.
• KeepAliveTimeout– Establece el tiempo que el servidor pasará esperando nuevas solicitudes de un cliente. 15 segundos pueden ser demasiado, por lo que una configuración más eficiente podría estar en 5 segundos.

Cómo activar KeepAlive en NGINX

Añade las siguientes líneas al archivo de configuración de NGINX (normalmente en /etc/nginx/nginx.conf):

keepalive_disable msie6;
keepalive_requests 100;
keepalive_timeout 75s;

Esta es la configuración por defecto, donde:

• keepalive_disable– Desactiva Keep-Alive en ciertos navegadores. Puedes activarlo para todos con el parámetro none.
• keepalive_requests– Establece el máximo de peticiones que aceptara una misma conexión. En principio no deberías necesitar más de 100.
• KeepAliveTimeout– Establece el tiempo que el servidor pasará esperando nuevas solicitudes de un cliente. 75 segundos pueden ser demasiado, por lo que una configuración más eficiente podría estar en 5 segundos.

Minimizar las redirecciones

Cuando el navegador trata de acceder a una página o recurso redireccionado, el servidor responde indicando que la página se ha movido y dónde debe buscarla. Entonces el navegador solicita la nueva ubicación y, si no está redireccionada, muestra el contenido tras su descarga.

Las redirecciones aumentan la latencia puesto que ir de una ubicación a otra consume tiempo. Hasta que el navegador no alcanza el destino de la redirección y el contenido está disponible, el usuario debe esperar frente a una página en blanco.

Cómo saber si tienes redirecciones

Las redirecciones afectan principalmente a páginas HTML, aunque también pueden configurarse sobre componentes dentro de la página (p.e. imágenes, hojas de estilo, scripts). Debes comprobar ambas posibilidades para asegurarte de que ninguna redirección retrasa tus páginas.

• Página redireccionada– Es el caso más común, una página HTML redireccionada a otra. Puedes comprobarlo introduciendo la URL en el navegador y observando si cambia. Otra opción es usar un verificador como Redirect Checker. Por otro lado, Mobile Redirect Checker permite averiguar si el sitio redirecciona en función del dispositivo móvil de acceso.
• Componentes redireccionados– Otro caso menos evidente es aquel en el que los recursos solicitados por la página están redireccionados. Para comprobar esto necesitas instalar la extensión Live HTTP Headers en Chrome o Firefox. Tras activar la extensión recarga la página; verás todos los recursos enlazados y sus correspondientes códigos de respuesta en su pestaña. 301 o 302 implican redirecciones.

Qué hacer con las redirecciones

Como norma general, sustituye los enlaces a páginas o recursos redireccionados por los destinos finales de la redirección. Esto incluye tanto los enlaces situados en el contenido visible como los enlaces a componentes en el código de la página.

Algunas redirecciones son inevitables. Otras sin embargo, requieren un tratamiento especial:

• Redirección canónica– Es la que va de www a no-www o viceversa. Si la mayor parte de tu tráfico entra por la versión redireccionada, cambiala. Tienes varias opciones:
  • Redirección 301 en .htaccess
  • Dominio preferido en Google Webmaster Tools
  • Ajustes de configuración del CMS (en WordPress, Ajustes > Generales)
• Redirección segura– Es la que conduce a la versión HTTPS del sitio. En su lugar, es recomendable usar HTST (HTTP Strict Transport Security o seguridad de transporte HTTP estricta). HTST indica al agente de usuario que siempre debe acceder al dominio vía HTTPS, lo que hace innecesaria la redirección. Aquí tienes cómo implementarlo en Apache, NGINX y otros servidores. También puedes darte de alta en esta lista mantenida por Google.
• Redirección móvil– Es la que conduce a la versión móvil (p.e. example.com) para al usar una configuración de URL separadas. La única forma de librarte de la redirección es cambiar a un diseño adaptable o a publicación dinámica.

Priorizar el contenido visible

No tiene sentido cargar los elementos de la parte inferior de la página antes que los de la parte superior; el usuario tendrá que esperar a un contenido que quizá nunca vea. Muéstrale primero lo que tiene delante y parecerá que tus páginas cargan antes, pese a tardar igual.

Cómo adelantar el contenido visible

Lo cierto es que no hay un método universal. Tienes que revisar tus páginas y averiguar cómo organizar el código para que los elementos prioritarios se carguen antes.

Google propone algunas ideas:

Si el código HTML carga widgets de terceros antes que el contenido principal, cambia la prioridad para que el contenido principal se cargue primero.

Si el sitio utiliza un diseño de dos columnas con una barra lateral de navegación y un artículo, pero el código HTML carga la barra lateral antes que el artículo, haz que se cargue el artículo primero.

Como norma general, asegúrate de que aquello que el navegador muestra a primera vista se sitúa delante de todo lo demás en el código HTML de la página. Cualquier cosa que implique hacer scroll, puede dejarse para después.

Otros métodos para adelantar el contenido visible

Aparte de priorizar los elementos más importantes, puedes lograr que las páginas se muestren antes si además usas los siguientes métodos:

• Aplazar la carga de JavaScript
• Adelantar la carga de CSS
• Reducir el peso de la página mediante compresión, optimización de imágenes y minificación

Todos estos métodos se explican a continuación.

Aplazar la carga de JavaScript

Los códigos JavaScript tienen un efecto nefasto en la velocidad de carga. Si una imagen viene detrás de un script en el código HTML, el usuario tendrá que esperar hasta que el script termine de cargarse para poder verla.

En Google saben muy bien que esto genera una mala experiencia, por esa razón PageSpeed te dice que “el JavaScript bloquea la visualización del contenido de la página”. La solución pasa por retrasar la carga del código al final.

Soluciones al bloqueo de visualización por JavaScript

Existen varias soluciones, aunque no todas funcionan en todos los navegadores:

• Incrustar el script– Si el código es pequeño, puedes insertarlo directamente en el HTML de la página mediante <script type=”text/javascript”>código</script>. Normalmente el navegador pasará a mostrar la página.
• Usar carga asíncrona– La sentencia <script src=”javascript.js” async> carga el script en paralelo, lo que permite mostrar otros elementos de la página mientras tanto. Tiene la pega de que no funciona si el script tiene sentencias write y que tampoco garantiza que la visualización se desbloquee.
• Aplazar la carga– Es la solución más eficaz, aunque no vale para todos los scripts. Consiste en retrasar la carga de JavaScript hasta el momento en que el contenido de la página se muestra en pantalla. Te explico cómo hacerlo a continuación.

Cómo hacer que JavaScript cargue en último lugar

En primer lugar, necesitas reunir todos los códigos JavaScript en un mismo archivo. Coloca uno detrás de otro con ayuda de un editor de texto y guarda el archivo con la extensión JS (Notepad++ te será útil).

Después, borra los enlaces a los recursos de JavaScript en la página. Por último, coloca el siguiente código al final de la página (antes de la etiqueta </body>) sustituyendo la URL por la ruta absoluta donde tienes alojado el archivo:

<script type=”text/javascript”>
function downloadJSAtOnload() {
var element = document.createElement(“script”);
element.src = “http://www.example.com/aplazar.js”;
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener(“load”, downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent(“onload”, downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Lo que hace este código es esperar a que se cargue la página al completo, después carga el archivo de JavaScript.

Qué scripts se pueden aplazar y cuáles no

Ten en cuenta que el método funciona para cargar JavaScripts que hacen cosas tras la carga de la página, como medir visitas (el mejor ejemplo es el código de Analytics). Y aunque puedes intentar configurarlo para bloques de publicidad o incluso insignias sociales, normalmente no funcionará si el recurso es necesario para mostrar la página, como ocurre con jQuery.

Adelantar la carga de CSS

Los archivos CSS (Cascading Style Sheets u hojas de estilo en cascada) le dicen al navegador cómo representar el contenido de la página. Al contrario de lo que ocurre con los JavaScript, es más eficiente cargarlos en primer lugar.

Cuando los CSS se sitúan al inicio del código HTML, ayudan a percibir que la carga se realiza progresivamente. Pero cuando se dejan para el final, retrasan la visualización del contenido, por lo que el usuario debe contemplar una pantalla en blanco durante más tiempo.

Cómo optimizar la carga de CSS

Existen varios métodos para acelerar la carga de los archivos CSS:

• Poner los CSS arriba– Si pones los CSS en primer lugar, se cargarán antes, y antes comenzará el usuario a ver elementos en la página.
• Combinar archivos CSS– Descargar varios archivos ralentiza la carga debido al tiempo extra que requiere cada solicitud. Si tu sitio emplea más de una hoja de estilo, crea un archivo que las englobe. Descargará antes que haciéndolo por separado.
• Reducir el tamaño del CSS– Cuanto más pequeño sea archivo antes cargará. Puedes disminuir su tamaño mediante minificación (eliminar caracteres e instrucciones innecesarios).
• Evitar @import en CSS– El método @import sirve para llamar a otras hojas de estilo dentro del CSS, pero no se recomienda porque impide la carga en paralelo. En su lugar es preferible usar enlaces de tipo rel=”stylesheet” en el código HTML.
• Incrustar el CSS– Si la hoja de estilo contiene pocas instrucciones, puedes ganar tiempo insertándolas en el HTML con <style>CSS</style>. Te ahorrarás la demora generada por la solicitud.
• Usar carga asíncrona– Así se descargará el CSS en paralelo, evitando el bloqueo de la visualización. Te explico cómo hacerlo a continuación.

Cómo cargar CSS asíncronamente

La técnica se basa en asignar un valor no válido al atributo media, lo que hace que el navegador siga descargando la página sin bloquear la representación de la página.

Una vez que ha cargado la página, se debe asignar un valor válido al atributo, para lo que se usa el evento onload:

<link rel=”stylesheet” href=”css.css” media=”none” onload=”if(media!=’all’)media=’all’”>

Después de que la hoja de estilo se haya cargado, la página será refrescada para mostrarla según las reglas que ésta defina.

Ten en cuenta que este método puede fallar para algunos navegadores (p.e. Android 4.4 o menor), por lo que no deberías usarlo con hojas de estilo decisivas.

Activar la compresión

La compresión es un método sencillo y eficaz para mejorar la velocidad. Consiste en comprimir las páginas antes de enviarlas al visitante, lo que reduce el tiempo de descarga hasta un 70%. Luego que el navegador recibe el documento, lo descomprime y lo muestra al usuario.

El proceso de compresión apenas consume una fracción de segundo y puede aplicarse a todo tipo de archivos de texto, como HTML estáticos y dinámicos (PHP y ASPX), CSS y JavaScript.

Cómo comprobar la compresión

Para verificar si tu servidor está enviando las páginas comprimidas, usa la herramienta Check GZIP.

Cómo activar la compresión en Apache

Activar la compresión es sencillo. Tan sólo hay que añadir unas líneas al archivo .htaccess que variarán según la versión del servidor.

Apache 2.x

La compresión se hará mediante el módulo mod_deflate:

<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</ifModule>

Apache 1.3

La compresión se hará mediante el módulo mod_gzip:

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

Cómo activar la compresión en NGINX

Añade las siguientes líneas al archivo de configuración de NGINX (normalmente en /etc/nginx/nginx.conf):

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

Cómo activar la compresión en IIS

Puedes activar la compresión mediante la interfaz de usuario o la línea de comandos, tal y como se describe aquí.

Optimizar imágenes

La optimización de imágenes consiste en reducir el peso de los archivos todo lo posible sin comprometer la calidad.  Dado que las imágenes son uno de los recursos web más pesados, la técnica puede producir grandes beneficios.

Cómo reducir el peso de las imágenes

• Asigna las dimensiones exactas– Por ejemplo, si tus páginas tienen 600 píxeles de ancho, usa esa dimensión en tus imágenes. Subir imágenes de 1.000 píxeles para luego ajustarlas (parámetro width=”600”) no es buena idea porque se descargará la imagen completa y después se redimensionará. Esto aumenta la latencia sin necesidad y es un mal uso del ancho de banda.
• Emplea el formato adecuado– JPG es la mejor opción para fotografías. PNG es otra buena opción, más orientada a imágenes planas, con gradientes y/o transparencias (p.e. logos). GIF es ideal para imágenes animadas. Evita los formatos BMP y TIFF a toda costa; no están diseñados para la web y pesan demasiado.
• Descarta los datos de imagen– Tales como Exif, GPS, IPTC y XMP; ocupan espacio y no tienen ninguna utilidad en la web. Si tu software de edición de imágenes carece de una opción para suprimir estos datos, puedes librarte de ellos con la herramienta Exif Tag Remover.
• Usa la compresión óptima– La compresión te permitirá obtener un archivo más pequeño manteniendo la calidad. El nivel óptimo dependerá del software que uses para guardar tus imágenes (p.e. el nivel 80 de GIMP nada tiene que ver con el de Photoshop).

Herramientas para optimizar imágenes

Las siguientes herramientas te ayudarán a reducir el tamaño del archivo antes de subirlo a la web:

• io
• io
• JPEGmini
• ImageOptim
• TinyPNG
• PNGOUTWin

Por otro lado, puedes instalar el plugin WP Smush.it si usas WordPress. Comprimirá automáticamente las imágenes que subas a la biblioteca sin que éstas pierdan calidad.

Minificar archivos CSS y JS

Minificar consiste en hacer más pequeño. Se eliminan elementos innecesarios y así se obtiene un archivo de menor tamaño que descarga antes.

Cómo funciona la minificación

La forma más sencilla de explicar su funcionamiento es mediante un ejemplo. Considera la siguiente frase:

En términos de carga, más pequeño es mejor y hará que tus páginas sean más veloces.

Ahora comparala con la versión minificada:

Entérminosdecarga,máspequeñoesmejoryharáquetuspáginasseanmásveloces.

La segunda versión es más pequeña, ¿verdad? En esto se basa la minificación, solo que a mayor escala.

Tipos de minificación

• Eliminar caracteres innecesarios– Es la forma más sencilla de minificar archivos, aunque es también la menos eficaz. Consiste en eliminar espacios, saltos de línea y sangrías para reducir el tamaño del archivo sobre un 5%.
• Eliminar secciones innecesarias– Se eliminan los bloques del archivo que no van a usarse. Por ejemplo, si tu tema permite elegir entre varios esquemas de color, el archivo CSS incluirá la especificación de todas la variantes. Quedarte sólo con las instrucciones que vas a usar puede reducir el tamaño del archivo significativamente.

Cómo minificar archivos CSS y JavaScript

Lo ideal es combinar los dos tipos de minificación comentados. Para ello, sigue los siguientes pasos:

1. Abre tus archivos CSS con un editor de texto, como el bloc de notas o Notepad++
2. Busca configuraciones de color que no vayas a usar y bórralas
3. Pasa los archivos obtenidos en el paso anterior por la herramienta CSS Minifier
4. Pasa tus archivos JavaScript por la herramienta JS Compress
5. Actualiza los archivos en tu web

Por supuesto, antes de modificar cualquier archivo asegúrate de guardar una copia de seguridad.

Otras herramientas para minificar archivos

• Extensión PageSpeed Insights para Chrome– Añade la pestaña PageSpeed a las herramientas para desarrolladores del navegador, mediante la cual se puede analizar la página y generar versiones optimizadas de los objetos estáticos
• Closure compiler– El compilador de JavaScript de Google. Analiza el script, elimina el código muerto, reescribe el resto y lo minimiza.

Especificar la caché del navegador

Cuando accedes a una página web, el navegador descarga del servidor el documento HTML y todos los recursos a los que éste enlaza, como CSS, JavaScript e imágenes. Cada vez que regresas se repite el mismo proceso.

Pues bien, la caché permite que el navegador recuerde lo que ha mostrado previamente, de forma que no tiene que descargarlo de nuevo. El resultado es un aumento considerable en la velocidad de carga para segundas visitas en adelante.

Cómo especificar la caché en Apache

Basta con añadir unas líneas al principio del archivo .htaccess:

<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 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 1 month”
</IfModule>

Este código asigna un año de memoria para imágenes y un mes para archivos de texto, PDF y JavaScript. Para ampliarlo o reducirlo sólo tienes que cambiar el valor asignado y el periodo (year, month, days), aunque este código ya viene optimizado para la mayoría de sitios web.

Cómo especificar la caché en NGINX

La caché en NGINX se activa añadiendo las siguientes líneas dentro del bloque server, en el archivo de configuración (normalmente en /etc/nginx/nginx.conf):

location ~*  \.(jpg|jpeg|png|gif|ico)$ {
expires 365d;
}
location ~*  \.(css|js|pdf)$ {
expires 30d;
}

El código indica el tipo de archivo y el tiempo para la memoria del navegador en días. Una vez insertado recuerda reiniciar el servidor (comando /etc/init.d/nginx reload).

Cómo comprobar la caché del navegador

Para que la caché funcione, el servidor tiene que decirle al navegador qué archivos debe recordar y por cuánto tiempo. Esto se comunica mediante unos parámetros llamados cabeceras HTTP.

Como las cabeceras HTTP de la página son invisibles al usuario necesitarás un complemento para verlas. Puedes usar la herramienta online Web Sniffer o la extensión del navegador Live HTTP headers.

Si la caché está activa deberán aparecer dos cabeceras en la página:

Expires: fecha_de_caducidad

Cache-control: max-age=tiempo_en_segundos

Cachear las páginas dinámicas

Un inconveniente de los gestores de contenido es que tienen que generar la página en cada visita. Esto incluye acceder a la base de datos y añadir cada componente al documento HTML final.

Cachear las páginas dinámicas consiste en generar una página estática por cada página dinámica que se carga, no siendo necesario generarla en cada ocasión. Al tener la caché activada se reduce significativamente el tiempo de carga y el uso de recursos en el servidor.

Cómo cachear las páginas de un CMS

Los principales CMS disponen de plugins que permiten cachear las páginas automáticamente:

• WordPress– Los plugins más conocidos son W3 Total Cache (el más completo), WP Super Cache (más sencillo) y ZenCache (el más sencillo). Aquí tienes una comparativa del rendimiento obtenido con cada uno.
• Joomla!– Joomla trae de serie un módulo de caché configurable en un clic. Además de esto existen extensiones, una de las más populares es JotCache.
• Drupal– Al igual que Joomla, Drupal trae una opción para configurar la caché, aunque hay también módulos, como Boost.
• Prestashop– Trae de serie varios parámetros para configurar la caché: Smarty, CCC y Cache.
• Magento– Dispone de varias soluciones premium, como Full Page Cache o Nigrogento.

Considera que antes de instalar cualquier plugin de caché, debes asegurarte de que sea compatible con otros complementos que tengas instalados, ya que pueden surgir conflictos.

Otras soluciones de caché

Además de las soluciones propias de cada CMS, existen alternativas para ser empleadas en multitud de sitios dinámicos:

• MemCached– Un sistema de caché que permite acelerar sitios dinámicos minimizando el uso de la base de datos. Debe instalarse en el servidor.
• Varnish– Acelerador web que funciona como una caché de proxy inverso. Se instala delante del servidor y almacena copias de los recursos solicitados.

Emplear una CDN

El tiempo que tarda en cargar una página es mayor cuanto más lejos está el servidor de origen. Un visitante de México DF que trate acceder a una página alojada en Londres normalmente tendrá que esperar más que uno que lo haga desde Madrid.

Una CDN (content delivery network o red de entrega de contenidos) minimiza el problema ya que distribuye los archivos estáticos (imágenes, CSS y JS) en múltiples servidores alrededor del mundo. Así, cuando un visitante accede a una página, descarga contenido del servidor más cercano, lo que reduce el tiempo de espera.

Ventajas e inconvenientes de las CDN

Cuando se configuran en sitios bien optimizados, las CDN pueden proporcionar grandes beneficios:

• Aceleran la carga al enviar una parte del contenido web a través del servidor más próximo al usuario en términos de latencia
• Ahorran ancho de banda en el servidor origen, ya que la carga se distribuye sobre la red global
• Ayudan a paralelizar la descarga de componentes en el navegador, reduciendo aún más el tiempo de espera

No obstante, las CDN tienen en su contra que:

• Son poco prácticas para sitios cuyo tráfico proviene del mismo país o región
• Añaden más complejidad a la web, con todo lo que eso conlleva de cara al mantenimiento
• Pueden causar problemas de contenido duplicado al ubicar los mismos archivos en múltiples URL
• Normalmente cachean objetos estáticos, no páginas enteras
• Implican un gasto adicional

Principales proveedores de CDN

Algunas de las CDN más más populares son:

• Amazon CloudFront– Red global con servidores en América del norte y del sur, Europa, Asia y Australia. Funciona a demanda, sin planes ni contratos.
• MaxCDN– Además de ofrecer buenos planes, ha desarrollado plugins par los principales CMS (WordPress, Joomla, Drupal, Magento).
• CloudFlare– Más que una CDN, es un proxy inverso con servicios de DNS, entrega de contenidos y seguridad web. Su plan básico es gratuito.

Puedes encontrar una lista completa de proveedores e información sobre cómo elegir al más adecuado en CDN Planet.

Cómo configurar una CDN

Independientemente del proveedor, casi todas las CDN se configuran del mismo modo:

1. Subir los archivos a los servidores de la CDN– Si la red funciona en modo pull no tendrás que preocuparte, en el momento en que configures el origen replicará el contenido automáticamente. Pero si es de tipo push tendrás que encargarte tú.
2. Configurar un subdominio para el acceso– Puesto que los archivos se cargarán desde otro dominio (p.e. net), conviene que configures un registro CNAME junto con tus DNS para que el acceso se haga a través de un subdominio tuyo (p.e. cdn.example.com).
3. Actualizar los enlaces– Para que los visitantes reciban el contenido de la CDN, tendrás que cambiar las URL de archivos estáticos en tu hosting por su equivalente en los servidores de la red. Esto puede parecer una tarea ingente, pero si tu web está implementada con un gestor de contenidos no te llevará nada (p.e. en WordPress se hace en un momento con ayuda del plugin W3 Total Cache)

Cómo Optimizar la Velocidad de tu Sitio en WordPress con WP Rocket

La velocidad de carga es uno de los factores más importantes para la experiencia del usuario y el SEO de tu sitio web. Si tu web está construida en WordPress, WP Rocket es una excelente herramienta para acelerar la carga y mejorar el rendimiento de tu página. Aquí te contamos cómo puedes aprovechar al máximo sus funciones.

¿Por qué es importante optimizar la velocidad de tu web?

Un sitio rápido mejora la experiencia de usuario y reduce la tasa de abandono. Además, los motores de búsqueda como Google premian a las páginas rápidas, ayudándote a mejorar tu posicionamiento en las búsquedas. Aquí es donde WP Rocket entra en acción, ofreciendo una serie de herramientas que optimizan cada rincón de tu web.

Funciones de WP Rocket para Acelerar tu Web

1. Caché de Página WP Rocket genera una versión estática de tus páginas, lo que significa que, en lugar de cargar cada recurso desde cero, se sirve una copia rápida a los visitantes. Esta es una de las formas más efectivas de reducir el tiempo de carga, ya que ahorra el trabajo de procesar cada solicitud en tiempo real.
2. Precarga de Caché Esta función asegura que la caché de tu sitio esté siempre lista. WP Rocket precarga el caché automáticamente cada vez que haces cambios en el contenido o en las configuraciones de la web, de forma que el sitio responde de inmediato sin tener que cargar desde cero.
3. Optimización de Archivos CSS y JavaScript
   • Minificación: Con esta función, WP Rocket reduce el tamaño de los archivos eliminando espacios, comentarios y elementos innecesarios, lo que hace que los recursos se carguen más rápido.
   • Agrupación de Archivos: WP Rocket permite combinar varios archivos CSS y JavaScript en uno solo. Esto reduce la cantidad de solicitudes al servidor, acelerando así el tiempo de carga.
   • Carga Diferida de JavaScript (JavaScript Delay): Esta herramienta retrasa la carga de archivos JavaScript no esenciales hasta que el usuario interactúe con la página, mejorando la rapidez inicial.
4. Carga Diferida de Imágenes (Lazy Load) WP Rocket permite activar la carga diferida de imágenes, una función que hace que solo se carguen las imágenes cuando están a punto de aparecer en pantalla. Esto mejora significativamente la velocidad de carga inicial y ahorra ancho de banda.
5. Optimización de Bases de Datos La limpieza de la base de datos ayuda a mantener el sitio ágil. WP Rocket ofrece una opción para eliminar datos innecesarios como revisiones antiguas de publicaciones, comentarios no aprobados o eliminados, y otros elementos que ocupan espacio y ralentizan tu web.
6. Integración con CDN Si utilizas una CDN (Red de Distribución de Contenidos), WP Rocket te permite integrarla fácilmente. Una CDN distribuye los archivos de tu sitio a través de servidores en distintas ubicaciones del mundo, ayudando a que los usuarios reciban los datos desde el servidor más cercano a ellos, lo cual acelera la entrega de contenido.

¿Necesitas Más Ayuda?

Configurar WP Rocket puede ser sencillo, pero si necesitas ayuda para ajustar o entender alguna de estas funciones, siempre puedes contactar a un experto en optimización nuestro equipo. Con la configuración adecuada, tu sitio será mucho más rápido, mejorando la experiencia de usuario y aumentando tus posibilidades de aparecer en los primeros lugares de los motores de búsqueda.