> Minificación de código
- Eliminar (colapsar) espacios y/o saltos de línea.
- Eliminar comentarios.
- Reducir código (borrar redundancias, usar alternativas...).
- Reagrupar selectores CSS.
- Redondear unidades a “X” decimales.
Objetivo: Reducir el peso del archivo.
Minify, Uglify (minificadores)
Prettify, Beautify (desminificadores)
Slide 50
Slide 50 text
> npm install -g html-minifier
> html-minifier index.html
--minify-css --minify-js --remove-script-
type-attributes --remove-style-link-type-
attributes --use-short-doctype --remove-
comments
--collapse-whitespace -o index.min.html
> cat index.html | html-minifier
> Minificación HTML
Minifica el CSS o el
JS “inline” (requiere
cleancss / uglifyjs)
Elimina atributos
“type” o simplifica
DocType (HTML5)
Elimina los
comentarios HTML
del documento
Elimina (colapsa)
los espacios en
blanco del HTML
> JADE
include info.include.jade
- var title = "Selecciona tu opción"
#panel
h3= title
select#tipo.flat
ul
each val in [1, 2, 3]
option(value=val) Opción ##{val}
jade-lang.com
Incluir código HTML
de forma muy
organizada.
Variables
personalizadas
con contenido.
Estructuras de
control, bucles o
facilidades.
Slide 57
Slide 57 text
> APIS de HTML5
WebStorage
API Multimedia
Geolocalización
Vibración
Slide 58
Slide 58 text
michelacosta.com
> APIS de HTML5
Slide 59
Slide 59 text
La web debe ser rápida
...para los usuarios
...para los buscadores
Slide 60
Slide 60 text
> emezeta.com
DNS Conexión
SSL Subida Espera Descarga
Dominio Alojamiento Contenido
html
Redirección
Backend ¿Depende
del usuario?
Se puede optimizar
Slide 61
Slide 61 text
> Velocidad
> Fuente: Google Analytics
Dominio
Conexión
Redirección
Respuesta
Descarga
Total
Restante
0,02s
0,10s
0,24s
0,30s
0,15s
5,69s
4,88s
Dominio
Alojamiento
Web
Slide 62
Slide 62 text
CSS
html
PNG
PNG
JPG
JPG
JS
> esto ocurre por cada recurso de la web
al principio
al final
Slide 63
Slide 63 text
> Chrome Dev Tools
Slide 64
Slide 64 text
> Pingdom Tools
> Google PageSpeed
> Web Page Test
http://tools.pingdom.com/fpt/
https://developers.google.com/speed/pagespeed/
http://www.webpagetest.org/
Slide 65
Slide 65 text
> Reducir número de peticiones
Slide 66
Slide 66 text
zerosprites.com
> Reducir número de peticiones
spritecow.com
> Fuentes
> Fuente: http://httparchive.org/
Fuentes
Sin fuentes
53%
47%
Slide 71
Slide 71 text
¿Hay otra forma de reducir
peticiones?
Slide 72
Slide 72 text
> FontAwesome
fontawesome.io
Slide 73
Slide 73 text
> WebFont
PNG A B C
Slide 74
Slide 74 text
> WebFonts
> No pierden resolución al ampliar/reducir
> Son fuentes, puedes tratarlas con CSS
Slide 75
Slide 75 text
> WebFonts
> No pierden resolución al ampliar/reducir
> Son fuentes, puedes tratarlas con CSS
> Desventaja: Sólo un color
> Desventaja: Quiero un icono específico
Slide 76
Slide 76 text
> ¿Solución?
Slide 77
Slide 77 text
> ¿Solución?
Slide 78
Slide 78 text
> IcoMoon
icomoon.io/app
Slide 79
Slide 79 text
> Reducir tiempo de descarga
Reducir tamaño
Slide 80
Slide 80 text
¿¿Cómo??
Slide 81
Slide 81 text
> Utilizar compresión HTTP (GZip)
GZip? GZip?
15KB
85KB
html
GZip!
85KB
html
Slide 82
Slide 82 text
> curl -L -H Accept-encoding:gzip -I emezeta.com
HTTP/1.1 200 OK
Server: nginx
Date: Thu, 02 Jul 2015 03:28:17 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 20
Connection: keep-alive
Vary: Accept-Encoding
Content-Encoding: gzip
> ¿Usa compresión HTTP?
El sitio web
comprime en gzip
los documentos
Sólo algunos
formatos pueden
usar compresión
HTTP: html, json,
css, js, xml, svg...
Pregunto si el sitio
web soporta
compresión HTTP
> npm install -g uglifyjs
> uglifyjs index.js
--comments all --compress --lint
-o index.min.js
> cat index.min.js | uglifyjs --beautify 2>null
> Minificación JS
Preserva todos los
comentarios JS
(permite RegExp)
Activa el
compresor de
código JS.
Parsea y avisa de
errores Javascript.
Des-minifica el
código Javascript
mostrado con cat.
Slide 115
Slide 115 text
> CoffeeScript
var i, j;
for (i = j = 0; j <= 10; i = ++j) {
alert(i);
}
coffeescript.org
alert i for i in [0..10]
Slide 116
Slide 116 text
También tenemos fragmentación...
=
Slide 117
Slide 117 text
Estándar ECMAScript
ES5 ES6 ES7
JUN/2015
DIC/2009 En progreso
kangax.github.io/compat-table/es6
Slide 118
Slide 118 text
> babel
const PI = 3.14
let func = e => console.log(e)
func(5)
func(`El valor de PI es ${PI}.`)
babeljs.io
"use strict"
var PI = 3.14
var func = function(e) {
return console.log(e)
}
func(5)
func("El valor de PI es " + PI + ".")
Slide 119
Slide 119 text
> JQuery
jquery.com
var request = new XMLHttpRequest();
request.open('GET', '/url', true);
request.onreadystatechange = function() {
if (this.readyState === 4)
if (this.status >= 200 && this.status < 400)
var data = JSON.parse(this.responseText);
};
request.send();
$.getJSON('/url', function(data) {
// código
});
jekyllrb.com
---
layout: post
category: tecnología
tags: [web, blogs]
---
# Título
Esto es un **pequeño
ejemplo** de un artículo
escrito con *markdown*
y *YAML Front Matter*.
Nuevos CMS:
Generadores estáticos
Slide 128
Slide 128 text
JSON
0,09KB
0,1KB
0,3KB
Slide 129
Slide 129 text
¡Quiero algo más cómodo!
¡Pero todo esto es mucho trabajo!