Cómo mejorar la velocidad de carga de una página o sitio web

La velocidad de carga de un sitio web es uno de los factores más importantes tanto para el posicionamiento en buscadores como para la buena experiencia de usuario.

A Google no le gusta la lentitud, pero los usuarios no la toleran. Están acostumbrados a obtener el contenido o la información que buscan de la forma más rápida posible.

De hecho hay quien indica que un parpadeo (unos 400 milisegundos) es ya demasiado tiempo para esperar a que cargue una página Web.

Si tus páginas web tardan mucho en cargar, la probabilidad de que tu visitante abandone el sitio es muy alta, con lo que esto supone en pérdida de autoridad frente a los buscadores y, sobre todo, en pérdida de clientes y ventas si tu sitio es una tienda online u ofreces servicios por Internet.

La mayoría de los sitios web pierden la mitad de sus visitantes mientras se cargan.

Por lo tanto, debes tomar medidas para optimizar y acelerar la velocidad de carga de tu sitio web.

Factores que influyen en la velocidad de carga de una página web

Los factores que influyen en la velocidad de carga, así como las formas de acelerar tu web, pueden variar según sea un eCommerce, un blog o una web corporativa.

O de si está construída sobre un CMS como WordPress o Joomla, con software de comercio electrónico como Prestashop o directamente con HTML, CSS y PHP.

Pero hay algunas cosas que se pueden hacer para optimizar la carga de páginas web, y por lo tanto el posicionamiento en buscadores y la experiencia de usuario, que son comunes a cualquier tipo de sitio web.

En este tutorial trataré de resolver algunos de los errores más habituales que arrojan la herramientas las herramientas de medición de la velocidad de carga de una página web:

Minimizar HTML, CSS y JavaScript
Optimización y compresión de imágenes
Habilitar la compresión GZIP
Reducir el tiempo de respuesta del servidor
Aprovechar el almacenamiento en caché del navegador
Remove Query String URL from static resources

Herramientas para analizar la velocidad de carga de una web

Lo primero que debes hacer es conocer en qué situación se encuentra tu sitio web en cuanto a la velocidad de carga de sus páginas, tanto para ordenador de sobremesa como para teléfono móvil.

Actualmente utilizo cinco de las principales herramientas para analizar la velocidad de carga de una web:

Ninguna herramienta para medir la velocidad de un sitio web es totalmente exacta. De hecho, es normal observar diferencias (a veces significativas) en los resultados que arroja cada una de ellas.

Hay factores como dónde se encuentre el servidor desde el que se va a realizar la prueba que influyen en el resultado de la misma.

Por otra parte, no siempre estará en nuestra mano el resolver algunos de los errores que se indican. La solución puede estar del lado del servidor web o implicar desarrollos complejos y muy especializados.

Pero, en otras ocasiones si podremos actuar, añadiendo unas líneas de código o a través de una configuración sencilla.

Minificación de recursos

A la hora de crear código en cualquier lenguaje de programación es muy importante la organización del mismo en forma de comentarios, tabulaciones, espacios, etc. que faciliten su lectura y comprensión por parte de otros programadores o por nosotros mismos con posterioridad.

Sin embargo, el ordenador no necesita ni lee todos esos recursos destinados a la comprensión humana. Podemos escribir todo el código en una línea, sin espacios, y el programa intérprete (en el caso del HTML, CSS y JavaScript, el navegador) lo procesará sin problemas.

Así pues, minificar recursos (HTML, CSS y JavaScript) consiste en eliminar todos esos datos innecesarios o redundantes sin que afecte a la forma en que el navegador web procesa un recurso. Por ejemplo, eliminar comentarios y formato innecesario, retirar código que no se usa, emplear variables y nombres de funciones más cortos, etc.

Minimizar el código «a mano» puede ser una labor, como poco desesperante. Así que la mayoría de los editores de texto o código avanzados incluyen funcionalidades para hacerlo prácticamente en un clic.

