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
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
390
Scala におけるコンパイラエラーとの付き合い方
chencmd
1
150
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cut0
1
240
iOSの隠されたAPIを解明し、開発効率を向上させる方法/iOSDC24
noppefoxwolf
2
120
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
550
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
370
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
daichi_igarashi
0
220
Uncharted packages (Laravel Live Denmark)
freekmurze
0
140
プログラマのための音楽入門
cheebow
4
540
どうしてこうなった?から理解するActive Recordの関連の裏側
willnet
5
510
暴走のウホーレン 〜想いってのはvimrcにしないと伝わらないんだぜ〜 / iosdc_japan_2024
uhooi
1
240
dotfiles について話したい #湘なんか
stefafafan
2
280
Featured
See All Featured
It's Worth the Effort
3n
182
27k
Practical Orchestrator
shlominoach
185
10k
Fantastic passwords and where to find them - at NoRuKo
philnash
47
2.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
KATA
mclloyd
27
13k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
88
15k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
A better future with KSS
kneath
235
17k
Statistics for Hackers
jakevdp
793
220k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
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