optimizarCargaWeb PDF

TOMÁS DE TERESA ARTÍCULOS RECURSOS
31 COMENTARIOS / TOMÁS DE TERESA
Técnicas para Aumentar la

Velocidad de Carga Web
o 102
COMPARTIR f 41 s 28 h 16 j 17
¿Que si es importante la velocidad

del sitio?
Amazon incrementa sus ingresos un
1% por cada mejora de 100 ms en el

tiempo de carga.
Lo mismo hacen Google y Bing. 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 ambos buscadores.
Pero eso no es todo. Un estudio de Radware 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.
o 102
COMPARTIR f s h
En esta guía te explico cómo optimizar el rendimiento de tus páginas y la experiencia
TOMÁS DE TERESA
de usuario para lograr rankings y bene cios más altos.
ARTÍCULOS RECURSOS
Contenidos:
Reducir el tiempo de respuesta

Cómo medir el tiempo de respuesta del servidor
Cómo mejorar el tiempo de respuesta del servidor
Minimizar las solicitudes HTTP
Qué componentes puedes plantearte quitar

Cómo reducir las solicitudes HTTP sin quitar componentes
Minimizar las búsquedas de DNS

Cómo identi car las búsquedas de DNS
Cómo minimizar las búsquedas de DNS
Activar Keep-Alive
Cómo comprobar Keep-Alive
Cómo activar Keep-Alive en Apache
Cómo activar KeepAlive en NGINX
Cómo activar Keep-Alive en IIS
Minimizar las redirecciones

Cómo saber si tienes redirecciones
Qué hacer con las redirecciones
Priorizar el contenido visible
Cómo adelantar el contenido visible
Otros métodos para adelantar el contenido visible
Aplazar la carga de JavaScript
Soluciones al bloqueo de visualización por JavaScript
Cómo hacer que JavaScript cargue en último lugar

Qué scripts se pueden aplazar y cuáles no
Adelantar la carga de CSS
Cómo optimizar la carga de CSS
o 102 f s h
Cómo cargar CSS asíncronamente
COMPARTIR
Activar la compresión
TOMÁS DE TERESA
Cómo comprobar la compresión
ARTÍCULOS RECURSOS
Cómo activar la compresión en Apache

Cómo activar la compresión en NGINX
Cómo activar la compresión en IIS
Optimizar imágenes
Cómo reducir el peso de las imágenes
Herramientas para optimizar imágenes
Mini car archivos CSS y JS
Cómo funciona la mini cación

Tipos de mini cación
Cómo mini car archivos CSS y JavaScript
Otras herramientas para mini car archivos
Especi car la caché del navegador
Cómo especi car la caché en Apache
Cómo especi car la caché en NGINX
Cómo comprobar la caché del navegador
Cachear las páginas dinámicas

Cómo cachear las páginas de un CMS
Otras soluciones de caché
Emplear una CDN
Ventajas e inconvenientes de las CDN

Principales proveedores de CDN
Cómo con gurar una CDN

Herramientas para medir la velocidad de carga web
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.
o 102
COMPARTIR f s h
Cualquier sitio web debería aspirar a 200 ms o menos, que es lo que Google
TOMÁS DE TERESA
recomienda.
ARTÍCULOS RECURSOS
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

o 102
COMPARTIR f s h
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 e ciente 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

bene cio 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 identi car aquellos de los que puedes
prescindir.
El problema de los scripts de terceros
o 102
COMPARTIR f s h
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 con gurar 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 codi cación
base64 aumenta el tamaño de la imagen, pero cuando se trata de imágenes
o 102
COMPARTIR f s h
pequeñas (p.e. iconos) compensa las solicitudes HTTP. Puedes generar imágenes
TOMÁS DE TERESA
en línea mediante la herramienta Base64 Image Converter.
ARTÍCULOS RECURSOS
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á co 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
102minimizar las búsquedas de DNS
o COMPARTIR f s h
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 con guración por defecto en HTTP/1.1, es posible que tu