Existen también herramientas, tanto online como instalables, que realizan esa tarea por nosotros:

Para minificar HTML, prueba HTMLMinifier o Kangax HTML-Minifier
Para CSS y JavaScript, Minify – CSS and JavaScript minifier

Estos son sólo algunos ejemplos que yo utilizo. Una búsqueda en Google te dará infinidad de opciones más.

PageSpeed dispone de un módulo que se integra con tu servidor web Apache o Nginx para optimizar automáticamente tu sitio web. Estas optimizaciones incluyen la minificación de recursos.

Puedes ayudar a aligerar el peso de las páginas web refinando tu técnica de programación, produciendo código lo más limpio posible. Usar nombres de variables descriptivos pero lo más cortos posible, siendo conciso con los comentarios, evitar el código redundante, etc.

Procura también usar el menor número posible de archivos de CSS y JavaScript. De cara al uso eficiente de recursos del servidor, cuantas menos llamadas a archivos, mejor.

Por otro lado, existen multitud de plugins para minificar y combinar archivos HTML, CSS y JavaScript en WordPress.

Aunque básicamente te encontrarás ante dos opciones: Usar un plugin específico para ello o usar algún plugin de caché que tenga esta función incorporada.

Para plugins específicos puedes usar Fast Velocity Minify y como plugins de caché que contengan esta función, W3 Total Cache o WP Rocket el plugin de caché más completo.

También puedes instalar plugins como Autoptimize o Machete que realizan automáticamente la minificación de los archivos HTML, CSS y JavaScript.

Compresión y optimización de imágenes

De igual manera, las técnicas anteriores se pueden extender más allá de los recursos basados en texto. Las imágenes, los vídeos y otros tipos de contenido tienen sus propias formas de metadatos y diferentes cargas.

Por ejemplo, las fotos incorporan mucha información adicional: configuración de la cámara, ubicación, etc. Según el uso que se les vaya a dar, estos datos pueden ser críticos (por ejemplo, un sitio donde se comparten fotos) o completamente irrelevantes y deberías considerar si vale la pena eliminarlos. En la práctica, estos metadatos pueden sumar decenas de kilobytes por cada imagen.

En este caso existen también muchas herramientas y plugins que realizan el trabajo, sin embargo, en el caso de archivos .JPG y .PNG, la que mejores resultados me da es TinyPNG que está tanto en versión plugin de WordPress como online.

Procura realizar la compresión y optimización de las imágenes antes de subirlas al servidor y darles el tamaño idóneo para el espacio que ocuparán en la página web.

Al diseñar la página web debes indicar al navegador las dimensiones de las imágenes.

Cuando se especifican las dimensiones de la imagen, el navegador conoce de entrada el tamaño y utiliza la información para dar forma a la página sin tener que reconstruirla.

Si no lo haces, la página se «construirá» primero con el texto y después comenzará a cargar las imágenes.

Compresión de texto con GZIP

GZIP es un compresor genérico que se puede aplicar a cualquier transmisión de bytes. Funciona recordando el contenido que detectó anteriormente e intentando buscar y reemplazar fragmentos de datos duplicados de forma eficaz.

Sin embargo, en la práctica, GZIP ofrece mejores resultados con contenido basado en texto y generalmente alcanza índices de compresión del 70 al 90% para archivos más grandes, mientras que la ejecución de GZIP en recursos ya comprimidos mediante algoritmos alternativos (por ejemplo, la mayoría de los formatos de imagen) no ofrece un beneficio significativo.

Todos los navegadores modernos admiten y negocian automáticamente la compresión GZIP para todas las solicitudes HTTP. Debes garantizar que el servidor esté configurado correctamente para proporcionar el recurso comprimido cuando el cliente lo solicite.

La habilitación de la compresión GZIP es una de las optimizaciones más sencillas y beneficiosas que se pueden implementar.

La mayoría de los servidores web comprimen el contenido de forma predeterminada y solo deberás verificar que el servidor esté configurado correctamente para comprimir todos los tipos de contenido que se benefician con la compresión GZIP.

