Cómo optimizar un sitio web desde cero. (Parte 2)

el

En el post anterior, hablamos sobre cómo mejorar un sitio Web siguiendo unas series de normas y recomendaciones que nos proporcionan las herramientas de Google, para mejorar el rendimiento, el posicionamiento y el incremento de visitas, como también poder brindar a los usuarios una experiencia fluida, eficiente y llamativa para que nuestros sitios web no queden en el olvido. En esta oportunidad nos enfocaremos en otros tipos de métodos y herramientas que también pueden ser útiles para la optimización de nuestro sitio web.

La optimización web es un punto muy importante hoy en día, es el que se encarga de evaluar o mejorar el rendimiento de las páginas más determinantes de una web. Esto quiere decir que la optimización web mejora lo que está mal y refuerza los puntos débiles que tiene cada página para lograr tener un mejor rendimiento en ella.

Por lo tanto, existen varios métodos y herramientas que permiten mejorar el rendimiento de una web, estos realizan pruebas para medir la velocidad y comprobar el tiempo de respuesta de la web.

A continuación, se mencionara los métodos y herramientas que hacen que una web tenga mejor rendimiento en la velocidad de carga y en el tiempo de respuesta:

1.- Compresión Gzip

2.- Caché del navegador

3.- Compresión de imágenes

4.- Minificación de archivos (CSS y JS)

1.- Compresión Gzip

La compresión Gzip, consiste en comprimir los archivos reduciendo la cantidad de espacio que requieren en el servidor. De esta forma, mejora el tiempo de carga de las páginas y tiene menos consumo de ancho de banda en el servidor.

Para habilitar la compresión Gzip, solo se tiene que añadir un trozo de código en el archivo .htaccess que está ubicado en la raíz del servidor.

# Compress HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

AddOutputFilterByType DEFLATE application/x-font

AddOutputFilterByType DEFLATE application/x-font-opentype

AddOutputFilterByType DEFLATE application/x-font-otf

AddOutputFilterByType DEFLATE application/x-font-truetype

AddOutputFilterByType DEFLATE application/x-font-ttf

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE font/opentype

AddOutputFilterByType DEFLATE font/otf

AddOutputFilterByType DEFLATE font/ttf

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/javascript                      

AddOutputFilterByType DEFLATE text/plain                               

AddOutputFilterByType DEFLATE text/xml 

2.- Caché del navegador

Al abrir una web en el navegador, se pueden almacenar los archivos (JS, CSS, Imágenes, etc.), por lo tanto, se puede ahorrar tiempo de carga si un usuario visita más de una vez el sitio web. Esto quiere decir que un usuario no tiene que volver a cargar todos los archivos nuevamente cuando realiza la segunda visita y de esta manera las páginas serán mucho más rápidas en cargar.

En el archivo .htaccess se debe añadir un trozo de código, así como en el punto anterior, pero este código lo que hace especificar en la caché del navegador los archivos que se quieren almacenar por un cierto tiempo, ejemplo:

<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 text/html “access 1 month”

ExpiresByType application/pdf “access 1 month”

ExpiresByType text/x-javascript “access 1 month”

ExpiresByType application/x-shockwave-flash “access 1 month”

ExpiresDefault “access plus 1 month”

</IfModule>                                                               

Ejemplo completo de cómo se debe ver el archivo .htaccess con los puntos anteriores:

<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 text/html “access 1 month”

ExpiresByType application/pdf “access 1 month”

ExpiresByType text/x-javascript “access 1 month”

ExpiresByType application/x-shockwave-flash “access 1 month”

ExpiresDefault “access plus 1 month”

</IfModule>                                                       

<IfModule mod_deflate.c>

# Compress HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

AddOutputFilterByType DEFLATE application/x-font

AddOutputFilterByType DEFLATE application/x-font-opentype

AddOutputFilterByType DEFLATE application/x-font-otf

AddOutputFilterByType DEFLATE application/x-font-truetype

AddOutputFilterByType DEFLATE application/x-font-ttf

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE font/opentype

AddOutputFilterByType DEFLATE font/otf

AddOutputFilterByType DEFLATE font/ttf

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/xml

</IfModule>

3.- Compresión de imágenes

Las imágenes con mayor peso en MB pueden reducir la velocidad de carga de una página web.  Es por eso que se recomienda comprimir o reducir el tamaño las imágenes. Se puede recortar el espacio innecesario y luego se comprime para así poder conseguir un ahorro importante de espacio. Esto se puede realizar con cualquier programa de edición de fotos.

A continuación se recomienda algunas herramientas, que se pueden utilizar de forma online:

