Perfecting eCommerce Frontend

Perfecting Perfecting Ecommerce Ecommerce Frontend Frontend May 2013 May 2013

I'm Denis, I like performance I'm Denis, I like performance
I'm actually moving, swear I'm actually moving, swear ↑ ↑

Bam Bam ↑ ↑

@jumph4x @jumph4x Twitter Twitter Github Github

Like free software Like free software Tow hitch Tow hitch
↑ ↑ seriously seriously

+ + = = BFFs 4EVA BFFs 4EVA

+ + = = 3.5 years 3.5 years

Getting the most Getting the most from your frontend from
your frontend

from your frontend from your frontend Performance Performance Getting the
most Getting the most

~10s iframes ~10s iframes ...lulz ...lulz

http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/ 80-90% of the end- 80-90% of the end- user
response time is user response time is spent on the frontend. spent on the frontend. Start there.” Start there.” “ “ Steve Souders Steve Souders

http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/

Google loves us (99*/100) Google loves us (99*/100)

The full webpage path The full webpage path Draw @
~350 ms Draw @ ~350 ms Done @ ~740 ms Done @ ~740 ms

Let's talk about Let's talk about CSS CSS (briefly) (briefly)

body body table table tr td tr td #myelement #myelement

http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/ #main table tr td ul li a #main table
tr td ul li a Key selector Key selector ↑ ↑

Excellent! Excellent! IDs: IDs: #unique #unique Classes: Classes: .reusable .reusable
http://csswizardry.com/2011/09/writing-efficient-css-selectors/

Good Good Tags: Tags: element element Siblings: Siblings: el +
ements el + ements Children: Children: el > ements el > ements Descendants: Descendants: el ements el ements http://csswizardry.com/2011/09/writing-efficient-css-selectors/

Slow! Slow! Universal: Universal: * * Attribute: Attribute: [type='text'] [type='text']
Pseudo: Pseudo: :nth-child() :nth-child() http://csswizardry.com/2011/09/writing-efficient-css-selectors/ Regex?! Regex?! [class^='icon'] [class^='icon']

https://github.com/josh/css-explain CSS Explain CSS Explain

Cautionary tale Cautionary tale SASS SASS + + Twitter Bootstrap
Twitter Bootstrap + + @extend @extend

Chrome 25 ridiculously slow Chrome 25 ridiculously slow Crashes Crashes

Let's talk about Let's talk about JS JS (super briefly)
(super briefly)

http://www.stevesouders.com/blog/2012/01/13/javascript-performance/ Median pageload Median pageload 2.49s 2.49s 3.65s 3.65s

No more JS No more JS

Let's talk about Let's talk about asset delivery asset delivery

The The original original responsive: responsive: time to begin time
to begin render render http://www.stevesouders.com/blog/2013/04/26/i/