Habilitar la compresión GZIP es un factor determinante en la optimización de la velocidad carga de un sitio web.

Así que audita tu sitio y asegúrate de que tus recursos se compriman.

Aunque hay herramientas y plugins de almacenamiento en caché para WordPress y otros CMS que también realizan la compresión GZIP, la solución más sencilla y que sirve para todos los casos es modificar el archivo .htaccess añadiendo las líneas pertinentes.

Haz una copia del mismo por si debes recuperarlo en caso de accidente e introduce las siguientes líneas:

Header append Vary User-Agent env=!dont-vary

AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/x-component
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/x-js
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/richtext
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xsd
AddOutputFilterByType DEFLATE text/xsl
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE image/bmp
AddOutputFilterByType DEFLATE application/java
AddOutputFilterByType DEFLATE application/msword
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-msdownload
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/vnd.ms-access
AddOutputFilterByType DEFLATE application/vnd.ms-project
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/vnd.ms-opentype
AddOutputFilterByType DEFLATE application/vnd.oasis.
opendocument.database
AddOutputFilterByType DEFLATE application/vnd.oasis.
opendocument.chart
AddOutputFilterByType DEFLATE application/vnd.oasis.
opendocument.formula
AddOutputFilterByType DEFLATE application/vnd.oasis.
opendocument.graphics
AddOutputFilterByType DEFLATE application/vnd.oasis.
opendocument.presentation
AddOutputFilterByType DEFLATE application/vnd.oasis.
opendocument.spreadsheet
AddOutputFilterByType DEFLATE application/vnd.oasis.
opendocument.text
AddOutputFilterByType DEFLATE audio/ogg
AddOutputFilterByType DEFLATE application/pdf
AddOutputFilterByType DEFLATE application/vnd.ms-powerpoint
AddOutputFilterByType DEFLATE application/x-shockwave-flash
AddOutputFilterByType DEFLATE image/tiff
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/vnd.ms-opentype
AddOutputFilterByType DEFLATE audio/wav
AddOutputFilterByType DEFLATE application/vnd.ms-write
AddOutputFilterByType DEFLATE application/font-woff
AddOutputFilterByType DEFLATE application/font-woff2
AddOutputFilterByType DEFLATE application/vnd.ms-excel
# DEFLATE by extension AddOutputFilter DEFLATE js css 
 htm html xmlLenguaje del código: texto plano (plaintext)

Reducir el tiempo de respuesta del servidor

El tiempo de respuesta del servidor es el tiempo que tarda un servidor en responder a la solicitud de un navegador y es uno de los factores que más influyen en el tiempo de carga de tu web.

El tiempo de respuesta del servidor depende de muchos factores:

Carga del servidor visitas.
Tareas programadas de sincronización.
Tareas programadas de backup.
Además de disponer de recursos suficientes de hardware, tener un código optimizado, que las consultas a la base de datos no sean pesadas,….

Por mucho que hayas optimizado tu sitio web para que se cargue rápido; si el servidor en el que se aloja tu página responde lento, siempre habrá un tiempo extra de espera, que afectará al tiempo de carga total.

Según las directrices de Google, un buen tiempo de respuesta del servidor debe estar por debajo de los 200 milisegundos.

Este tipo de optimización de carga de páginas web es una de esas cosas que no está siempre en nuestra mano realizar de forma sencilla ya que no hay una fórmula universal, aplicable a cualquier sitio, ni siquiera a los sitios de WordPress.

Algunas cosas a tener en cuenta para mejorar el tiempo de carga del servidor son:

Procura que el servidor web funcione con PHP 7 ya que está comprobado que mejora los tiempos de procesamiento y por tanto de respuesta en el servidor.
Si es posible, usa NGINX, un servidor más rápido que Apache.
Instala un certificado de seguridad HTTPS y usa HTTP/2, que es un protocolo más rápido y eficiente que el habitual HTTP 1.1
Usa la caché dinámica

