Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dev.Ocean #3: Web Performance Improvements In O...

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Ben Everard Ben Everard
May 30, 2013
Technology
42
1

Dev.Ocean #3: Web Performance Improvements In One Hour

My second speaking gig at Dev.Ocean #3. A slight evolution of my Points Brighton talk.

Avatar for Ben Everard

Ben Everard

May 30, 2013

More Decks by Ben Everard

See All by Ben Everard
Shropgeek Rebellion: Web Performance Improvements In One Hour
Avatar for Ben Everard beneverard
1
240
Points Brighton: Web Performance Improvements In One Hour
Avatar for Ben Everard beneverard
1
810

Other Decks in Technology

See All in Technology
MIERUNE JCT 発表資料「宇宙から伊能忠敬ごっこ」
Avatar for じゃらしまる syuchimu
0
190
Diagnosing performance problems without the guesswork
Avatar for Elena Tanasoiu elenatanasoiu
0
170
AIにフローを作らせようとして挫折した話
Avatar for 濱津 太一｜ユースフル hamatsutaichi
0
210
SIer20年！ 培ったスキルがスタートアップで輝く時
Avatar for しゅういちろ shucho0103
0
480
Oracle AI Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.9k
データ基盤をDataformで整えた話 〜 開発環境を添えて 〜
Avatar for Takanobu Nozawa takapy
0
120
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.8k
ブロックチェーン / Blockchain
Avatar for Kenji Saito ks91
PRO
0
110
Platform engineering for developers, architects & the rest of us (AI agents)
Avatar for danielbryantuk danielbryantuk
0
190
個人の発見を、組織の知恵に 〜生成AI活用を"探索"から"組織の仕組み"へ〜
Avatar for KintoTech_Dev kintotechdev
2
1k
速さだけじゃない！ VoidZero ツールが移行先に選ばれる理由
Avatar for mizdra mizdra
PRO
6
760
サプライチェーンセキュリティの空白地帯 - 信頼できる”依存性”の未来を考える
Avatar for Hiroki Suezawa (@rung) rung
PRO
2
740

Featured

See All Featured
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
400
Fireside Chat
Avatar for paigeccino paigeccino
42
3.9k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.8k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
Visualization
Avatar for Eitan Lees eitanlees
152
17k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
390
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
380
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.4k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
780

Transcript

  1. Ben Everard Web performance improvements you can make in one

    hour §

  2. J’adore le web

  3. Pre-talk shout-outs... Andy Davies http://andydavies.me Steve Souders http://www.stevesouders.com/

  4. Why is performance so important?

  5. “If an e-commerce site is making $100,000 per day, a

    1 second page delay could potentially cost $2.5 million in lost sales every year.” http://blog.kissmetrics.com/loading-time/?wide=1

  6. “Amazon found that it increased revenue by 1% for every

    100 milliseconds of improvement” http://sites.google.com/site/glinden/Home/StanfordDataMining.2006-11-28.ppt

  7. A real example...

  8. Mobile Visit Exmoor site http://m.visit-exmoor.co.uk At Exmoor speeds... Weighs 2MB

    • Destroyed my phone battery • Entire site loaded in 7.2 minutes • 30 seconds before anything is visible

  9. Measuring...

  10. Your toolbox... Google Page Speed Yahoo! YSlow Others... Chrome Dev

    Tools Firebug WebPagetest Slowy App et al...

  11. Lets get started...

  12. 1) Reduce requests

  13. None

  14. http://www.websiteoptimization.com/secrets/metrics/10-21-http-request.html

  15. TCP Segmentation

  16. 2) Reduce page weight

  17. 75% of page weight in these two images Mobile Visit

    Exmoor site http://m.visit-exmoor.co.uk

  18. Image optimisation

  19. Minify assets

  20. GZIP compression

  21. <ifmodule mod_deflate.c> ! AddOutputFilterByType DEFLATE ! ! text/text ! !

    text/html ! ! text/plain ! ! text/xml ! ! text/css ! ! application/x-javascript ! ! application/javascript </ifmodule> http://git.io/XTDjng
  22. None

  23. 3) Caching

  24. <IfModule mod_expires.c> ! ExpiresActive On ! ExpiresByType text/css "access plus

    1 year" ! ExpiresByType application/javascript "access plus 1 year" ! ExpiresByType text/javascript "access plus 1 year" ! ExpiresByType text/html "access plus 1 hour" ! ExpiresByType text/richtext "access plus 1 hour" ! ExpiresByType text/plain "access plus 1 hour" ! ExpiresByType text/xml "access plus 1 hour" ! ExpiresByType image/gif "access plus 1 year" ! ExpiresByType image/jpeg "access plus 1 year" ! ExpiresByType image/png "access plus 1 year" ! ExpiresByType image/x-icon "access plus 1 year" </IfModule> http://git.io/XTDjng

  25. Cache busting!

  26. http://domain.com/screen.css?v=2

  27. 4) Loading assets

  28. CSS at the top Within the <head> element

  29. JavaScript at the bottom Just before closing </body> tag

  30. http://davidwalsh.name/html5-async

  31. 5) Use a CDN

  32. maxcdn.com

  33. 1) Reduce requests 2) Reduce page weight 3) Be explicit

    with caching 4) Loading assets 5) Use a CDN What have we learnt?

  34. 1) Find and fix issues on your own site 2)

    Tell your friends 3) Drink beer What next?

  35. Cheers! Ben Everard ilmv beneverard.co.uk [email protected] ✉ 

  36. Questions?