Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Faster Responsive Websites
Search
14islands
May 07, 2014
Programming
2
330
Faster Responsive Websites
Talk from the JavaScript meetup 7th of May in Reykjavík, Iceland
14islands
May 07, 2014
Tweet
Share
More Decks by 14islands
See All by 14islands
Construindo interfaces interativas com React
14islands
0
70
Sneaky Santa
14islands
0
47
Innovation & Prototyping
14islands
0
160
Google Santa Tracker: Present Bounce
14islands
0
230
Responsive Web Design Recap
14islands
8
1.3k
Lessons learned using WordPress as a CMS
14islands
2
950
The good, the bad and the ugly with responsive web design
14islands
4
1.9k
Performance as design: doing responsive responsibly
14islands
32
8k
Other Decks in Programming
See All in Programming
色々なIaCツールを実際に触って比較してみる
iriikeita
0
310
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
160
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
410
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.7k
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
140
Tuning GraphQL on Rails
pyama86
2
1.2k
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
530
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
140
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1.3k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
480
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
170
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
327
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Bash Introduction
62gerente
608
210k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Automating Front-end Workflow
addyosmani
1366
200k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
2k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Navigating Team Friction
lara
183
14k
What's in a price? How to price your products and services
michaelherold
243
12k
Faster Mobile Websites
deanohume
305
30k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
15
2k
Transcript
None
FASTER RESPONSIVE WEBSITES
This talk is not about How to build a rocket-ship
with Javascript
This talk is about Techniques to make our websites faster
THE PROBLEM
“75% of mobile users will leave the site if it
takes more than 5 seconds to load. http://www.digitalmall.us/1150/smartphone-users-frustrated-with-mobile-web-experience/
None
“Today the average website is 1.7MB httparchive.org/interesting.php
http://httparchive.org/interesting.php?a=All&l=Oct%201%202013&s=Top1000 AVG. SITE 0 1 2 <1mb 2011 1.5mb 2013
2mb 2015 AVG. SITE 0 1 2 AVG. SITE 0 1 2
None
None
“87% of mobile users expect sites to load at least
as fast, or faster than on their desktop. http://www.strangeloopnetworks.com/web-performance-infographics/
None
None
None
LET’S START WITH A PAGE BUDGET
None
Example: Less than 3 seconds to see something.
Example: Not bigger than 1MB.
Example: No more than 20 requests.
Now try to stick to it. (good luck!)
USING ONLINE TOOLS SUCH AS WEBPAGETEST.ORG
None
None
Coffee image
None
– Paul Lewis “The Speed Index is the average time
at which visible parts of the page are displayed. http://aerotwist.com/blog/my-performance-audit-workflow/
– Paul Lewis “Paul Irish has, in the past, recommended
a goal of less than 1,000. http://aerotwist.com/blog/my-performance-audit-workflow/
Filmstrip
OLD-SCHOOL IS STILL COOL PROGRESSIVE ENHANCEMENT
None
– Jake Archibald “All your users are non-JS while they're
downloading your JS. https://twitter.com/jaffathecake/status/207096228339658752
Twitter.com dropped initial page load to 1/5th by moving rendering
to server. https://blog.twitter.com/2012/improving-performance-twittercom
Airbnb experimented serving real HTML instead of JS and it
felt 5x quicker. http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product/
None
http://www.flickr.com/photos/not-so-much/2819702177/
TV FRIDGE CAR
MOBILE-LAST
Breakpoints are enhancements
MOBILE-FIRST
DELAY LOAD OF SECONDARY CONTENT
Core content Secondary Secondary
Core content Secondary Secondary
Core content Secondary Secondary
var deferred = $.get("/partial"); ! deferred.done(function (html) { $wrapper.html(html); });
Real life example: Press Jack - article nav / next
article
Lazy load images
None
https://github.com/ sakabako/scrollMonitor
var watcher = scrollMonitor.create(context, offset); ! watcher.enterViewport(loadImages);
<img data—lazy-src="http://path/to/image.jpg" />
<img src="http://path/to/image.jpg" />
OPTIMISING RESPONSIVE IMAGES
Biggest performance hit 69% of mobile web traffic
Serve images in the correct sizes. Please.
CSS background images
.thing { background-image: url('images/small.png'); } ! @media (min-width: 30em) {
.thing { background-image: url('images/medium.png'); } }
Note: Not for content images
Proposed <picture> spec
<picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg
1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture>
http://ericportis.com/posts/2014/srcset-sizes/
<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em)
33.3vw, 100vw" /> Available images and their width Breakpoints in CSS and image width relative to the viewport
http://responsiveimages.org
None
https://github.com/ scottjehl/picturefill Version 2.0
front-end & back-end Javascript
<img data-src="http://path/to/image.jpg" />
var imageWidth = image.offsetWidth * window.devicePixelRatio; ! var src =
“http://hej.se/image.jpg?w=“ + imageWidth; ! image.setAttribute("src", src);
Check browser for size and capabilities
Check browser for size and capabilities Request CDN
Do we have this image? Check browser for size and
capabilities Request CDN
Return the image Do we have this image? Check browser
for size and capabilities Request CDN
Prepare the image Return the image Do we have this
image? Check browser for size and capabilities Request CDN
Prepare the image Return the image Return the image Do
we have this image? Check browser for size and capabilities Request CDN
None
THE AWESOMENESS OF SCALE VECTOR GRAPHICS
None
SVG 4KB uncompressed PNG 10KB uncompressed
And it’s only markup text
Summary ! ! ! ! !
Summary Be aware. Set a "budget". ! ! !
Summary Be aware. Set a "budget". Progressive Enhancement is still
cool. ! ! ! !
Summary Be aware. Set a "budget". Progressive Enhancement is still
cool. Prioritise loading of content with JS. ! ! ! !
Summary Be aware. Set a "budget". Progressive Enhancement is still
cool. Prioritise loading of content with JS. Images are the biggest hit. ! ! !
Summary Be aware. Set a "budget". Progressive Enhancement is still
cool Prioritise loading of content with JS. Images are the biggest hit. SVGs are awesome. ! !
Summary Be aware. Set a "budget". Progressive Enhancement is still
cool Prioritise loading of content with JS. Images are the biggest hit. SVGs are awesome. ! !
Think and prioritise performance from day one.
“Measure. Treat performance as a core part of your site’s
quality and don’t ship without understanding and accepting it’s performance. http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/
There are techniques
We need to care more
None
Takk ! ! http://twitter.com/14islands ! http://facebook.com/14islands