proveedor de hosting lo haya desactivado. Por eso es importante veri carlo.
La herramienta Keep Alive Checker comprueba si tu servidor mantiene abiertas las
o f s h
conexiones, aunque también puedes revisar las cabeceras HTTP y buscar aquella que
102
COMPARTIR
dice Connection: keep-alive.
Cómo activar Keep-Alive en Apache
Hay dos formas de hacerlo, dependiendo de si tienes acceso al archivo de

con guració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 con guració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
o una
102 f más
con guración
COMPARTIR s e hciente podría estar en 5 segundos.
Cómo activar KeepAlive en NGINX
Añade las siguientes líneas al archivo de con guración de NGINX (normalmente en
/etc/nginx/nginx.conf):
“ keepalive_disable msie6;
keepalive_requests 100;
keepalive_timeout 75s;
Esta es la con guració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 con guración más e ciente podría estar en 5 segundos.
Cómo activar Keep-Alive en IIS
Puedes activar Keep-Alive mediante la interfaz de usuario o la línea de comandos, tal

y como se describe aquí.
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
o
consume
f s h
102tiempo. Hasta que el navegador no alcanza el destino de la redirección y el
COMPARTIR
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

con gurarse 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 veri cador 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 nales 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á co entra por la versión redireccionada, cambiala. Tienes varias

opciones:
o 102 f s h
Redirección 301 en .htaccess
COMPARTIR
Dominio preferido en Google Webmaster Tools
TOMÁS DE TERESA
Ajustes de con
ARTÍCULOS
guración del CMS (en WordPress, Ajustes > Generales)
RECURSOS
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. m.example.com)

para al usar una con guració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
o navegación
102
COMPARTIR
yfun artículo,
s pero h 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:

Reducir el peso de la página mediante compresión, optimización de imágenes y
mini cación
Todos estos métodos se explican a continuación.

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 nal.
Soluciones al bloqueo de visualización por