Todas estas cosas dependen del tipo de servidor que tengas contratado con tu proveedor de servicios de alojamiento web.

En WordPress puedes solucionarlo con el plugin Cache Enabler, que mejora la velocidad de carga del sitio web sin penalizar el rendimiento de WordPress.

El plugin Cache Enabler funciona creando archivos HTML estáticos y almacenándolos en los discos del servidor. Así, el servidor web entregará el archivo HTML estático, lo que evita procesos de fondo con consumo intensivo de recursos (núcleo, plugins y base de datos).

Especificar caché de navegador (Leverage Browser Caching)

Se puede optimizar el tiempo de carga de las páginas web especificando el tiempo mínimo de la caché del navegador.

Esta caché guarda una copia de las páginas que han sido accedidas con el navegador en el dispositivo cliente, por lo que no se necesita descargar sus recursos cada vez.

Google aconseja que el tiempo mínimo de la caché del navegador sea de una semana o, incluso, de un año para elementos como las imágenes que no suelen cambiar.

Esto lo podemos optimizar siempre que se refiera a recursos internos, alojados en nuestro propio servidor. Si el retraso lo produce algún plugin o recurso externo no puedes actuar sobre él.

Introduce las líneas que te indico a continuación dentro el archivo .htaccess para especificar la caché de navegador:

