Presentation on theme: "High Performance Web Sites Essential Knowledge for Frontend Engineers"— Presentation transcript:
1High Performance Web Sites Essential Knowledge for Frontend Engineers Photo courtesy of Amnemona:Can find these slides on my web site.Steve SoudersDisclaimer: This content does not necessarily reflect the opinions of my employer.
2The Importance of Frontend Performance 9%91%17%83%iGoogle, primed cacheiGoogle, empty cache
3Time Spent on the Frontend Empty CachePrimed Cache97%95%81%47%25%search.live.com/results67%0%98%94%en.wikipedia.org/wiki91%96%Ten top sites according to Alexa.com. Craigslist is actually #10, but it has no JS or CSS, so I use #11 AOL.Tested on IE6 on Comcast cable modem (~5 mbps) medium powered PC, April 2008.For Google and Live Search there are so few components (2-4) and they're mostly cacheable so the HTML document is a bigger percentage.
4The Performance Golden Rule 80-90% of the end-user response time isspent on the frontend. Start there.greater potential for improvementsimplerIf you could cut performance in half, FE changes would be 40-45%, while BE would be only 5-10%.BE changes are typically more complex: rearchitecture, optimize code, add/modify hw, distribute databases, etc.FE is simpler: change web server config, place scripts and stylesheets differently in the page, combine requests, etc.I’ve worked with dev teams to cut response times on 50 properties, often by 25% or more. And feedback from other companies is similar.background photo courtesy of Technicolor:proven to work
514 Rules Make fewer HTTP requests Use a CDN Add an Expires header Gzip componentsPut stylesheets at the topPut scripts at the bottomAvoid CSS expressionsMake JS and CSS externalReduce DNS lookupsMinify JSAvoid redirectsRemove duplicate scriptsConfigure ETagsMake AJAX cacheablephoto courtesy of Vicki & Chuck Rogers:
9CSS Sprites size of combined image is less <span style=" background-image: url('sprites.gif');background-position: -260px -90px;"></span>Size of combined image actually decreases due to reduced image overhead (color tables, formatting info, etc.).size of combined image is less
10Rule 3: Add an Expires header not just for imagesImagesStylesheetsScripts% with ExpiresMedian Ageamazon.com0/620/10/30%114 daysaol.com23/431/16/1848%217 dayscnn.com0/1380/22/111%227 daysebay.com16/200/755%140 daysgoogle.com/ig8/142/365%8 daysmsn.com32/353/980%34 daysmyspace.com0/181 daywikipedia.org6/875%yahoo.com23/234/4100%n/ayoutube.com0/3226 daysOne thought: you can't put an Expires header because the content is constantly changing.But when we look at the Last-Modified header we see that's not the case. For MySpace it is, but Amazon, CNN, Froogle and YouTube all have lengthier Last_modified values.
11Rule 5: Put stylesheets at the top stylesheets block rendering in IEsolution: put stylesheets in HEAD (per spec)avoids Flash of Unstyled Contentuse LINKUnfortunately, this is bad for FF because in FF stylesheets block parallel downloads.
12Rule 6: Move scripts to the bottom scripts block parallel downloads across all hostnamesscripts block rendering of everything below them in the pagemove scripts as low in the page as possible
13Even Faster Web Sites Split the initial payload Load scripts without blockingDon't scatter scriptsSplit dominant content domainsMake static content cookie-freeReduce cookie weightMinify CSSOptimize imagesUse iframes sparinglyTo www or not to www
15Live Analysisfor a complex page it's great this gets an A-notice the .js isn't downloaded in parallel with the .cssnotice the parallel script downloads
16Takeaways focus on the frontend run YSlow:Velocity:speed mattersyou CAN make your site even faster!Even if you're site seems fast to you (at work), there are always people on slower connections and people outside the US for whom it's not so fast.Even if you're #1 in your market, there's always a startup coming up that may be faster.
17Steve Souders firstname.lastname@example.org http://stevesouders.com/ "thank you" by nj dodge:Steve Souders