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
43
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
820

Other Decks in Technology

See All in Technology
Amazon Redshift zero-ETL 統合を活用した軽量なマルチプロダクトデータ可視化基盤 / Lightweight Multi-Product Data Visualization with Amazon Redshift Zero-ETL
Avatar for 株式会社カミナシ kaminashi
0
120
作る力から、見極める力へ — AI時代に広がるエンジニアの価値と役割
Avatar for rince rince
0
370
なぜ人は自分のプロジェクトを 「なんちゃってアジャイル」と 自嘲するのか
Avatar for Kozo Taira kozotaira
0
170
從觀望到全公司落地：AI Agentic Coding 導入實戰 — 流程整合與安全治理
Avatar for Bo-Yi Wu appleboy
0
170
組織における AI-DLC 実践
Avatar for ASKUL Engineer askul
0
180
Fabricをフル活用する AI Agent Hub -製造業特化AIエージェントの設計
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
160
AWS PrivateLink × SCIM で実現する セキュアで運⽤負荷の低い Databricks 基盤の構築
Avatar for tsudash0 tsuda7
0
110
Agile and AI Redmine Japan 2026
Avatar for Kenji Hiranabe hiranabe
4
510
感情と身体を置き去りにしない、エンジニアの生きのこり方 ──いまから、ここから「自分の状態」を扱うという選択
Avatar for saori murooka saorimurooka
0
400
Hatena Engineer Seminar 37 jj1uzh
Avatar for jj1uzh jj1uzh
0
220
初めてのDatabricks勉強会
Avatar for Takaaki Yayoi taka_aki
2
200
小さいから、全部わかる。— 常駐AI "xangi" のすすめ
Avatar for suguuuuuすぐー sugupoko
0
160

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.6k
Docker and Python
Avatar for Tania Allard trallard
47
3.9k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
870
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
It's Worth the Effort
Avatar for 3n 3n
188
29k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
210
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.8k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k

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?