Como mejorar la velocidad de carga de su web para que sea más veloz

¡Mi web es lenta!

mi sitio esta lentoGoogle da bastante importancia al tiempo de carga de una página. Obviamente, a los usuarios no les gusta esperar mucho tiempo para que cargue una página. En el mundo de las ventas por internet se dice que un segundo más de carga equivalen al 7% de usuarios que se van. Todos queremos internet veloz, a nadie le gusta esperar que se cargue una página; así que la web debe ser veloz. Además, si mejoras la velocidad de carga de tus páginas, enseñaras a Google que has mejorado tu sitio y te posicionará mejor. A igual calidad, Google posicionará mejor la página que sea más veloz. Optimizar la velocidad de carga de la web apoyará el SEO.

Herramientas para evaluar la velocidad de carga de su web

En internet existen varias herramientas para eso. Recomendamos 2 que son complementarias.

Webpagetestes una herramienta que indica el tiempo necesario para cargar la página, así como las cosas a corregir, sobre todo en las imágenes.

Google PageSpeed es una herramienta de Google, que le dará una nota, tal cual Google evalúa la web por el lado de la velocidad. Si esa nota es baja, se puede considerar que Google aplica una forma de penalización a la web por lentitud lo que la penaliza en el SEO.

El primer paso para mejorar la velocidad de carga de su sitio

La primera cosa es evaluar los puntos a mejorar. Por eso les recomendamos usar de las dos herramientas indicadas anteriormente. Varios puntos deben ser optimizados, pero se debe conocer los que fallan por ahora. Luego veremos uno a uno las diferentes cosas a optimizar.

La compresión Gzip

La compresión Gzip es una compresión de sus datos a la salida del servidor. No afecta los datos, pero permite transmitir la misma cantidad de información en menos Kb, lo que hace que la web se cargue rápidamente. Veremos más adelante como activarla.

Como activar la compresión Gzip

La mejor manera de activar la compresión Gzip de la web es de decirle al servidor de usarla directamente a partir de un archivo que se llama .htaccess  , el cual es un archivo escondido pero muy importante. Más adelante les enseñaremos como activar la compresión Gzip a partir del archivo. La otra manera es usando un plugin, pero el resultado generalmente no es óptimo, además de demorar un poco más la carga del sitio.

El caché

El cache permite poner en la memoria, los datos que se cargan siempre, como por ejemplo los menús, imágenes, JavaScript, etc. Es una función que hay que activar para bostear la web. Además de usar del caché, hay que indicar el tiempo de vencimiento del caché.

Como activar el caché de su web

Como para la compresión Gzip, el caché puede ser activado por un plugin, pero no es lo más recomendable, porque no es perfecto y además demorará más el tiempo de carga de la web. La mejor manera es como para la compresión, activarlo directamente en el servidor a partir del archivo .htaccess

Código para activar al caché y la compresión Gzip

Se debe dirigir al FTP o el cpanel y buscar el archivo .htaccess en la raíz de su web. Es un archivo escondido, así que se debe activar la visualización del archivo escondido en el FTP o cpanel.

Una vez encontrado el archivo, se hace una copia de seguridad y se pega el siguiente código:
(Puedes descargarlo ese codigo en un archivo txt aca)

# MOD_DEFLATE COMPRESSION
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php
#Pour les navigateurs incompatibles
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html
#ne pas mettre en cache si ces fichiers le sont déjà
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip
#les proxies doivent donner le bon contenu
Header append Vary User-Agent env=!dont-vary

# Compression pour fichiers CSS
<IfModule mod_gzip.c>
mod_gzip_on       Yes
mod_gzip_dechunk  Yes
mod_gzip_minimum_file_size 1024
mod_gzip_maximum_file_size 100000
mod_gzip_item_include file .css$
mod_gzip_item_include mime ^text/css$
</IfModule>

<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault “access plus 1 month”
ExpiresByType text/css “access plus 1 day”
ExpiresByType image/png “access plus 1 week”
ExpiresByType image/gif “access plus 1 week”
ExpiresByType image/jpeg “access plus 1 week”
</IfModule>

