Web optimisation in the age of mobile

Stelian Firez
Stelian FirezDesigner, front-end developer,
Web optimisation in the
age of mobile
@stelian
* designer
* front-end dev
* web optimisator?
http://stelian.firez.be
"A site may look
<mobile optimised>, but
it’s not if it takes 14
seconds to download."
— Jason Grigsby
How big is mobile?
Mobile vs. Desktop 2013
0
25
50
75
100
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
Desktop
Mobile
— Google
What do people expect?
85%expect sites to load
at least as fast on their
mobile device as they
do on their home
computer
— IBM Tealeaf
How much does it cost to
not optimize for web performance?
Web optimisation in the age of mobile
+500ms -1.2% revenue
icons by Rohan Gupta and Pham Thi Dieu Linh
+500ms -3% traffic
icons by Rohan Gupta and Maria Maldonado
+100ms -1% sales
icons by Rohan Gupta and Zach VanDeHey
Improving the boot time on the Macintosh
would save lives.
Gmail users see about
61 years
of loading bar
every day
— Google(2012)
80-90%
of the end-user response time
is spent on the
front-end
— Steve Souders
Low effort
techniques
http://www.reddit.com/r/funny/comments/18gbep/queue_thai_level/
Thou shalt not redirect!
* m.yourwebsite.com
* Google search results penalty
Web optimisation in the age of mobile
Enable GZip compression
* on compressible formats
* htaccess HTML5 Boilerplate
* gzip locally if server compression unavailable
- use Zopfli(Google)
Minify CSS and JS and SVG
Cache aggressively
* htaccess HTML5 Boilerplate
Optimise images
* imageoptim
Medium effort
techniques
https://youtu.be/Oql972Jht5k
Choose the
right image format
Images
HTML
Other
Flash
Stylesheets
Scripts
65%
The guts of the web
JPEG
* photos, a lot of pixels
* 80-90% quality is sufficient*
WebP
* young format
* partial support
PNG-24
* high-quality needed
* alpha transparency
PNG-8
* low number of pixels
* limit number of colours
SVG
* fallback required for older browsers
Optimise images further
* jpegmini, imagealpha
original (PNG24)
2138 × 2138
179 KB
original
2138 × 2138
179 KB
resized
500 × 500
41 KB
original
2138 × 2138
179 KB
resized + imageoptim
500 × 500
28 KB
original
2138 × 2138
179 KB
resized + imagealpha + imageoptim (PNG8)
500 × 500
14 KB
original
2138 × 2138
179 KB
SVG
∞
29 KB
original
2138 × 2138
179 KB
SVG + SVGO
∞
16 KB
original
2138 × 2138
179 KB
SVG + SVGO + Gzip
∞
7 KB
+160KB +12% bounce rate
Use image sprites
* spritesmith
SVG stacks
* experimental
Icon fonts
* fontcustom, icomoon, fontastic
"Every HTTP request is a
gamble. A chance to fail."
— Scott Jehl
6-8* connections
per hostname
http://cacm.acm.org/magazines/2012/12/157870-spdying-up-the-web/abstract
Use CDN
High effort
techniques
http://www.break.com/pictures/this-bartender-deserves-the-biggest-tip-ever-2015783
Web optimisation in the age of mobile
Responsive images
* <picture>…
* Picturefill
Prioritise visible content
Now
Later
http://drbl.in/ljct
Web optimisation in the age of mobile
Optimise CSS delivery
* small, critical inline CSS
* 1 external CSS loaded with JS
Prevent render-blocking JS
* small, critical inline JS
* use async for external JS
https://docs.google.com/presentation/d/1CeZtuz2Tn3EdxYtTRzPGCXMOs3flk__YuLr4g0SnsGw/edit?
pli=1#slide=id.g179ab8815_0182
dribbble.com
Filmstrip view
— webpagetest.org
Performance
perception
Instgram
https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
Instgram
https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
iPhone
The iPhone saves a screenshot of every app when it
closes. So when you relaunch the app it loads that
screenshot first.
Amazon
Early example of priority loading
Facebook
Facebook is slow iPhone is slow
http://mercury.io/the-psychology-of-waiting-loading-animations-and-facebook
Testing tools
* pagespeed
* webpagetest.org
More stuff to read
• A report on the Mobile Customer Experience(PDF)
• How Loading Time Affects Your Bottom Line
• Facebook pages that are 500ms slower result in a 3% drop-off in traffic (PDF)
• If Google increased page load by 500ms it would cost them 1.2% of their revenue
• Every 100ms of latency costs Amazon 1% of profit
• For Etsy, adding 160KB of images to a page increased bounce rate by 12% on mobile devices
• Steve Jobs: Improving the boot time on the Macintosh would save lives.
• Users spend a combined total of 61 years every single day watching the Gmail loading bar
• The Performance Golden Rule
• Google Warns Smartphone Searchers About Homepage Redirects
• GZIP is not enough!(video)
• What the web is made of(and many more stats)
• Clever JPEG Optimization Techniques
• Clever PNG Optimization Techniques
• Facebook tries Google's WebP image format; users squawk
• Animated WebP - how to convert animated GIF to WebP and save up to 90% bandwidth
• SVG Stacks
• Evaluating the Performance of SPDY-enabled Web Servers
• Better Responsive Images With the picture Element
• How to prioritize visible content
• Tailoring CSS for performance
Tools
• HTML5 Boilerplate
• Zopfli
• SVGO
• grunt-svgmin
• ImageOptim
• ImageAlpha
• JPEGmini
• Compressor.io
• Spritesmith
• Font Custom
• IcoMoon
• Fontastic
• Picturefill
• Control.js
• yepnope
1 of 68

