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

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

Ben Everard
May 30, 2013
Technology
1
34

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.

Ben Everard

May 30, 2013
Tweet

More Decks by Ben Everard

See All by Ben Everard
Shropgeek Rebellion: Web Performance Improvements In One Hour
beneverard
1
200
Points Brighton: Web Performance Improvements In One Hour
beneverard
1
680

Other Decks in Technology

See All in Technology
最近のSfM手法まとめ - COLMAP / GLOMAPを中心に -
kwchrk
8
1.7k
20241220_S3 tablesの使い方を検証してみた
handy
4
850
Alignment and Autonomy in Cybozu - 300人の開発組織でアラインメントと自律性を両立させるアジャイルな組織運営 / RSGT2025
ama_ch
1
770
Oracle Cloud Infrastructure：2024年12月度サービス・アップデート
oracle4engineer
PRO
1
500
【令和最新版】ロボットシミュレータ Genesis x ROS 2で始める快適AIロボット開発
hakuturu583
2
1.3k
DevFest 2024 Incheon / Songdo - Compose UI 조합 심화
wisemuji
0
240
型情報を用いたLintでコード品質を向上させる
sansantech
PRO
2
200
20241218_今年はSLI/SLOの導入を頑張ってました！
zepprix
0
250
ネットワーク可視化の世界
likr
7
5.6k
シフトライトなテスト活動を適切に行うことで、無理な開発をせず、過剰にテストせず、顧客をビックリさせないプロダクトを作り上げているお話 / Shift Right
nihonbuson
2
580
10年もののバグを退治した話
n_seki
0
140
mixi2 の技術スタックを探ってみる (アプリ編)
ichiki1023
0
100

Featured

See All Featured
Statistics for Hackers
jakevdp
796
220k
The Language of Interfaces
destraynor
155
24k
GraphQLとの向き合い方2022年版
quramy
44
13k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Facilitating Awesome Meetings
lara
50
6.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
A Modern Web Designer's Workflow
chriscoyier
693
190k
How GitHub (no longer) Works
holman
312
140k
Bash Introduction
62gerente
609
210k
GitHub's CSS Performance
jonrohan
1030
460k
Making the Leap to Tech Lead
cromwellryan
133
9k
Building an army of robots
kneath
302
44k

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?