# Compression pour fichiers JS
<IfModule mod_gzip.c>
mod_gzip_on       Yes
mod_gzip_dechunk  Yes
mod_gzip_minimum_file_size 512
mod_gzip_maximum_file_size 1000000
mod_gzip_item_include file .js$
mod_gzip_item_include mime ^application/x-javascript.*
</IfModule>

# Cache
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType application/x-javascript “access plus 1 month”
</IfModule>

# MOD_DEFLATE COMPRESSION
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php
#Pour les navigateurs incompatibles
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html
#ne pas mettre en cache si ces fichiers le sont déjà
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip
#les proxies doivent donner le bon contenu
Header append Vary User-Agent env=!dont-vary

# BEGIN Expire headers
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 7200 seconds”
ExpiresByType image/jpg “access plus 2592000 seconds”
ExpiresByType image/jpeg “access plus 2592000 seconds”
ExpiresByType image/png “access plus 2592000 seconds”
ExpiresByType image/gif “access plus 2592000 seconds”
AddType image/x-icon .ico
ExpiresByType image/ico “access plus 2592000 seconds”
ExpiresByType image/icon “access plus 2592000 seconds”
ExpiresByType image/x-icon “access plus 2592000 seconds”
ExpiresByType text/css “access plus 2592000 seconds”
ExpiresByType text/javascript “access plus 2592000 seconds”
ExpiresByType text/html “access plus 7200 seconds”
ExpiresByType application/xhtml+xml “access plus 7200 seconds”
ExpiresByType application/javascript A259200
ExpiresByType application/x-javascript “access plus 2592000 seconds”
ExpiresByType application/x-shockwave-flash “access plus 2592000 seconds”
</IfModule>
# END Expire headers

# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
<FilesMatch “\.(ico|jpe?g|png|gif|swf|css|gz)$”>
Header set Cache-Control “max-age=2592000, public”
</FilesMatch>
<FilesMatch “\.(js)$”>
Header set Cache-Control “max-age=2592000, private”
</FilesMatch>
<filesMatch “\.(html|htm)$”>
Header set Cache-Control “max-age=7200, public”
</filesMatch>
# Disable caching for scripts and other dynamic files
<FilesMatch “.(pl|php|cgi|spl|scgi|fcgi)$”>
Header unset Cache-Control
</FilesMatch>
</IfModule>
# END Cache-Control Headers

# KILL THEM ETAGS
Header unset ETag
FileETag none

# protege el archivo htaccess
<files .htaccess>
order allow,deny
deny from all
</files>

# proteccion de wpconfig.php
<files wp-config.php>
order allow,deny
deny from all
</files>

Con el código insertado en el archivo .htaccess se habrá activado la compresión Gzip, así como el caché a nivel del servidor. Es importante mencionar que ese código no es aceptado por algunos hosting. En el caso de que su hosting no lo acept,e le recomendamos cambiar de hosting por uno de mejor desempeño o de usar un plugin para la compresión y el caché pero los resultados no serían óptimos.

La optimización de las imágenes para una mejor carga

optimizar la velocidad de carga de una web Salvo algunas excepciones, usted debe saber que las imágenes que usa en su sitio son sólo ilustraciones y que los usuarios a penas las miran 1 segundo. Es importante ilustrar la página con imágenes porque hace la lectura más agradable y menos aburrida, en lugar de tener grandes párrafos de textos; pero como es de sospechar, las imágenes de ilustración no necesitan calidad fotográfica. La carga de imágenes es lo que demora más el tiempo de carga de una página. Mientras mejor optimizada sea una imagen, más rápida será la carga de su página. Igualmente, se deben añadir imágenes sólo cuando sea necesario porque cada imagen hará más lento el tiempo de carga.

La elección del tipo de imágenes

Existen varios tipos de imágenes pero no todos estan adaptados para internet. El formato recomendado es el formato JPG que tiene muchas posibilidades de compresión y de optimización. Los formatos PNG o GIF pesan mucho más que una imagen en JPG y sólo pueden tener un interés en casos muy especiales, como por ejemplo usar transparencia o tener una pequeña animación. No recomendamos usar animaciones para llamar la atención porque es considerado por los usuarios como una molestia para la vista y hace la lectura de la página incómoda. No se deben usar animaciones en las imágenes a menos que se trate de casos muy especiales. Si quiere usar animaciones para llamar la atención en una publicidad o en uno de sus productos o servicios comete un error, porque no sólo es una molestia visual e incomoda la lectura de las páginas, sino que además los usuarios asocian las  animaciones llamativas con las estafas. Todas las estafas en internet usan ese recurso, así que los usuarios tienen cuidado y evitan las animaciones. Siendo el resultado contrario a lo que se esperaba, es decir, no llama la atención sino que molesta a los usuarios que dejarán el sitio y evitarán mirar las animaciones.