Recommended

Forum Neue Medien Austria by
Forum Neue Medien AustriaForum Neue Medien Austria
Forum Neue Medien AustriaMartin Ebner
882 views32 slides
Blogging in Higher Education by
Blogging in Higher EducationBlogging in Higher Education
Blogging in Higher EducationMartin Ebner
814 views22 slides
Mobile Age by
Mobile AgeMobile Age
Mobile Agepriyanka arora
1.2K views37 slides
Learning in the Mobile Age by
Learning in the Mobile AgeLearning in the Mobile Age
Learning in the Mobile AgeMartin Ebner
1.9K views56 slides
PDJ in the mobile age by
PDJ in the mobile agePDJ in the mobile age
PDJ in the mobile ageAntonio Pagani
673 views45 slides
A little journey into website optimization by
A little journey into website optimizationA little journey into website optimization
A little journey into website optimizationStelian Firez
3.8K views83 slides

More Related Content

Featured

ChatGPT and the Future of Work - Clark Boyd by
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
24.3K views69 slides
Getting into the tech field. what next by
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
5.7K views22 slides
Google's Just Not That Into You: Understanding Core Updates & Search Intent by
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
6.4K views99 slides
How to have difficult conversations by
How to have difficult conversations How to have difficult conversations
How to have difficult conversations Rajiv Jayarajah, MAppComm, ACC
5K views19 slides
Introduction to Data Science by
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data ScienceChristy Abraham Joy
82.3K views51 slides
Time Management & Productivity - Best Practices by
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
169.7K views42 slides

Featured(20)

ChatGPT and the Future of Work - Clark Boyd by Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd24.3K views
Getting into the tech field. what next by Tessa Mero
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero5.7K views
Google's Just Not That Into You: Understanding Core Updates & Search Intent by Lily Ray
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray6.4K views
Time Management & Productivity - Best Practices by Vit Horky
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
Vit Horky169.7K views
The six step guide to practical project management by MindGenius
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
MindGenius36.6K views
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright... by RachelPearson36
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson3612.7K views
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present... by Applitools
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools55.5K views
12 Ways to Increase Your Influence at Work by GetSmarter
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter401.7K views
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G... by DevGAMM Conference
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
DevGAMM Conference3.6K views
Barbie - Brand Strategy Presentation by Erica Santiago
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
Erica Santiago25.1K views
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well by Saba Software
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Saba Software25.2K views
Introduction to C Programming Language by Simplilearn
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
Simplilearn8.4K views
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr... by Palo Alto Software
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
Palo Alto Software88.4K views
9 Tips for a Work-free Vacation by Weekdone.com
9 Tips for a Work-free Vacation9 Tips for a Work-free Vacation
9 Tips for a Work-free Vacation
Weekdone.com7.2K views
How to Map Your Future by SlideShop.com
How to Map Your FutureHow to Map Your Future
How to Map Your Future
SlideShop.com275.1K views

Web optimisation in the age of mobile