JavaScript
Existen varias soluciones, aunque no todas funcionan en todos los navegadores:
o 102
COMPARTIR f s h
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
document.write y que tampoco garantiza que la visualización se desbloquee.
Aplazar la carga – Es la solución más e caz, 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 nal 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);
o 102
COMPARTIR f s h
else window.onload = downloadJSAtOnload;
TOMÁS DE TERESA
</script>
ARTÍCULOS RECURSOS
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 con gurarlo 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.

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 e ciente 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 nal, 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
o 102
COMPARTIR f s h
estilo, crea un archivo que las englobe. Descargará antes que haciéndolo por
TOMÁS DE TERESA
separado.
ARTÍCULOS RECURSOS
Reducir el tamaño del CSS – Cuanto más pequeño sea archivo antes cargará.
Puedes disminuir su tamaño mediante mini cació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 de na.
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.
o 102
COMPARTIR f s h
Activar la compresión
La compresión es un método sencillo y e caz 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 veri car 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_de ate:
“ <ifModule mod_de ate.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
o AddOutputFilterByType
102
COMPARTIRf s DEFLATE h application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
TOMÁS DE TERESA
AddOutputFilterByType DEFLATE application/x-javascript
ARTÍCULOS RECURSOS
</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 le .(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 con guració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
o application/xml
102
COMPARTIR f application/xml+rss
s h 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 bene cios.
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

o 102
COMPARTIR f s h
Las siguientes herramientas te ayudarán a reducir el tamaño del archivo antes de
TOMÁS DE TERESA
subirlo a la web:
ARTÍCULOS RECURSOS
Compressor.io
Kraken.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

Mini car 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 mini cada:
“ Entérminosdecarga,máspequeñoesmejoryharáquetuspáginasseanmásveloces.
La segunda versión es más pequeña, ¿verdad? En esto se basa la mini cación, solo
o
que a mayor
102 escala.
COMPARTIR f s h
Tipos de minificación
Eliminar caracteres innecesarios – Es la forma más sencilla de mini car

archivos, aunque es también la menos e caz. 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 especi cación de todas la variantes. Quedarte
sólo con las instrucciones que vas a usar puede reducir el tamaño del archivo
signi cativamente.
Cómo minificar archivos CSS y JavaScript
Lo ideal es combinar los dos tipos de mini cació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 con guraciones de color que no vayas a usar y bórralas
3. Pasa los archivos obtenidos en el paso anterior por la herramienta CSS Mini er
4. Pasa tus archivos JavaScript por la herramienta JS Compress
5. Actualiza los archivos en tu web
Por supuesto, antes de modi car 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.
YUI Compressor – Una herramienta en Java que permite reducir el tamaño de

los archivos JavaScript y CSS. Está orientada a usuarios avanzados y debe usarse
o mediante
102 la f
COMPARTIR scomandos.
línea de h
Closure compiler – El compilador de JavaScript de Google. Analiza el script,
elimina el código muerto, reescribe el resto y lo minimiza. Al igual que YUI
Compressor funciona por línea de comandos.
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- ash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
o 102
COMPARTIR f s h
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 con guració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:
o 102
COMPARTIR f s h
“ 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 nal.
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 signi cativamente 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é con gurable 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 con gurar la caché,
aunque hay también módulos, como Boost.
Prestashop – Trae de serie varios parámetros para con gurar la caché: Smarty,
CCC y Cache.
Magento – Dispone de varias soluciones premium, como Full Page Cache o
Nigrogento.
o 102
COMPARTIR f s h
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 con ictos.
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 con guran en sitios bien optimizados, las CDN pueden proporcionar
grandes bene cios:
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
o sobre
102 la redf
COMPARTIR global s h
Ayudan a paralelizar la descarga de componentes en el navegador, reduciendo
TOMÁS DE TERESA
aún más el tiempo de espera
ARTÍCULOS RECURSOS
No obstante, las CDN tienen en su contra que:
Son poco prácticas para sitios cuyo trá co 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).

Fastly – Red de alto rendimiento con características como el vaciado inmediato,
actualizaciones instantáneas y protección contra picos.
Akamai – La más veterana. Trabaja a medida para grandes empresas.

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 con guran del mismo
o 102
modo:COMPARTIR f s h
1. Subir los archivos a los servidores de la CDN – Si la red funciona en modo pull
TOMÁS DE TERESA
no tendrás que preocuparte, en el momento en que con
ARTÍCULOS RECURSOS
gures el origen
replicará el contenido automáticamente. Pero si es de tipo push tendrás que

encargarte tú.
2. Con gurar un subdominio para el acceso – Puesto que los archivos se cargarán
desde otro dominio (p.e. cloudfront.net), conviene que con gures 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).
Herramientas para medir la velocidad de

carga web
PageSpeed Insights
Pingdom Tools
GTmetrix
WebPageTest
¿Cómo de rápida es tu web ahora?
Imagen Flickr Creative Commons vía Zach Dischner
o 102
COMPARTIR f 41 s 28 h 16 j 17
31 COMENTARIOS, DEJA EL TUYO
o 102
COMPARTIR f s h
LODE
TOMÁS MÁS VISTO
TERESA ARTÍCULOS RECURSOS
La Verdad Sobre las Etiquetas Meta en el SEO (y Cómo Usarlas)

La Guía De nitiva para Hacer Redirecciones 301 (Generador incluido)
Generador de Títulos Virales
Cómo Crear Meta Descripciones que Atraen Clics