La elección del tamaño de las imágenes

A mayor tamaño de imagen, mayor peso y mayor tiempo de carga. Muchos Webmaster añaden imágenes de una cámara digital que pesa más de 4 Mb y se demora más de 15 segundos en cargar, lo cual es un grave error porque los usuarios dejan las páginas que se cargan muy lentas.

Si son imágenes para ilustrar el contenido de una página, un tamaño de 300*200 es ideal, y si quiere mejorar la ilustración, puede pasar a un tamaño de 600*400. El caso de los sliders es distinto. Pero muchos Webmaster cometen el error de usar imágenes de muy alta calidad y de gran tamaño para hacer sliders impresionantes; lo cual satisface al diseñador que hace el slider pero afecta negativamente la velocidad de carga de la página. Si desea hacer un esfuerzo gráfico en el slider porque su dominio es lo visual, le recomendamos no usar un tamaño superior a 800 px de ancho. Pero debe tener en cuenta que los usuarios generalmente apenas miran las imágenes del slider, no le muestran interés o la consideran una molestia para la navegación. El objetivo no es de complacer el diseñador con un slider muy visual, sino más bien de complacer a los usuarios que visitan el sitio.

La compresión de las imágenes

hacer un sitio veloz

Después de usar de ese técnica de optimización ese imagen por ejemplo sólo pesa 5 Kb

Es posible hacer una compresión de las imágenes para reducir el peso de éstas sin perder calidad visual, para lo que recomendamos hacer una compresión de 80 para las imágenes que quieren de alta calidad visual hasta una compresión de 60 para las imágenes que sólo ilustran un artículo. La compresión de 80 no hace pérdida visual y permite seguir con imágenes de alta calidad. La compresión de 60 hará una pequeña pérdida visual pero es suficiente para las pequeñas ilustraciones.

La eliminación de datos inútiles de las imágenes

Las imágenes como las fotos tienen cierta información que no es útil para un sitio web, como por ejemplo los metadatos, que son datos sobre la cámara que ha tomado la imagen, información sobre el software que ha modificado la imagen y otros datos inútiles.

Si saca esos datos inútiles podría ganar unos últimos Kb y así reducir al máximo el peso de las imágenes. Para sacar esos datos, recomendamos usar un software como Stripper.
Si usa un tamaño adecuado, una compresión adaptada y elimina los datos inútiles, seguramente habrá bajado bastante el peso de las imágenes sin perder calidad y así ganar mucho en tiempo de carga de la página.

Puedes descargar el pequeño software Stripper que es ideal para hacer eso aquí

Ofrecer rápidamente al usuario el contenido que le interesa

Los usuarios que llegan a la página quieren obtener la información que están buscando lo más rápido posible. Puede tratarse de un texto o de una imagen. El concepto entonces es de hacer aparecer en prioridad, las imágenes y el texto en la página para luego cargar lo que es secundario. Para eso tienes que optimizar dos cosas.

Usar la visualización progresiva en navegadores

La visualización progresiva en navegadores no permitirá que la página se cargue más rápido pero dará una mejor experiencia a los usuarios. El concepto es simple: las imágenes se cargan rápidamente pero en una versión borrosa y una vez que el resto de la página se ha cargado, las imágenes se cargan en versión menos borrosa, para que cuando la página esté totalmente cargada las imágenes cuenten con calidad final. Para usar de la visualización progresiva en navegadores, tiene que activar esa función en los softwares para retocar las imágenes. Todo los buenos softwares de retoque de imágenes tienen esa función.

El JavaScript

