The Fast, The Slow and the Lazy

The Fast, The Slow and
the Lazy
Maurício Linhares - @mauriciojr
http://techbot.me/

segunda-feira, 11 de abril de 2011

Who?

Java, Ruby, Objective-C, whatever

Developer at OfﬁceDrop.com

Agile Coach that hates scrum and loves
coding

Used to sing in a Heavy Metal band


Where?


Learn to respect the
HTTP protocol
What about reading the RFC?


A GET is, in fact, “GET a
COPY”
And copying should not change your database,
right?


When should we GET?

View information (images, movies, HTML
documents)

Searching (people should be able to
bookmark search results)

Web analytics (beacons and all that stuff)


POST is SENDING stuff
to the server
And this would change your DATABASE


Idempotency principle
Many GETs == same result
Many POSTs == not necessarily the same result


Google Web Accelerator
An epic and dramatic story about how an #epic
#win becomes an #epic #fail


Front End Optimization
Easier than getting the Celtics to win an NBA
championship


Use a proxy server to
deliver your content
Nginx, please

!"#$%&' !"#$%&'' !"#$%&''
(' )' *'

!"#$%&


Deﬁne a far future
expires header for all of
your static assets


Issues?

If you update the ﬁle, the browser will not
notice;

You’ll have to rename the ﬁle or add a
timestamp to tell the browser it has
changed (Rails does it for you!)

/javascripts/jquery.js?12398766


Nginx conﬁg

location ~ ^/(images|javascripts|stylesheets)/ {
root /home/deployer/shop/current/public;
expires max;
break;
}


Turn on GZIP
compression in your
proxy


Nginx conﬁg

gzip on;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 500;
gzip_disable "MSIE [1-6].";
gzip_types text/html text/xml text/
javascript;


CSS ﬁles should be at
the beginning of your
page


Use CSS sprites


At the CSS CSS

<div
style="background-‐image:
url
('a_lot_of_sprites.gif');

background-‐position:
-‐260px
-‐90px;

width:
26px;
height:
24px;">
</div>


Get a CDN to serve
your static assets and
user generated content
CDN == Content Delivery Network
S3, CloudFiles, Akamai, whatever...


Using Paperclip?
has_attached_file :uploaded_data, :storage => :s3,
:s3_credentials => "#{RAILS_ROOT}/config/s3.yml",
:s3_headers => { "Expires" => "Thu, 31 Dec 2037 23:55:55
GMT", "Cache-Control" => "max-age=315360000" },
:path => "/:class/:attachment/:id/:style_:filename",
:styles => { :thumb => '173x84#' },
:convert_options => { :all => '-strip' }


Merge all your CSS and
JavaScript ﬁles in a
single ﬁle for each
:cache => “all_styles”
If you’re using Rails


Crush all your PNG ﬁles
pngcrush for the win


Serve static assets from
many different hosts
assets1.myblog.com.br


Remove all metadata
from your JPEGs
convert -strip source.jpeg destination.jpeg
ImageMagick


JavaScript optimizations


Place scripts at the END
of your page


Download script ﬁles
asynchronously

document.write(“<script src=‘something.js’>”)

AJAX call then eval the body (RJS?
Remember?)

dom.createElement( “script” )


Minify your Scripts

YUI Compressor

JSMIN

JS Miniﬁer


Separate your scripts in
MUST HAVE and CAN
WAIT
beforeOnload.js
afterOnload.js


Use AJAX requests to
navigate on your website
Twitter.com? That’s it!


Questions?
Curses, compliments and money, now accepting all
credit cards


The Fast, The Slow and the Lazy

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (9)

Destaque

Destaque (9)

Semelhante a The Fast, The Slow and the Lazy

Semelhante a The Fast, The Slow and the Lazy (20)

Mais de Maurício Linhares

Mais de Maurício Linhares (20)

Último

Último (20)

The Fast, The Slow and the Lazy