The Fast, The Slow and the Lazy

The Fast, The Slow and the Lazy

Maurício Linhares - @mauriciojrhttp://techbot.me/

segunda-feira, 11 de abril de 2011

http://techbot.me

http://techbot.me

Who?

Java, Ruby, Objective-C, whatever

Developer at OfficeDrop.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 principleMany GETs == same result

Many POSTs == not necessarily the same result


Google Web AcceleratorAn epic and dramatic story about how an #epic

#win becomes an #epic #fail


Front End OptimizationEasier than getting the Celtics to win an NBA

championship


Use a proxy server to deliver your content

Nginx, please

!"#$%&

!"#$%&'('

!"#$%&'')'

!"#$%&''*'


Define a far future expires header for all of

your static assets


Issues?

If you update the file, the browser will not notice;

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

/javascripts/jquery.js?12398766


Nginx config

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


Turn on GZIP compression in your

proxy


Nginx config

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 files 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 NetworkS3, 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 files in a single file for each

:cache => “all_styles”If you’re using Rails


Crush all your PNG filespngcrush for the win


Serve static assets from many different hosts

assets1.myblog.com.brassets2.myblog.com.brassets3.myblog.com.brassets4.myblog.com.br


Remove all metadata from your JPEGs

convert -strip source.jpeg destination.jpegImageMagick


JavaScript optimizations


Place scripts at the END of your page


Download script files 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 Minifier


Separate your scripts in MUST HAVE and CAN

WAITbeforeOnload.jsafterOnload.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

Technology

Transcript of The Fast, The Slow and the Lazy