Cómo Aparecer en Google
Cómo Optimizar la Etiqueta de Título para Atraer Más Trá co de
Google
Las 7 Claves del SEO para Imágenes
Comentarios más recientes
Jose dice
27 noviembre, 2016 en 14:37
Con este truco las páginas van super rápidas.
Primero hay que dividir todas las imágenes grandes con Photoshop en dos o más
imágenes de menos de 256Kb cada una (si tienen más tamaño el truco no funciona).
Después hay que instalar la versión gratuita de VCLServer para cachear todas estas
imágenes (se descarga desde http://www.vclserver.com). Como VCLServer no sabe
que las imágenes son trozos de una imagen más grande lo cachea todo, así nos
saltamos el límite de 256Kb de la versión gratuita y el resultado es el mismo que si se
usa la versión de pago.
o 102
COMPARTIR f s h
Tengo un blog con cientos de fotos en un servidor en casa y recibo más de 25.000
visitas diarias sin saturaciones. Mi conexión es ADSL de 1Mbps de subida y el servidor
está conectado al router por wi , aún así va genial.
Tomás de Teresa dice

16 diciembre, 2016 en 16:56
Gracias por el aporte Jose!
Aitor dice
Hola es tremendo el articulo muy bueno y completo, pero mi duda es yo ya instale
keep-alive pero en la herramienta que dejastes para comprobarlo pone que no hay
keep-alive por lo tanto no se que sucede, tengo un cms wordpress y estoy en servidor
compartido

La mayoría de los servidores lo tienen activo por defecto. Prueba revisar la

cabecera HTTP manualmente y si no la ves entonces contacta con el servicio
técnico de tu hosting.
Un saludo
Antonio dice
11 agosto, 2016 en 01:48
o 102
COMPARTIR f s h
Saludos Tomás,
TOMÁS DE TERESA
otra guía muy completa que encuentro en tu web enhorabuena!
ARTÍCULOS RECURSOS
Quería saber tu opinión para este problema:

Tengo el plugin WP Rocket y al analizar mi web con Pingdom Tools: Remove query
strings from static resources y me sale un listado de urls con ese problema.
He consultado por la red y he visto que se puede solucionar fácilemente, sin
embargo, en la web de WP Rocket dicen que no es recomendable:

http://docs.wp-rocket.me/article/56-remove-query-string-on-static-resources
¿qué me recomendarías hacer?

11 agosto, 2016 en 10:58
Hola Antonio
Desde mi punto de vista, eliminar los parámetros en recursos estáticos sólo
sirve para que los test de velocidad no te digan que tienes que quitarlos. Así que,
a menos que no tengas otras mejoras más sustanciales en la lista y tampoco
planees modi car los recursos, vale que lo implementes. Eso sí, no esperes una
ganancia perceptible en la velocidad.
Un saludo
Max dice
9 junio, 2016 en 22:20
Excelente! De lo más claro y contundente que he leído. Tengo 2 consultas:

1. No encuentro el archivo httpd.conf en mi Hosting. La carpeta etc esta vacía pero
tiene peso. Será que el contenido está oculto?
o 102
COMPARTIR f s h
2. Como hago una carga asincronica de CSS? Leí que se puede emplear Load CSS
pero no encontré como se implementa en una pagina con varios archivos CSS.
Gracias por el post!
Abrazo!
Max

10 junio, 2016 en 17:37
Hola Max
Prueba en /usr/local/apache/conf y si no aparece consulta al servicio técnico

de tu hosting.
La carga asíncrona de CSS puedes hacerla mediante un script. Aquí tienes cómo:
http://blog.openalfa.com/como-reducir-el-tiempo-de-carga-de-una-pagina-
web-con-css-asincrono
Un saludo
SaulCM dice
9 febrero, 2016 en 23:48
Me ha encantado. Es muy completo y creo que da más que nociones básicas para
mejorar el posicionamiento de cualquier web o blog. Saludos!

10 febrero, 2016 en 08:40
Me alegro Saúl :-)

o 102
COMPARTIR f s h
Pedro dice
TOMÁS
13 enero,DE TERESA
2016 en 13:27 ARTÍCULOS RECURSOS
Impresionante paquete de medidas. No sabia que podían afectar tantos factores a la

