/ Gulp.js

Web Performance - Mejorar la Velocidad de tu Página Web

Una de las maneras de mejorar el posicionamiento orgánico (SEO) es trabajar en mejorar la velocidad de carga del sitio web.

Hay muchas técnicas para lograr esta tarea, en este post vamos a tratar algunas buenas practicas para implementarlo en nuestro sitio web.

Comprimir Archivos CSS

Lo más recomendable es comprimir nuestros archivos CSS.

Código sin Comprimir

Este tipo de código es recomendable para desarrollo, y no para producción ya que el peso aumenta considerablemente.

html {
  font-family: sans-serif; 
  line-height: 1.15; 
  -ms-text-size-adjust: 100%; 
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

figcaption,
figure,
main { 
  display: block;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box; 
  height: 0; 
  overflow: visible; 
}

pre {
  font-family: monospace, monospace; 
  font-size: 1em;
}

Código Comprimido

Este es el mismo código anterior, recomendable para producción ya que el peso es menor.

html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}
h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}

Herramientas Para Comprimir Archivos CSS

Hay una diversidad de herramientas para poder lograr esta tarea.

Gulp.js

Una de mis favoritas es Gulp.js, esta herramienta esta escrita en JavaScript y por lo tanto trabaja con el lenguaje de programación Node.js.

Contenido del archivo package.json

{
  "name": "Gulp.js",
  "version": "1.0.0",
  "description": "Comprimir Archvios Con Gulp.js",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Luis Rene Mas Mas",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean-css": "^2.0.13",
    "gulp-notify": "^2.2.0"
  }
}

Contenido del archivo gulpfile.js

var gulp = require('gulp');  
var cleanCSS = require('gulp-clean-css');  
var notify = require('gulp-notify');

//Tarea para comprimir archivos CSS
gulp.task('comprimir-css', function() {  
 return gulp.src('css/*.css') //Ruta de la carpeta CSS apuntando a los archivos `.css`
  .pipe(cleanCSS({compatibility: 'ie8'})) //Comprime los archivos `.css`
  .pipe(gulp.dest('dist')) //Carpeta donde se guardara el archivo `.css` comprimido
  .pipe(notify("Tarea comprimir-css terminada!")); //Mensaje gracias al plugin `gulp-notify`
});

//Vuelve a ejecutar la tarea cuando se modifica algún archivo 
gulp.task('watch', function(){  
 gulp.watch('./css/**/*', ['comprimir-css']);
});

//Tarea por defecto
gulp.task('default',['watch', 'comprimir-css']);

Aquí tienes una guía de instalación y uso completa de Gulp.js.

Sublime Text

Para los usuarios de Sublime Text, usaremos el plugin YUI-Compressor.

Una vez instalado el plugin en Sublime Text solo tienes que abrir el archivo CSS a comprimir.

Windows

Presione F7 o Ctrl + b.

MAC

Presione F7 o command + b.

Aquí tienes una guía de instalación completa de Sublime Text.


Comprimir Archivos JavaScript

Vamos a comprimir los archivos JavaScript de la misma manera que los archivos CSS.

Código sin Comprimir

Código recomendado para desarrollo.

function user_agent(){

	var $agenteUsuario = navigator.userAgent;
	var $contenedorTextAgenteUsuario = document.getElementById('user-agent');

	$contenedorTextAgenteUsuario.innerHTML = $agenteUsuario;
}

window.onload = function(){
	user_agent();
}

Código Comprimido

Código recomendado para producción.

function user_agent(){var b=navigator.userAgent;var a=document.getElementById("user-agent");a.innerHTML=b;}window.onload=function(){user_agent();};

Herramientas Para Comprimir Archivos JavaScript

Hay una diversidad de herramientas para poder lograr esta tarea.

Gulp.js

Vamos a implementar el código para comprimir nuestros archivos JavaScript usando Gulp.js.

Contenido del archivo package.json

{
  "name": "Gulp.js",
  "version": "1.0.0",
  "description": "Comprimir Archvios Con Gulp.js",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Luis Rene Mas Mas",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-uglify": "^2.0.0",
    "pump": "^1.0.1"
  }
}

Contenido del archivo gulpfile.js

var gulp = require('gulp');  
var uglify = require('gulp-uglify');  
var pump = require('pump');

//Tarea para comprimir archivos js
gulp.task('comprimir-js', function (cb) {  
 pump([
  gulp.src('js/*.js'), //Ruta de la carpeta apuntando a los archivos `.js`
  uglify(), //Comprime los archivos `.js`
  gulp.dest('dist')//Carpeta donde se guardara el archivo `.js` comprimido
   ],
    cb
  )
  .pipe(notify("Tarea comprimir-js terminada!")); //Mensaje gracias al plugin `gulp-notify`
});

//Vuelve a ejecutar la tarea cuando se modifica algún archivo 
gulp.task('watch', function(){  
 gulp.watch('./js/**/*', ['comprimir-js']);
});

//Tarea por defecto
gulp.task('default',['watch', 'comprimir-js']); 

Sublime Text

Para comprimir nuestros archivos JavaScript también podemos utilizar el plugin YUI-Compressor.


Comprimir las Imágenes

Es una gran idea comprimir las imágenes que publiques en tu sitio web ya que si no lo haces la página demorara en cargar.

Aquí te recomendare algunas herramientas online muy buenas que comprimen tus imágenes sin perder demasiada calidad.

Estas páginas son de uso libre así que no hay ningun problema para no utilizarlas.

https://compressor.io

Estos sitios web son gemelos.
https://tinyjpg.com o https://tinypng.com

Estructura HTML

Esta es una estructura HTML recomendada en cuanto a la ubicación de archivos CSS y JavaScript.

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Como colocar tus archivos CSS - JS en tu sitio web</title>
	<!-- Una de las formas de lograr que tu página se muestre de forma rápida es colocar el código CSS de la siguiente forma -->
	<style type="text/css">
	/*Coloca el código CSS principal de preferencia el que se repite en múltiples páginas*/
		html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}

		/* Código ... */
	</style>
	<!-- coloca tus archivos secundarios CSS y librerías CSS-->
	<link rel="stylesheet" href="dist/estilos.css">
	<link rel="stylesheet" href="dist/vendor.css">

	<!--Uno de los script recomendados para poner en el Head es el código de Google Analytics-->
	<script>
	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

	  ga('create', 'UA-XXXXXXXX-Y', 'auto');
	  ga('send', 'pageview');
	</script>
</head>
<body>
	<header>
		<h1>Mostrar Agente de Usuario con JavaScript</h1>
	</header>
	<main>
		<p id="user-agent"></p>
	</main>
	<footer>
		<a href="https://01luisrene.com">01luisrene</a> &copy; 2016
	</footer>

	<!-- Coloca todos tus archivos JavaScript en este lugar, antes del cierre del tag <body>-->
	<script type="text/javascript" src="dist/script.js"></script>
</body>
</html>

Descargar el Proyecto Implementado en Gulp.js

Puedes descargar el proyecto alojado en GitHub que sirve para comprimir archivos CSS y JavaScript Usando Gulp.js.

Descargar

Luis Rene Mas Mas

Luis Rene Mas Mas

Soy desarrollador front-end, me encanta las nuevas tecnologías web, administrar este blog es mi pasatiempo favorito.

Leer Más