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

Shropgeek Rebellion: Web Performance Improvemen...

Ben Everard
November 21, 2013
Technology
1
190

Shropgeek Rebellion: Web Performance Improvements In One Hour

My slides for my talk at the fantastic Shropgeek Rebellion (November 12st, 2013), all about performance improvements you can make in one hour.

Ben Everard

November 21, 2013
Tweet

More Decks by Ben Everard

See All by Ben Everard
Dev.Ocean #3: Web Performance Improvements In One Hour
beneverard
1
33
Points Brighton: Web Performance Improvements In One Hour
beneverard
1
670

Other Decks in Technology

See All in Technology
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
1
100
スクラムチームを立ち上げる〜チーム開発で得られたもの・得られなかったもの〜
ohnoeight
2
350
DMARC 対応の話 - MIXI CTO オフィスアワー #04
bbqallstars
1
160
iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴
fumiyasac0921
1
110
スクラム成熟度セルフチェックツールを作って得た学びとその活用法
coincheck_recruit
1
140
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
750
Application Development WG Intro at AppDeveloperCon
salaboy
0
180
The Rise of LLMOps
asei
6
1.3k
TypeScriptの次なる大進化なるか！？　条件型を返り値とする関数の型推論
uhyo
2
1.6k
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
dev 補講: プロダクトセキュリティ / Product security overview
wa6sn
1
2.3k
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
410

Featured

See All Featured
The Cult of Friendly URLs
andyhume
78
6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
For a Future-Friendly Web
brad_frost
175
9.4k
Building Applications with DynamoDB
mza
90
6.1k
Designing the Hi-DPI Web
ddemaree
280
34k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Facilitating Awesome Meetings
lara
50
6.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Fireside Chat
paigeccino
34
3k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Code Reviewing Like a Champion
maltzj
520
39k

Transcript

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

    hour §

  2. T H E I D E A B U R

    E A U

  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

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

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

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

    • 30 seconds before anything is visible

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

    • Entire site loaded in 7.2 minutes • 30 seconds before anything is visible

  13. 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

  14. Measuring...

  15. Your toolbox... Yahoo! YSlow

  16. WebPagetest

  17. None

  18. Slowy App

  19. 5 things...

  20. 1) Reduce requests

  21. None

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

  23. TCP Segmentation !

  24. 2) Reduce page weight

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

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

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

  29. Image optimisation

  30. Image optimisation • Serve appropriate image sizes

  31. Image optimisation • Serve appropriate image sizes • Compress images

  32. Image optimisation • Serve appropriate image sizes • Compress images

    • Use progressive JPEGs

  33. Image optimisation • Serve appropriate image sizes • Compress images

    • Use progressive JPEGs • Tools such as CodeKit, ImageOptim

  34. Minify assets

  35. Minify assets • Compress CSS + JavaScript

  36. Minify assets • Compress CSS + JavaScript • Tools such

    as CodeKit, Mixture

  37. GZIP compession

  38. GZIP compession • jQuery from 90kb to 30kb

  39. GZIP compession • jQuery from 90kb to 30kb • Code

    in talk notes

  40. 3) Caching

  41. Caching

  42. Caching • Be explicit

  43. Caching • Be explicit • Allow the browser to keep

    files

  44. Caching • Be explicit • Allow the browser to keep

    files • Use cache busting to renew cached files

  45. Caching • Be explicit • Allow the browser to keep

    files • Use cache busting to renew cached files • Code in talk notes

  46. Cache busting!

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

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

  49. 4) Loading assets

  50. Loading assets

  51. Loading assets CSS at the top Within the <head> element

  52. Loading assets CSS at the top Within the <head> element

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

  53. http://davidwalsh.name/html5-async "

  54. 5) Use a CDN

  55. maxcdn.com

  56. What have we learnt? 1) Reduce requests 2) Reduce page

    weight 3) Be explicit with caching 4) Loading assets 5) Use a CDN

  57. What next?

  58. What next? Designer? Perceived performance

  59. What next? Designer? Perceived performance Front-end developer? CSS + JavaScript

    efficiency

  60. What next? Designer? Perceived performance Front-end developer? CSS + JavaScript

    efficiency Back-end developer? Varnish

  61. Cheers! Ben Everard _beneverard beneverard.co.uk [email protected] ✉ " "

  62. Questions?