velocidad, trataré de poner en practica los que pueda ya que trabajo con blogger y
algunos no me afectan.
También he leido que existen scripts que ayudan a mejorar la velocidad. ¿Realmente
estos scripts funcionan?
Gracias.

18 enero, 2016 en 10:54
En la optimización del rendimiento siempre tienes que ver si la ganancia

compensa las medidas. En el caso de un script, si el tiempo que lleva ejecutarlo
está por debajo de la mejora obtenida.
No sé a qué scripts te re eres, pero si pones ejemplos concretos me informo.
Saludos
Pedro dice
2 febrero, 2016 en 17:19
Me re ero a Lazy Load, es un script de jQuery que ayuda a agilizar la carga

del blog.
Lo vi en Ciudad Blogger.
Un saludo.

o 102
COMPARTIR f s h
3 febrero, 2016 en 13:42
Ten en cuenta que quizá Google no pueda ver las imágenes que
nalmente verá el usuario al hacer scroll. Si las imágenes no son
importantes para tu sitio, adelante, pero si son importantes tendrás

que hacer pruebas antes de aplicar esta solución.
Otra cosa es que el Lazy Loading puede no funcionar bien para sitios
de un sola página. Si los usuarios acceden directamente a una
sección, es posible que tengan que esperar a que la imagen cargue.
Saludos
Pedro dice
8 febrero, 2016 en 09:49
Ok, muchas gracias por tu orientación.

Un saludo.
Oscar Nava dice

Hola Tomás:
Estoy recién descubriendo tu blog y está buenísimo. Yo tengo mi sitio en WordPress y

no tengo conocimientos de códigos ni cuestiones técnicas pero he leído en varios
sitios que el tema o plantilla es clave para la velocidad de carga. Encontré que los
temas de StudioPress.com son los mejores. ¿Cuál plantilla crees que es la mejor o si
crees que este punto es irrelevante?
Gracias.

o 102
20 f s h
noviembre, 2015 en 09:32
COMPARTIR
Efectivamente Oscar, el tema es determinante en la velocidad de carga y los de
StudioPress van francamente bien. Por esa razón utilizo uno de ellos en este
sitio (Parallax Pro), aunque te recomiendo cualquiera que esté en HTML5 y sea
Responsive.
Saludos
Johanna dice
26 julio, 2015 en 03:11
Excelente post! y muy completo, era precisamente lo que estaba buscando, y lo mejor
es que tocas cada punto en detalle.
Muchas gracias por la información!

10 agosto, 2015 en 17:27
Gracias Johanna, espero que te sirva de ayuda.
Juan Carlos Lopez dice

22 julio, 2015 en 02:24
Normalmente sigo tus articulos, son realmente valioso, cambie recientemente de

proveedor de Hosting y Dominio y he tenido que entonar algunas cosas, pero hoy no
conocía algunos puntos tratados como el Keep-Alive , en pocos pasos, logre bajar 0,5
con la correcta con guración, según el test de Gtmetrix, te felicito por el articulo,
saludos.
o Tomás f
102 de Teresa
COMPARTIR s
dice
23 julio, 2015 en 12:42
h
Juan Carlos, me alegra saber que te ha servido para mejorar el rendimiento de tu
TOMÁS DE TERESA
sitio. ¡Estupendo!
ARTÍCULOS RECURSOS
Ricard dice
25 mayo, 2015 en 00:13
Hola Tomás,
Antes de nada, felicitarte por tan útil e interesante blog.
Para los que somos emprendedores y estamos a las puertas de un proyecto de cierta
envergadura es de agradecer encontrar información tan bien explicada y organizada.
Y en referencia al artículo de las técnicas de optimización para la velocidad de carga

me queda una pequeña duda sobre la parte de “Optimizar imágenes”.
Mi proyecto irá muy orientado a la fotografía de stock y tiene lógica que no se
incluyan datos de imagen como Exif, GPS, etc. Con ello se gana espacio, ¿pero
perdemos SEO?
O es más recomendable introducir tags (sin pasarse) haciendo referencia a la imagen