Otro punto que también es importante son las dimensiones que deben tener las imágenes, porque con mayor tamaño que tenga, se  tiene más peso en MB y al momento de comprimir la imagen puede ser que no se comprima lo necesario. Lo más recomendable es que las imágenes tengan un largo de 1200px y el ancho puede ser de cualquier tamaño porque se adapta con el largo. De esta forma, se consigue que la imagen tenga una calidad visual y menos peso en MB. Una imagen con dimensiones de 1200 x 1200 puede llegar a pesar 120kb y hasta menos, utilizando las herramientas mencionada anteriormente.

4.- Minificación de archivos (CSS y JS)

La minificación de archivos se refiere a la eliminación de bytes innecesarios como los espacios adicionales, saltos de línea y sangrías. También se refiere a la cantidad de excesiva de archivos JS y CSS, porque pueden llegar a realizar varias peticiones al servidor y esto lo que hace es que la página web sea más lenta al cargar todos los archivos.

Lo que se recomienda, es minificar los códigos JS y CSS para así poder acelerar la descarga de archivos y el tiempo de ejecución. Para realizar la minificación de archivos se deben utilizar las herramientas que puedan unificar y a su vez comprimir el código. De esta forma se reduce el peso y la cantidad de peticiones en un solo archivo para JS y el CSS.

Herramientas que se pueden utilizar para la minificación de archivos:

La herramienta que se recomienda para la minificación de archivo (JS y CSS) es Gulp, porque puede unificar todos los archivos y comprimir el código en uno solo. De esta forma, en lugar de cargar 10 js y 10 css en cada página, se cargará 1 de cada archivo, por lo tanto, la página web será más rápida en cargar.

A continuación se explicara con un ejemplo los pasos que se deben seguir para utilizar la herramienta Gulp:

Se debe de Instalar Node.js y Gulp para su utilización.

Ahora se debe crear un archivo GulpFile.js y ubicarlo en la raíz del proyecto o en la página web. En la misma raíz se debe de instalar las dependencias de Gulp utilizando node.js de la siguiente forma:

npm install –save gulp

npm install –save gulp-concat-css

npm install –save gulp-minify-css

npm install –save npm install gulp-concat

npm install –save gulp-notify

npm install –save gulp-uglify

Luego se debe editar el archivo GulpFile.js para agregar todos los módulos instalados anteriormente añadiendo el siguiente código:    

 var gulp = require(‘gulp’),

concat = require(‘gulp-concat’),

uglify = require(‘gulp-uglify’),

minifycss =require(‘gulp-minify-css’);

En cada función gulp.task, es en donde se le asignará la tarea, para que realice la unificación y comprensión de código de los archivos.

En esta función se encarga de unificar y comprimir el código CSS de todos los archivos que se encuentre en la ruta ‘css/*.css’ y lo guarda en un único archivo minify-min.css y lo ubica en la nueva ruta ‘out/css/’

gulp.task(‘css’, function () {

gulp.src(‘css/*.css’)

.pipe(concat(‘minify-min.css’))

.pipe(minifycss())

.pipe(gulp.dest(‘out/css/’));

});

Para la función javascript es el mismo caso: unifica y comprime el código JS de todos los archivos que se encuentre en la ruta ‘js/*.js’ y lo guarda en un único archivo minify-min.js y lo ubica en la nueva ruta ‘out/js/’

gulp.task(‘js’, function(){

gulp.src(‘js/*.js’)

.pipe(concat(‘minify-min.js’))

.pipe(uglify()).pipe(gulp.dest(out/js/’));

});

En esta última tarea, es la que se encargará de llamar las 2 tareas anteriores para que se pueda ejecutar al mismo  tiempo

gulp.task(‘optimizar’, [‘css’, ‘js’]);

Como se puede ver en el código se concateno y se minifico todos los archivos  (JS y CSS). Ahora se abre una terminal se ubica en la raíz del proyecto o donde se encuentre el archivo GulpFile.js y se ejecuta el siguiente comando:

gulp optimizar

De esta forma, es que se puede utilizar la herramienta Gulp para poder reducir la cantidad excesiva de archivos JS y CSS, mejorado así la descarga de archivos de una página web.  

Conclusión

Como pueden ver en este post y en el post anterior, hay varias maneras de cómo mejorar nuestro sitio web, así sea siguiendo las recomendaciones de Google, como los métodos y herramientas que se menciona en este post. Lo que se busca es brindarle al usuario que visita nuestras páginas, una experiencia fluida y eficiente, mejorando así el tiempo de espera de los usuarios, cuando visualice nuestras páginas.

¿Conoces alguna otra técnica que mejore el rendimiento web? ¿Hiciste pruebas con alguna herramienta y conseguiste mejor resultado? ¿Tienes dudas o quieres saber más sobre el tema? ¿A qué esperas para comentar y compartir tu experiencia?

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s