como mejorar la velocidad de un sitioAntes de insertar un elemento que usa de JavaScript, se debe evaluar el interés real que aporta al usuario, para sólo implementar los elementos que usan de JavaScript y que sean relevantes para él. Unos Webmaster añaden un montón de gadgets o de elementos visuales que usan de JavaScript y eso hace que la página se cargue lentamente. Para mejorar la experiencia del usuario y darle la impresión que la página se carga rápido, debe indicar al JavaScript cargarse al final. Existen dos maneras de hacerlo: manualmente modificando el código o con el uso de un plugin. La segunda opción es la más fácil. Existen varios plugin para hacerlo. Recomendamos para WordPress plugins como: Javascript to Footer o Scripts to Footer. Esos plugin pondrán todo lo que es JavaScript en el footer y así se cargará al final

Para ir más lejos y mejorar aun más la velocidad de carga de la página

Seguramente que si se han aplicado los consejos arriba mencionados, habrá mejorado mucho el tiempo de carga de la web, mejorado la nota que Google atribuye a la velocidad de carga de la web. Eso permitirá mejorar el SEO. Si algunos quieren ir más lejos y reducir aún más el tiempo de carga, existen algunas cosas que le permitirán mejorar pero tienen un costo.

La elección de su hosting y de su plan

A mejor plan y mejor hosting,  más veloz será la carga de la web. Elegir un buen hosting es un primer paso para tener un tiempo de reacción de servidor bajo. Si realmente quiere algo muy veloz, puede optar por un plan de hosting personal. VPS. Eso tiene un costo elevado. La otra solución es de usar un CDN. El CDN le permitirá tener algo como varios servidores en distintos lugares del mundo. Así las distancias son más cortas, sobre todo cuando la web es consultada desde países lejanos al país de tu servidor. Eso también tiene un costo elevado. Esas dos soluciones son para las web que tienen muchas visitas o para los que necesiten realmente algo veloz. Para la mayoría de los sitios, un hosting compartido de calidad sin CDN es suficiente si se respetan las reglas antes mencionadas.

En conclusión sobre la optimización de la velocidad de carga de la web

mejorar la velocidad de carga de un sitio web

La optimización de la velocidad de carga de la página no es tan complicada como se piensa, ello le permitirá ofrecer a sus usuarios una mejor navegación, más fluida y más rápida, le permitirá tener una mejor evaluación por los motores de búsqueda y así posicionarle mejor en los resultados. Tiene muchos beneficios sin perder la calidad de lo que usted ofrece. En resumen: para tener un sitio con buena evaluación de la velocidad de carga por Google, se tiene que optimizar varios puntos.

  • Usar la compresión Gzip
  • Usar el caché
  • Elegir bien el formato, y el tipo de imágenes
  • Comprimir las imágenes
  • Usar de la visualización progresiva en navegadores
  • Quitar los datos inútiles de las imágenes
  • Limitar la cantidad de JavaScript
  • Hacer que el JavaScript se cargue al final

Unos softwares de imágenes permiten hacer un tratamiento en lote de ellas. Una buena práctica es descargar en un archivo ZIP todas las imágenes que están en el FTP y hacer un tratamiento en lote para darles una compresión, así como la visualización progresiva en navegadores, luego pasarlas a un software de eliminación de datos inútiles como Stripper y subirlas al FTP de nuevo. Eso le hará ganar mucho tiempo si la web tiene un gran número de imágenes.

Ahora cada vez que suba una imagen nueva en su web piense si es indispensable, piense en el tamaño que necesita, la compresión que necesita, no olvide usar de la visualización progresiva en navegadores y de quitarle los datos inútiles antes de subirla y así siempre tendrá páginas veloces lo que brinda una buena experiencia para sus usuarios.

Summary
Cómo mejorar la velocidad de carga de sus páginas
Article Name
Cómo mejorar la velocidad de carga de sus páginas
Description
Internet debe ser rápido. Sepa la importancia de la velocidad de carga asi cómo reducir el tiempo de carga de su sitio web.
Author

Share

Author: Pierrick

Share This Post On

4 Comments

  1. Excelentes consejos, exactamente lo que necessitaba.
    Es bien completo y creo que hace milagros en la velocidad!

  2. wow funciona muy bien es impresionante como ha cambiado mi web…

  3. WOW eso ha cambiado totalmente mi web. Mis paginas necesitaban segundas para cargarse era un horror pero ahora muy veloz

  4. Muy interesante, no habia pensado en todo eso. Creo que eso me ayudara bastante.

Submit a Comment