y los datos de la cámara (Exif) eliminarlos. Para ser concretos ¿Google tiene en
cuenta los datos de una imagen? ¿Es mejor sacri car velocidad por un SEO más
sólido?
Muchas gracias de nuevo por tu valiosa aportación a todos los que cada día
aprendemos más detalles sobre algo tan importante como el SEO.
Saludos,
Ricard
o Tomás
102 f sdice h
de Teresa
COMPARTIR
25 mayo, 2015 en 09:44
Hola Ricard, gracias por el comentario.
En estos momentos Google no usa los datos Exif, aunque más adelante puede
que lo haga, quién sabe. Lo que tienes que tener claro es que esos datos no van
a mejorar la visibilidad de tus imágenes de por sí.
Así que, como ocurre en cualquier decisión que afecte a la velocidad, tendrás
que valorar si los datos Exif son útiles a tus usuarios y si incluirlos compensaría
el retraso que añaden a la carga.
Suerte con el proyecto
Ricard dice
25 mayo, 2015 en 23:49
Me da la sensación que más que datos Exif será más importante (por lo
menos en mi caso) introducir tags/etiquetas importantes que hagan
referencia a la imagen. Con ello evitaré el “peso” de los Exif, ayudando a

que la imagen cargue más rápido y pueda organizarse en un futuro con
algo más útil que los datos de la cámara.
En todo caso, gracias a tu artículo, ya me queda más claro que la velocidad

de carga es muy importante y decisiva, sobretodo, si la web contiene
muchas imágenes.
Gracias de nuevo por haberte tomado la molestia en responder Tomás.
Saludos,
Ricard
o 102
COMPARTIR f s h
27 mayo, 2015 en 08:25
De nada Ricard. Te vendrá bien este artículo sobre cómo optimizar

imágenes: http://deteresa.com/optimizar-imagenes/
Suerte
Rafa Corts dice

12 mayo, 2015 en 14:01
Hola Tomás, muy interesante el articulo, haber si puedo solucionar el problema de
lentitud que tengo en mi web. primero me gustaría comentarte sobre un problema

que tengo. Resulta que a veces cuando accedo a la web me queda la pagina en blanco
y no accede a la web. Esto es problema del servidor o es un problema de los CSS que
no cargan en el momento preciso.

Para poder acceder, he de volver a cargar la pagina para que reaccione.
pondré en practica varios puntos del articulo y ya te comentaré como me ha ido.
Un saludo y felicidades por el articulo.

Rafa Corts

12 mayo, 2015 en 16:37
Hola Rafa
Me alegro de que te haya gustado el artículo. Ya me dirás en cuánto mejoras la

velocidad.
Respecto al problema, primero asegúrate de que ocurre en otros navegadores.

Si es cosa del sitio tendrás que hacer ensayo y error, quitando componentes
o hasta fel quesprovoca

102 dar con
COMPARTIR h el bloqueo.
Suerte
Antonio dice
12 mayo, 2015 en 10:50
¡Vaya artículo más completo! En realidad no me ha dado tiempo a leerlo entero, pero
lo acabo de imprimir y me lo voy a leer con calma y tratar de sacarle todo el partido
posible para acelerar mi blog.

¡Muchas gracias!

12 mayo, 2015 en 16:18
Estupendo Antonio, aún así no olvides compartir ;-)
inaki dice
12 mayo, 2015 en 09:15
qué de acuerdo estoy con tu punto de vista. quizá la herramienta menos conocida y
más able es la de WebpPageTest.org
desde mi punto de vista utilizar las CDN’s para cachear lógica de URL’s es una fuente
de problemas invisibles. aunque los servicios técnicos de esos proveedore son muy
buenos porque el servicio es bastante premium el mantenimiento requiere alguien