# BEGIN W3TC Browser Cache
<IfModule mod_mime.c>
AddType text/css .css
AddType text/x-component .htc
AddType application/x-javascript .js
AddType application/javascript .js2
AddType text/javascript .js3
AddType text/x-js .js4
AddType text/html .html .htm
AddType text/richtext .rtf .rtx
AddType image/svg+xml .svg .svgz
AddType text/plain .txt
AddType text/xsd .xsd
AddType text/xsl .xsl
AddType text/xml .xml
AddType video/asf .asf .asx .wax .wmv .wmx
AddType video/avi .avi
AddType image/bmp .bmp
AddType application/java .class
AddType video/divx .divx
AddType application/msword .doc .docx
AddType application/vnd.ms-fontobject .eot
AddType application/x-msdownload .exe
AddType image/gif .gif
AddType application/x-gzip .gz .gzip
AddType image/x-icon .ico
AddType image/jpeg .jpg .jpeg .jpe
AddType application/json .json
AddType application/vnd.ms-access .mdb
AddType audio/midi .mid .midi
AddType video/quicktime .mov .qt
AddType audio/mpeg .mp3 .m4a
AddType video/mp4 .mp4 .m4v
AddType video/mpeg .mpeg .mpg .mpe
AddType application/vnd.ms-project .mpp
AddType application/x-font-otf .otf
AddType application/vnd.ms-opentype ._otf
AddType application/vnd.oasis.opendocument.database .odb
AddType application/vnd.oasis.opendocument.chart .odc
AddType application/vnd.oasis.opendocument.formula .odf
AddType application/vnd.oasis.opendocument.graphics .odg
AddType application/vnd.oasis.opendocument.presentation .odp
AddType application/vnd.oasis.opendocument.spreadsheet .ods
AddType application/vnd.oasis.opendocument.text .odt
AddType audio/ogg .ogg
AddType application/pdf .pdf
AddType image/png .png
AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
AddType audio/x-realaudio .ra .ram
AddType application/x-shockwave-flash .swf
AddType application/x-tar .tar
AddType image/tiff .tif .tiff
AddType application/x-font-ttf .ttf .ttc
AddType application/vnd.ms-opentype ._ttf
AddType audio/wav .wav
AddType audio/wma .wma
AddType application/vnd.ms-write .wri
AddType application/font-woff .woff
AddType application/font-woff2 .woff2
AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A31536000
ExpiresByType text/x-component A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType application/javascript A31536000
ExpiresByType text/javascript A31536000
ExpiresByType text/x-js A31536000
ExpiresByType text/html A3600
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType text/xml A3600
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType image/bmp A31536000
ExpiresByType application/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType application/msword A31536000
ExpiresByType application/vnd.ms-fontobject A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType image/gif A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType application/json A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType application/vnd.ms-project A31536000
ExpiresByType application/x-font-otf A31536000
ExpiresByType application/vnd.ms-opentype A31536000
ExpiresByType application/vnd.oasis.opendocument.database 
A31536000
ExpiresByType application/vnd.oasis.opendocument.chart 
A31536000
ExpiresByType application/vnd.oasis.opendocument.formula 
A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics 
A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation 
A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet 
A31536000
ExpiresByType application/vnd.oasis.opendocument.text 
A31536000
ExpiresByType audio/ogg A31536000
ExpiresByType application/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType image/svg+xml A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType application/x-tar A31536000
ExpiresByType image/tiff A31536000
ExpiresByType application/x-font-ttf A31536000
ExpiresByType application/vnd.ms-opentype A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType application/font-woff A31536000
ExpiresByType application/font-woff2 A31536000
ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType application/zip A31536000
</IfModule>
<IfModule mod_deflate.c>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
AddOutputFilterByType DEFLATE text/css text/x-component 
application/x-javascript application/javascript text/
javascript text/x-js text/html text/richtext image/
svg+xml text/plain text/xsd text/xsl text/xml image/bmp 
application/java application/msword application/
vnd.ms-fontobject application/x-msdownload image/
x-icon application/json application/vnd.ms-access 
application/vnd.ms-project application/
x-font-otf application/vnd.ms-opentype 
application/vnd.oasis.opendocument.database 
application/vnd.oasis.opendocument
.chart
application/vnd.oasis.opendocument.formula 
application/vnd.oasis.opendocument.graphics 
application/vnd.oasis.opendocument.presentation
application/vnd.oasis.opendocument.spreadsheet 
application/vnd.oasis.opendocument.text audio/ogg 
application/pdf
application/vnd.ms-powerpoint application/
x-shockwave-flash image/tiff application/
x-font-ttf application/vnd.ms-opentype
audio/wav application/vnd.ms-write application/font-woff 
application/font-woff2 application/vnd.ms-excel
<IfModule mod_mime.c>
# DEFLATE by extension
AddOutputFilter DEFLATE js css htm html xml
</IfModule>
</IfModule>
<FilesMatch "\.(css|htc|less|js|js2|js3|js4|CSS|HTC|LESS|JS|
JS2|JS3|JS4)$">
FileETag MTime Size
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public"
</IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML
|HTM|RTF|RTX|SVG|SVGZ|TXT|XSD|XSL|XML)$">
FileETag MTime Size
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public"
</IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|
docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|
mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|_otf|odb|odc|odf|
odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|
swf|tar|tif|tiff|ttf|ttc|_ttf|wav|wma|wri|woff|woff2|xla|xls|
xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|
DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|JSON|MDB|MID|MIDI|
MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|OTF|_OTF|ODB|ODC|ODF|
ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|
SWF|TAR|TIF|TIFF|TTF|TTC|_TTF|WAV|WMA|WRI|WOFF|WOFF2|XLA|XLS|
XLSX|XLT|XLW|ZIP)$">
FileETag MTime Size
<IfModule mod_headers.c>
Header set Pragma "public"
Header append Cache-Control "public"
</IfModule>
</FilesMatch>
<FilesMatch "\.(bmp|class|doc|docx|eot|exe|ico|json|mdb|mpp|
otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|pot|pps|ppt|
pptx|svg|svgz|swf|tif|tiff|ttf|ttc|_ttf|wav|wri|woff|woff2|
xla|xls|xlsx|xlt|xlw|BMP|CLASS|DOC|DOCX|EOT|EXE|ICO|JSON|MDB|
MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|POT|PPS|PPT|
PPTX|SVG|SVGZ|SWF|TIF|TIFF|TTF|TTC|_TTF|WAV|WRI|WOFF|WOFF2|
XLA|XLS|XLSX|XLT|XLW)$">
<IfModule mod_headers.c>
Header unset Last-Modified
</IfModule>
</FilesMatch>
# END W3TC Browser CacheLenguaje del código: texto plano (plaintext)

