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

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

Avatar for Ben Everard Ben Everard
May 30, 2013
Technology
1
37

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
Tweet

More Decks by Ben Everard

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

Other Decks in Technology

See All in Technology
(非公式) AWS Summit Japan と 海浜幕張 の歩き方 2025年版
Avatar for Kosuke ENOMOTO coosuke
PRO
1
320
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
Avatar for Shun Yoshie syoshie
2
620
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
Avatar for Yuya Takeyama yuyatakeyama
2
460
AIエージェント最前線！ Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
Avatar for みのるん minorun365
PRO
7
1.1k
Amazon Bedrockで実現する 新たな学習体験
Avatar for Kazuki Maeda kzkmaeda
1
220
Create a Rails8 responsive app with Gemini and RubyLLM
Avatar for Riccardo Carlesso palladius
0
130
ローカルLLMでファインチューニング
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
0
110
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
Avatar for iselegant iselegant
13
3.7k
Agentic Workflowという選択肢を考える
Avatar for takuya kikuchi tkikuchi1002
1
210
Prox Industries株式会社 会社紹介資料
Avatar for Prox proxindustries
0
100
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
Avatar for Toru Makabe torumakabe
1
180
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
140

Featured

See All Featured
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
42
7.5k
Navigating Team Friction
Avatar for Lara Hogan lara
187
15k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.7k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
31
1k
Designing for Performance
Avatar for Lara Hogan lara
609
69k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.2k
It's Worth the Effort
Avatar for 3n 3n
184
28k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
60k

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?