especí camente de sistemas.
también utilizamos la CDN para hacer la publicación dinámica de la versión móvil
mediante una expresión regular del user agent y va francamente bien en rendimiento.
o 102
COMPARTIR f s h
Yo añadiría una recomendación general: simpli ca, nada carga más rápido que un
TOMÁS DE TERESA
HTML plano.
ARTÍCULOS RECURSOS

12 mayo, 2015 en 16:16
Uno tiene que plantearse hasta dónde llegar en la optimización porque el

mantenimiento puede convertirse en una verdadera losa.
Te agradezco las ideas ;-)
Copyright © 2019 Tomás de Teresa
o 102
COMPARTIR f s h

optimizarCargaWeb PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

optimizarCargaWeb PDF

Enviado por

Direitos autorais:

Formatos disponíveis

TOMÁS DE TERESA ARTÍCULOS RECURSOS

31 COMENTARIOS / TOMÁS DE TERESA

Técnicas para Aumentar la

¿Que si es importante la velocidad

Amazon incrementa sus ingresos un

1% por cada mejora de 100 ms en el

Lo mismo hacen Google y Bing. Sus

No es de extrañar que la velocidad sea un factor de ranking en ambos buscadores.

Pero eso no es todo. Un estudio de Radware ha desvelado que 3 segundos es lo

Reducir el tiempo de respuesta

Qué componentes puedes plantearte quitar

Minimizar las búsquedas de DNS

Minimizar las redirecciones

Cómo hacer que JavaScript cargue en último lugar

Cómo activar la compresión en Apache

Cómo funciona la mini cación

Cachear las páginas dinámicas

Ventajas e inconvenientes de las CDN

Cómo con gurar una CDN

Reducir el tiempo de respuesta

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

tiempo que lleva la búsqueda de DNS, la conexión y los posibles redireccionamientos.

Cómo mejorar el tiempo de respuesta del servidor

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

mundo, aunque esta opción no sirve si tus visitas proceden de una

o LiteSpeed en lugar de Apache). También puedes evitar los cuellos de botella si

procesador), o incluso si cambias la tecnología (p.e. discos SSD en lugar de

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

dedicado. Para WordPress te recomiendo un hosting especializado como

Minimizar las solicitudes HTTP

“ Sólo el 10-20% del tiempo de respuesta se emplea en descargar el documento

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

retraso que provocan en la carga.

Dependiendo del caso, puede que te sobren:

Si no lo ves claro, piensa en qué componentes necesita ver el usuario en la página

El problema de los scripts de terceros

provocando el aumento en cadena de solicitudes HTTP (efecto script de cuarta

Cómo reducir las solicitudes HTTP sin quitar

El problema de eliminar componentes es que implica un compromiso. Por cada

pero también de una funcionalidad, y llega un momento en que no puedes deshacerte

Mapas de imágenes – Permiten asociar varias URL a una imagen. Dependiendo

Sprites CSS – La técnica consiste en combinar varias imágenes en un sólo

solicitudes. En esta guía tienes cómo implementar sprites.

que seguramente conoces, y consiste en incluir los datos de la imagen en la URL

CSS y JavaScript combinados – En lugar de dividir las hojas de estilo y los

Minimizar las búsquedas de DNS

Las búsquedas de DNS conllevan un retraso en la carga debido al tiempo que el

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

Tras analizar la página, el grá co en cascada mostrará la cantidad de búsquedas de

minimizar las búsquedas de DNS tiene el objetivo de reducir el tiempo de carga en el

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

búsqueda de DNS por cada solicitud que el navegador hace al servidor.

continuamente. Lo que hace es permitir que el navegador haga múltiples peticiones

Cómo comprobar Keep-Alive

Aunque Keep-Alive es la con guración por defecto en HTTP/1.1, es posible que tu

La herramienta Keep Alive Checker comprueba si tu servidor mantiene abiertas las