~200 HTTP ~200 HTTP requests :( requests :(

http://ask.slashdot.org/story/12/03/06/175223/ask-slashdot-what-is-an-acceptable-broadband-latency

// Sass/Scss/CSS // Sass/Scss/CSS @import "variables" @import "variables" @import "header"
@import "header" ... ... @import @import */ JS/Coffee /* */ JS/Coffee /* //= require ./one //= require ./one //= require ./two //= require ./two

Sprites! Sprites!

// Sass+Rails=<3 // Sass+Rails=<3 .icon .icon - image-url(stuffs.png) - image-url(stuffs.png)
+ asset-data-url(stuffs.png) + asset-data-url(stuffs.png)

IcoMoon App IcoMoon App http://icomoon.io/app/

Asset Domains Asset Domains http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/

~ 1000 ms blocking ~ 1000 ms blocking

# config/environments/production.rb # config/environments/production.rb config.asset_host = Proc.new { |*args| config.asset_host
= Proc.new { |*args| source, request = args source, request = args images = source && source.match(/products/) images = source && source.match(/products/) no_ssl = request && !request.ssl? no_ssl = request && !request.ssl? if no_ssl && images if no_ssl && images "//assets#{rand(5)}.fcpstores.com" "//assets#{rand(5)}.fcpstores.com" else else "//123456abcde.cloudfront.net" "//123456abcde.cloudfront.net" end end } } $$$ HUGE $$$ HUGE

Parallelism! Parallelism!

Time to Time to First Byte First Byte http://www.stevesouders.com/blog/2013/04/26/i/

http://guides.rubyonrails.org/3_1_release_notes.html#http-streaming def action def action @collection = Model.gimme.all @collection =
Model.gimme.all respond_to do |format| respond_to do |format| format.html format.html end end end end

# app/controllers/my_objeckz.rb # app/controllers/my_objeckz.rb def action def action - -
@collection = Objekt.gimme.all @collection = Objekt.gimme.all respond_to do |format| respond_to do |format| - format.html - format.html + format.html{ render :action, :streaming => true } + format.html{ render :action, :streaming => true } end end end end + helper_method :collection + helper_method :collection + def collection + def collection + @collection ||= Objekt.gimme.all + @collection ||= Objekt.gimme.all + end + end http://weblog.rubyonrails.org/2011/4/18/why-http-streaming/

1 controller, 1 controller, 2 actions = 2 actions =
95% of concern 95% of concern

Chunky Response Bacon Chunky Response Bacon

More parallelism! More parallelism!

http://komplexgraphix.com/graffiti-wall-art/ http://komplexgraphix.com/graffiti-wall-art/

Browser hints Browser hints <link rel=" <link rel="dns-prefetch dns-prefetch" "
href=" href="//mysite.cloudfront.com //mysite.cloudfront.com "> "> <link rel=" <link rel="prefetch prefetch" href=" " href="/next-step.html /next-step.html"> "> <link rel=" <link rel="prefetch prefetch" href=" " href="large-image.png large-image.png"> "> <link rel=" <link rel="subresource subresource" href=" " href="end-of- end-of- document.js document.js"> ">

Let's talk Let's talk SEO SEO

You're already doing it! You're already doing it! http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

Fire your SEO firm Fire your SEO firm Start reading
Start reading Webmaster Academy Webmaster Academy http://support.google.com/webmasters/bin/static.py?hl=en&page=checklist.cs&tab=1095542 (ProTip) (ProTip)

Dec 2011 Dec 2011 May 2013 May 2013 Daily organic
visits Daily organic visits 4000 4000

www.fcpeuro.com/BMW-parts/325i/Suspension/ www.fcpeuro.com/BMW-parts/325i/Suspension/?year=1993 ?year=1993 www.fcpeuro.com/BMW-parts/325i/ www.fcpeuro.com/BMW-parts/325i/Suspension/ Suspension/ www.fcpeuro.com/BMW-parts/ www.fcpeuro.com/BMW-parts/325i/ 325i/ www.fcpeuro.com/
www.fcpeuro.com/BMW-parts/ BMW-parts/ www.fcpeuro.com/ www.fcpeuro.com/ www.fcpeuro.com/ www.fcpeuro.com/about-us about-us Trimmable URLs Trimmable URLs http://support.google.com/webmasters/bin/answer.py?hl=en&answer=76329 http://googlewebmastercentral.blogspot.com/2010/04/to-slash-or-not-to-slash.html

Regex Constraints Regex Constraints # config/routes.rb # config/routes.rb MAKES =
/BMW|Saab/ MAKES = /BMW|Saab/ MODELS = /325i/900/ MODELS = /325i/900/ match '( match '(:make :make)-parts/ )-parts/:model :model' => 'spree/products#index', ' => 'spree/products#index', :via => :get, :via => :get, :trailing_slash => true, :trailing_slash => true, :make :make => MAKES, => MAKES, :model :model => MODELS => MODELS match '( match '(:make :make)-parts(/ )-parts(/:taxon :taxon)' => "spree/products#index", )' => "spree/products#index", :via => :get, :via => :get, :trailing_slash => true, :trailing_slash => true, :make :make => MAKES => MAKES www.fcpeuro.com/ www.fcpeuro.com/BMW BMW-parts/ -parts/325i 325i/ / www.fcpeuro.com/ www.fcpeuro.com/BMW BMW-parts/ -parts/SomeTaxonName SomeTaxonName/ /

CanonicalRails CanonicalRails https://github.com/jumph4x/canonical-rails A lot of folks do harm by
A lot of folks do harm by neglecting canonicalization neglecting canonicalization [...], here is a [library] to start [...], here is a [library] to start on it...” on it...” “ “

Authoritative version Authoritative version http://mystore.com/shoes http://mystore.com/shoes http://mystore.com/shoes http://mystore.com/shoes / /
http:// http://www. www.mystore.com/shoes mystore.com/shoes http://mystore.com/products? http://mystore.com/products? taxon_permalink taxon_permalink =shoes =shoes http://mystore.com/products? http://mystore.com/products? sort sort=price =price http://mystore.com/products? http://mystore.com/products? doesnt_exist doesnt_exist=true =true http://mystore.com/products? http://mystore.com/products? keyword_attack keyword_attack= =viagra viagra http://support.google.com/webmasters/bin/answer.py?hl=en&answer=139394

rel='canonical' rel='canonical' # config/initializers/canonical_rails.rb # config/initializers/canonical_rails.rb CanonicalRails.setup do |config| CanonicalRails.setup
do |config| config.host = ' config.host = 'www.mywebstore.com www.mywebstore.com' ' config.collection_actions = [ config.collection_actions = [:index, :available :index, :available] ] config.whitelisted_parameters = [ config.whitelisted_parameters = [:country :country] ] end end <html> <html> <head> <head> <%= <%= canonical_tag canonical_tag -%> -%> ... ... </head> </head> ... ...

Semantic Markup Semantic Markup http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185417 http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185417 http://schema.org/docs/schemas.html http://schema.org/docs/schemas.html

<div <div itemscope itemtype=" itemscope itemtype=" http://schema.org/Product http://schema.org/Product" "> >
<img <img itemprop=" itemprop="image image" " src="dell-30in-lcd.jpg" /> src="dell-30in-lcd.jpg" /> <span <span itemprop=" itemprop="name name" ">Dell UltraSharp 30" LCD >Dell UltraSharp 30" LCD Monitor</span> Monitor</span> <div <div itemprop=" itemprop="aggregateRating aggregateRating" " itemscope itemtype=" itemscope itemtype="http://schema.org/AggregateRating http://schema.org/AggregateRating " "> > <span <span itemprop=" itemprop="ratingValue ratingValue" ">87</span> >87</span> out of <span out of <span itemprop=" itemprop="bestRating bestRating" ">100</span> >100</span> based on <span based on <span itemprop=" itemprop="ratingCount ratingCount" ">24</span> user >24</span> user ratings ratings </div> </div>

Test your work Test your work

Content Pages Content Pages home#index home#index products#index products#index products#index' products#index'
products#index'' products#index'' products#index''' products#index''' products#show products#show orders#edit orders#edit [...] [...] home#index home#index products#index products#index products#index' products#index' products#index'' products#index'' products#index''' products#index''' products#show products#show orders#edit orders#edit [...] [...] Brand, value prop Brand, value prop Best sellers? Best sellers? Broad category Broad category Specific category Specific category Longtail category Longtail category Details, how-tos Details, how-tos Brand, value prop Brand, value prop Best sellers? Best sellers? Broad category Broad category Specific category Specific category Longtail category Longtail category Details, how-tos Details, how-tos Specificity Gradient Specificity Gradient Specificity Gradient Specificity Gradient

Start at the bottom Start at the bottom Start at
the bottom Start at the bottom Product Detail Product Detail Product Detail Product Detail

Thanks Thanks Good luck Good luck

Perfecting eCommerce Frontend

Perfecting eCommerce Frontend

Other Decks in Programming

Featured

Transcript