Como optimizar la velocidad de carga de mi página web

Hola Amigos, hoy hablaremos de como mejorar la velocidad de carga de nuestra web y las claves para mejorar la velocidad de carga. Uno de los factores que intervienen en el posicionamiento de manera directa es la velocidad de carga de nuestra página web, Google le da mucha importancia a este factor y nosotros deberíamos darle la misma o más. Hoy en día los usuario de internet quiere ver el contenido sin tener que esperar mucho para conseguir su propósito, una página lente en la carga puede aburrir en la espera de la carga de contenido y hacer que el usuario desista de consultar.

¿Como podemos optimizar la velocidad de carga de nuestra web?

Lo primero es saber en que estado se encuentra nuestra web en velocidad de carga. Es muy importante controlar el peso de nuestras imágenes, archivos JS , CSS y la compresión de HTML. Para todo este podemos hacer un montón de acciones para mejorar la carga de nuestra página web desde tocar el archivo .htaccess en el servidor hasta instalar plugin en wordpressy para eso tenemos varias herramientas online a nuestra disposición. !Empezamos¡

¿Que velocidad tiene nuestros sitio web?

1. PageSpeed Insights La herramienta que nos facilita google y que nos indica en que tenemos que mejorar.
2. webpagetest.org Para mi una de las mejores páginas para medir la velocidad y ver los archivos que más recursos esta tomando de la carga.
3. gtmetrix.com Otra buena página para medir la velocidad de tu página web.

También podemos ver los archivos que mas pesan con la herramienta para desarrolladores de chrome. Si vamos al navegador Chrome en la parte superior derecha veremos 3 puntitos en horizontal pulsamos >> más herramientas >> herramientas para desarrolladores. Una vez la tengamos abierta nos dirigimos a la pestaña Network y marcamos la casilla Diablee Cache, depuse podemos pulsar que componentes, imágenes, CSS, JS que interviene en la carga queremos ver. Una vez marcados tenemos que pasar F5 o refrescar la página del navegador.

Una ves sabemos los componentes que más pesan de nuestra web podemos pasa tratarlos para reducir su tamaño. Yo recomiendo hacerlo por pasos y siempre que reduzcas un archivo haz una copia de seguridad del mismo. Los archivos .jpg .gif y los puedes descargar desde el navegador, los JS y CSS te recomiendo que los descargues por FTP.

¿Como reducir los tamaños de las imágenes para mejorar la carga de mi web?

Para una carga optima ninguna imagen en tu web debería de pasar de los 100 KB, si tu página web tiene gráficos más pesados tenemos varias herramientas online para comprimir imágenes. Yo uso las dos primeras, recomiendo hacer una copia de seguridad de las imágenes que estamos reduciendo.

1. kraken.io/web-interface Comprime imágenes jpg, gif y png con opciones de compresión
2. tinyjpg.com Comprime imágenes jpg, gif y png de marea automática
3. compressor.io/compress
4. optimizilla.com/es/

¿Como reducir los archivos JS y CSS?

Para ganar velocidad con nuestros archivos JS y CSS podemos podemos optimizarlos con estas dos herramientas. Como te he dicho antes es muy importante hacer copias de seguridad de los archivos que tratamos, especial mente en estos JS y CSS en algunos casos puede que la web no soporte la compresión y pueda verse mal o romperse.

1. csscompressor.com Compresor de JS y CSS con opciones para mejorar la compresión y evitar errores de carga
2. minifier.org Comprimir código JS y CSS de manera automática

Una vez comprimidos estos archivos ganaremos muchas velocidad en nuestra página web, también podemos poner este código en nuestros archivo .htaccess.

Código compresión en .htaccess para mejorar la velocidad de carga en nuestra web

# Leverage Browser Caching
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access 1 year"
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType image/ico "access plus 1 year"
ExpiresByType image/icon "access plus 1 year"
ExpiresByType image/x-ico "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType text/html "access 5 days"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType font/truetype "access plus 1 year"
ExpiresByType font/opentype "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/x-font-woff2 "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/font-woff "access plus 1 year"
ExpiresByType application/font-woff2 "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType text/x-cross-domain-policy "access plus 1 week"
ExpiresDefault "access 1 month"
</IfModule>
<IfModule mod_headers.c>
<filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
Header set Cache-Control "max-age=2678400, public"
</filesmatch>
<filesmatch "\.(html|htm)$">
Header set Cache-Control "max-age=7200, private, must-revalidate"
</filesmatch>
<filesmatch "\.(pdf)$">
Header set Cache-Control "max-age=86400, public"
</filesmatch>
<filesmatch "\.(js)$">
Header set Cache-Control "max-age=2678400, private"
</filesmatch>
</IfModule>

Plugin wordpress para mejorar la velocidad de carga del blog

Para wordpress existen infinidad de pluing para mejorar el rendimiento de velocidad de carga de tu blog. Yo te recomiendo dos, y recuerda antes de instalar los plugin haz una copia de seguridad de tu wordpress también te recomiendo ir tocado las pociones por partes, primero la compresión de los css, borramos cache y refrescamos para ver que no se rompa nada en el blog.

1. Autoptimize para mi uno de los plugin más completos y fácil de usar.
2. WP Fastest Cache Uno de los que más utilizo por su rendimiento y su facilidad de uso

Pues una vez comprimidos archivos lo único que nos queda es comprobar la mejora en velocidad de carga del nuestra página web. Si te ha gustado el post comparte! seguro que ayudamos a alguien que lo necesite.

Diego Molina

Soy un apasionado del Marketing digital y el posicionamiento en buscadores (SEO). Dispongo de más de 18 años de experiencia en la comunicación para venta de productos y servicios por Internet. Estoy especializado en Marketing Digital, SEO y SEM. Promociono marcas, empresas y negocios por internet ofreciendo asesoramiento personalizados con el  valor añadido de mi experiencia en el sector de la comunicación por internet.

¿Quieres saber más de mí? pulsa aquí