Eliminar el error «Query string from static resources»

Si, tras especificar la caché del navegador, aparece un error del tipo «Remove query strings from static resources», incluye las siguientes líneas de código en tu archivo de funciones o en el archivo «functions.php» del theme activo de WordPress:

function _remove_script_version( $src ){
$parts = explode( '?', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );Lenguaje del código: PHP (php)

Evitar errores de sintaxis y enlaces rotos

Este punto es fundamental. Además de asegurarte de que no haya errores sintácticos en el código de la web, es también importante que no haya ningún enlace roto o etiquetas SRC rotas.

Estos errores provocan muchas peticiones al servidor, aumentando el tiempo de espera y un consumo excesivo de transferencia de datos.

Por lo tanto, debes mantener una buena sintaxis y evitar los enlaces rotos, ya que ayudará a mejorar la velocidad de carga de tu página web.

Resumen de factores que influyen en la velocidad de carga de una página web

Hosting. Uno de los factores más básicos y de los que menos se tiende a cuestionar es el Hosting que se tenga contratado. Éste afecta rotundamente a la velocidad de carga de una web, ya que un servidor menos potente puede dilatar la lectura de la base de datos y, por tanto, ralentizar la conexión.
La estructura del código. Un código bien estructurado y pensado influye de manera positiva en la velocidad de carga de un sitio web ya que el navegador web lo leerá todo seguido y como tal, lo irá mostrando. Es un factor esencial, sobre todo en archivos CSS y JavaScript.
Plugins. El uso de estos elementos es habitual si se emplea un gestor de contenidos (CMS) como WordPress o Joomla para facilitar la gestión de un blog. Estos plugins incluyen muchas veces funcionalidades que no vas usar nunca y que ralentizan la velocidad de carga de una web.
Archivos en la web. Muchas veces, el webmaster sube los archivos a la web sin preocuparse de que todo esté optimizado. También has de tener en cuenta a la hora de subir vídeos o archivos de audio, que éstos estén embebidos y no subidos directamente y metidos en la página; o los archivos PDF para leer online, que muchas veces no se tienen en consideración. Lo importante es que si al usuario no se le termina de cargar el documento, acaba por desistir y abandonar la página.
Dispositivos de destino. Cada dispositivo es un mundo: una resolución de pantalla, una proporción de píxels por pulgada (ppp) diferente dependiendo del fabricante, el modelo, la generación, la gama, y así un largo etc. que no hace más que marear a los diseñadores y programadores. Debes pensar en qué tipo de dispositivos se podrá ver la página e intentar idear la forma en que el contenido se vea más rápido.
Caché. Los archivos almacenados en la caché del dispositivo ayudan a acceder a la página, una vez ya visitada, muy rápidamente puesto que algunos elementos ya los tenemos almacenados en el ordenador.
La velocidad de conexión. Elemento fundamental. No es lo mismo estar navegando con un terminal móvil a 128kbs que hacerlo con fibra óptica de 100Mbs. Por tanto, no se puede hacer una página muy pesada por el mero hecho de que cada vez las conexiones «son mejores».

Hay otras formas de acelerar la velocidad de carga de una página web, pero he tratado de tocar las más importantes y las que es fácil pasar por alto.

Recuerda siempre hacer una copia de seguridad antes de realizar cualquier cambio.

Cómo mejorar la velocidad de carga de una página o sitio web

Si tus páginas web tardan mucho en cargar, la probabilidad de que tu visitante abandone el sitio es muy alta, con lo que esto supone en pérdida de autoridad frente a los buscadores y, sobre todo, en pérdida de clientes y ventas si tu sitio es una tienda online u ofreces servicios por Internet.

Tabla de Contenidos