Nobody Wants a Slow Website

Sang-Min Yoon
Sang-Min YoonWeb Designer & Front-End Developer at 10up
Nobody Wants 

a Slow Website


September 12, 2015
Sang-Min Yoon
Front End Engineer
Nobody likes 

anything that is Slow
Credit: http://www.inklingsnews.com/c/2010/03/30/dmv-delaying-my-voyage-bureaucracy-in-the-department-of-motor-vehicles-2/
Credit: http://www.dawgshed.com/threads/you-need-to-stop-by-the-dmv-get-in-line-with-the-millions-of-illegals.137874/
Credit: http://www.etagsdirect.com/blog/goodbye-florida-dmvs-hello-tax-collector/
Credit: http://www.elkharttruth.com/news/michigan/2015/07/25/DMV-ends-remote-check-in-but-is-it-to-blame-for-long-waits.html
Nobody Wants a Slow Website
Credit: http://www.northernvatimes.com/gainesville/news/i-95-express-lanes-open &

https://www.washingtonpost.com/local/trafficandcommuting/virginias-hot-lanes-could-be-the-future-of-us-transportation/2015/01/20/
feaccfc2-973f-11e4-927a-4fa2638cd1b0_story.html
Nobody Wants a Slow Website
Nobody Wants a Slow Website
Same for Websites
Nobody wants to visit 

a slow website
“1 in 4 visitors will abandon a
website if it takes longer than 4
seconds to load.”
Source: http://loadstorm.com/2014/04/infographic-web-performance-impacts-conversion-rates/
“1 second delay in page load time
could cost Amazon $1.6 billion in
annual sales”
Source: http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
“Obama’s 2011 fundraising campaign raised an
additional $34 million when the Obama for
America website shrunk page load time from 

5 seconds to 2 seconds”
Source: http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
We know all this but…
Nobody Wants a Slow Website
The average webpage is over 2mb
Source: http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
Source: http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
Source: https://css-tricks.com/new-poll-on-performance-culture/
Performance is especially
important because….
Credit: www.flickr.com/photos/lukew
About 75% of mobile users consider

mobile slower than desktop
About 40% of mobile users are unhappy 

with their experience
Source: https://content.akamai.com/PG1526-PerformanceMatters.html
About 20% of Americans depend on
smartphones almost exclusively for internet
access…
and out of those, 30% frequently reach
their Max Monthly Data Allowance
My Experiences…
Nobody Wants a Slow Website
Nobody Wants a Slow Website
Nobody Wants a Slow Website
Measuring Performance
WebPageTest
http://www.webpagetest.org/
WebPageTest
http://www.webpagetest.org/
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/
Chrome DevTools
Minimize Requests 

Optimize Requests 

Reduce Size
Minimize Request
Provide only the goods 

that the users need
“The fastest HTTP request is the one not made.”
-Steve Sounders
Nobody Wants a Slow Website
Concatenate
Combine Files
Video Concatenate
JavaScript
Video Concatenate
CSS… Just use a preprocessor (Sass)
Use code instead of graphics/images
Use Icon Fonts or SVGs
Optimize Requests
Caching
Some hosting companies
automatically does this for you
W3 Total Cache
https://wordpress.org/plugins/w3-total-cache/
WP Super Cache
https://wordpress.org/plugins/wp-super-cache/
Gzip
Turn on HTTP Compression
Check GZIP Compression
http://checkgzipcompression.com/
Manually via .htaccess
Source: https://css-tricks.com/snippets/htaccess/active-gzip-compression/
W3 Total Cache
WP Super Cache
Some hosting companies
automatically does this for you
Reduce Size
Minify
Video Concatenate
Minifying CSS
Video Concatenate
Minifying JavaScript
WordPress Plugins
• Better WordPress Minify

https://wordpress.org/plugins/bwp-minify/
• MinQueue

https://wordpress.org/plugins/minqueue/
Images
Source: http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
Average webpage is little over 2mb
and 60% is because of Images
Source: http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
Nobody Wants a Slow Website
Resize

Optimize 

Responsive Images
Resize Images
• Do not upload raw images on the web
• Find the max width of the content area and use
that width to resize your images
• Resize them in bulk
Nobody Wants a Slow Website
Optimize (losslessly) Images
• Apps
• GruntTasks
• WordPress Plugins
ImageOptim
175 KB
145 KB
contrib-imagemin Grunt task
https://github.com/gruntjs/grunt-contrib-imagemin
Nobody Wants a Slow Website
WordPress Plugins
• Kraken Image Optimizer

https://wordpress.org/plugins/kraken-image-
optimizer/
• EWWW Image Optimizer

https://wordpress.org/plugins/ewww-image-
optimizer/
Responsive Images
RICG Responsive Images
https://wordpress.org/plugins/ricg-responsive-images/
Nobody Wants a Slow Website
Nobody Wants a Slow Website
Recap
• Measure Performance
• Minimize request (less request, concatenate, and use CSS/
svg/icon fonts instead of graphics)
• Optimize request (cache and Gzip)
• Reduce size (minify and resize/optimize images)
• Automate (use tools like Grunt)
There are more…
Other techniques that I’m currently looking into:
• Critical CSS
• Improving render times (like animation and fonts)
• Prefetching, Preloading and Prebrowsing
Non-Technical Challenges
Source: https://css-tricks.com/new-poll-on-performance-culture/
Non-Technical Challenges
• Hard to measure (what is considered fast for a project?)
• Having a fast website is a given (never on a RFP or SOW)
• Getting buy-ins from client
• Dealing with “pretty” designs
• “Surprises” during development
Recommendations
• Include Performance during discovery 

(competitive analysis)
• Performance budget 

(want something new? kill something else)
• Styleguide driven development
• Keep talking about it
Thank You
Email: info@SangMinYoon.com
Twitter: @SMY315
1 of 85

Recommended

EdgeConf - Page Load Performance Opening Talk by
EdgeConf - Page Load Performance Opening TalkEdgeConf - Page Load Performance Opening Talk
EdgeConf - Page Load Performance Opening TalkAndy Davies
4.1K views21 slides
Web Performance - A Whistlestop Tour by
Web Performance - A Whistlestop TourWeb Performance - A Whistlestop Tour
Web Performance - A Whistlestop TourAndy Davies
3.7K views19 slides
RESS: An Evolution of Responsive Web Design by
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignDave Olsen
25.3K views73 slides
Speed is Essential for a Great Web Experience by
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceAndy Davies
21.1K views143 slides
Introduction to Responsive Web Design by
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignClarissa Peterson
23.5K views152 slides
Introduction to Responsive Web Design by
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignMelanie Burger
437 views14 slides

More Related Content

What's hot

That's crazy! how to build single page web apps by
That's crazy! how to build single page web appsThat's crazy! how to build single page web apps
That's crazy! how to build single page web appsChris Love
581 views14 slides
Responsive Design Tools & Resources by
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & ResourcesClarissa Peterson
4.1K views177 slides
10 things to make you a Great Mobile Web Developer by
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web DeveloperChris Love
738 views33 slides
Introduction to Responsive Design v.2 by
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Clarissa Peterson
2.5K views178 slides
Custom WordPress Content Options by
Custom WordPress Content OptionsCustom WordPress Content Options
Custom WordPress Content OptionsDee Teal
1K views11 slides
Make mobile web apps rock by
Make mobile web apps rockMake mobile web apps rock
Make mobile web apps rockChris Love
1.4K views43 slides

What's hot(20)

That's crazy! how to build single page web apps by Chris Love
That's crazy! how to build single page web appsThat's crazy! how to build single page web apps
That's crazy! how to build single page web apps
Chris Love581 views
10 things to make you a Great Mobile Web Developer by Chris Love
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer
Chris Love738 views
Introduction to Responsive Design v.2 by Clarissa Peterson
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Clarissa Peterson2.5K views
Custom WordPress Content Options by Dee Teal
Custom WordPress Content OptionsCustom WordPress Content Options
Custom WordPress Content Options
Dee Teal1K views
Make mobile web apps rock by Chris Love
Make mobile web apps rockMake mobile web apps rock
Make mobile web apps rock
Chris Love1.4K views
5 single page application principles developers need to know by Chris Love
5 single page application principles developers need to know5 single page application principles developers need to know
5 single page application principles developers need to know
Chris Love10.6K views
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks by WebVisions
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS FrameworksDon’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
Don’t get Bootslapped: How to Avoid Common Pitfalls with CSS Frameworks
WebVisions1K views
Html5 inputs by Chris Love
Html5 inputsHtml5 inputs
Html5 inputs
Chris Love910 views
Going where they are: Developing an IM reference service & Catalog Widgets in... by kramsey
Going where they are: Developing an IM reference service & Catalog Widgets in...Going where they are: Developing an IM reference service & Catalog Widgets in...
Going where they are: Developing an IM reference service & Catalog Widgets in...
kramsey497 views
How I learned to stop worrying and love UX metrics by Tammy Everts
How I learned to stop worrying and love UX metricsHow I learned to stop worrying and love UX metrics
How I learned to stop worrying and love UX metrics
Tammy Everts1.6K views
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise by Chris Love
Doing Modern Web, aka JavaScript and HTML5 in the EnterpriseDoing Modern Web, aka JavaScript and HTML5 in the Enterprise
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise
Chris Love2.4K views
Web Performance Optimierung - DWX13 by Walter Ebert
Web Performance Optimierung - DWX13Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Walter Ebert7.9K views
My Joomla Story - JoomlaDay The Netherlands 2013 by Sander Potjer
My Joomla Story - JoomlaDay The Netherlands 2013My Joomla Story - JoomlaDay The Netherlands 2013
My Joomla Story - JoomlaDay The Netherlands 2013
Sander Potjer868 views
Breaking out of the Tetris mind set #btconf by Christian Heilmann
Breaking out of the Tetris mind set #btconfBreaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconf
Christian Heilmann3.2K views
Mobile Web Performance - Velocity 2011 by Barbara Bermes
Mobile Web Performance - Velocity 2011Mobile Web Performance - Velocity 2011
Mobile Web Performance - Velocity 2011
Barbara Bermes675 views
Ember,js: Hipster Hamster Framework by Billy Shih
Ember,js: Hipster Hamster FrameworkEmber,js: Hipster Hamster Framework
Ember,js: Hipster Hamster Framework
Billy Shih1.8K views

Similar to Nobody Wants a Slow Website

Need for Speed: Website Edition – Website Optimization Tools and Techniques P... by
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...Devin Walker
1.4K views37 slides
Speed Up Wordpress, Wordpress Horsepower by
Speed Up Wordpress, Wordpress HorsepowerSpeed Up Wordpress, Wordpress Horsepower
Speed Up Wordpress, Wordpress HorsepowerRoss Johnson
2.1K views80 slides
Optimizing WordPress Performance by
Optimizing WordPress PerformanceOptimizing WordPress Performance
Optimizing WordPress PerformanceDouglas Yuen
2.1K views28 slides
Http/2 - What's it all about? by
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?Andy Davies
4.4K views57 slides
Optimizing web performance (Fronteers edition) by
Optimizing web performance (Fronteers edition)Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)Dave Olsen
7.4K views67 slides
Devfest Siberia Fast and Beautiful Images and Video by
Devfest Siberia Fast and Beautiful Images and VideoDevfest Siberia Fast and Beautiful Images and Video
Devfest Siberia Fast and Beautiful Images and VideoDoug Sillars
330 views125 slides

Similar to Nobody Wants a Slow Website(20)

Need for Speed: Website Edition – Website Optimization Tools and Techniques P... by Devin Walker
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Devin Walker1.4K views
Speed Up Wordpress, Wordpress Horsepower by Ross Johnson
Speed Up Wordpress, Wordpress HorsepowerSpeed Up Wordpress, Wordpress Horsepower
Speed Up Wordpress, Wordpress Horsepower
Ross Johnson2.1K views
Optimizing WordPress Performance by Douglas Yuen
Optimizing WordPress PerformanceOptimizing WordPress Performance
Optimizing WordPress Performance
Douglas Yuen2.1K views
Http/2 - What's it all about? by Andy Davies
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?
Andy Davies4.4K views
Optimizing web performance (Fronteers edition) by Dave Olsen
Optimizing web performance (Fronteers edition)Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)
Dave Olsen7.4K views
Devfest Siberia Fast and Beautiful Images and Video by Doug Sillars
Devfest Siberia Fast and Beautiful Images and VideoDevfest Siberia Fast and Beautiful Images and Video
Devfest Siberia Fast and Beautiful Images and Video
Doug Sillars330 views
Edi react fastandbeautiful by Doug Sillars
Edi react fastandbeautifulEdi react fastandbeautiful
Edi react fastandbeautiful
Doug Sillars215 views
Its timetostopstalling pentabar by Doug Sillars
Its timetostopstalling pentabarIts timetostopstalling pentabar
Its timetostopstalling pentabar
Doug Sillars66 views
Speed Matters! by Andy Davies
Speed Matters!Speed Matters!
Speed Matters!
Andy Davies1.8K views
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers by Distilled
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
Distilled6.7K views
The web is too slow by Andy Davies
The web is too slow The web is too slow
The web is too slow
Andy Davies15.2K views
2017 Silicon Valley Code Camp: Instant Mobile Web by Lisa Huang
2017 Silicon Valley Code Camp: Instant Mobile Web2017 Silicon Valley Code Camp: Instant Mobile Web
2017 Silicon Valley Code Camp: Instant Mobile Web
Lisa Huang90 views
Devoxx be fast and beautiful images by Doug Sillars
Devoxx be fast and beautiful imagesDevoxx be fast and beautiful images
Devoxx be fast and beautiful images
Doug Sillars367 views
Its time to stop stalling novi sad by Doug Sillars
Its time to stop stalling novi sadIts time to stop stalling novi sad
Its time to stop stalling novi sad
Doug Sillars41 views
Notts js fastandbeautiful by Doug Sillars
Notts js fastandbeautifulNotts js fastandbeautiful
Notts js fastandbeautiful
Doug Sillars67 views
Making WordPress Super Fast - Peter Mead - WordPress SEO Consultant by Peter Mead
Making WordPress Super Fast - Peter Mead - WordPress SEO ConsultantMaking WordPress Super Fast - Peter Mead - WordPress SEO Consultant
Making WordPress Super Fast - Peter Mead - WordPress SEO Consultant
Peter Mead362 views
Mobile era fastandbeautiful by Doug Sillars
Mobile era fastandbeautifulMobile era fastandbeautiful
Mobile era fastandbeautiful
Doug Sillars414 views
Life in the Fast Lane: Speed, Usability & Search Engine Optimization by Dana DiTomaso
Life in the Fast Lane: Speed, Usability & Search Engine OptimizationLife in the Fast Lane: Speed, Usability & Search Engine Optimization
Life in the Fast Lane: Speed, Usability & Search Engine Optimization
Dana DiTomaso3K views
Edi ux fastandbeautiful by Doug Sillars
Edi ux fastandbeautifulEdi ux fastandbeautiful
Edi ux fastandbeautiful
Doug Sillars270 views

Recently uploaded

GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...James Anderson
85 views32 slides
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveNetwork Automation Forum
31 views35 slides
Network Source of Truth and Infrastructure as Code revisited by
Network Source of Truth and Infrastructure as Code revisitedNetwork Source of Truth and Infrastructure as Code revisited
Network Source of Truth and Infrastructure as Code revisitedNetwork Automation Forum
26 views45 slides
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ... by
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...Jasper Oosterveld
18 views49 slides
SAP Automation Using Bar Code and FIORI.pdf by
SAP Automation Using Bar Code and FIORI.pdfSAP Automation Using Bar Code and FIORI.pdf
SAP Automation Using Bar Code and FIORI.pdfVirendra Rai, PMP
23 views38 slides
Data Integrity for Banking and Financial Services by
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial ServicesPrecisely
21 views26 slides

Recently uploaded(20)

GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by James Anderson
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
James Anderson85 views
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ... by Jasper Oosterveld
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
SAP Automation Using Bar Code and FIORI.pdf by Virendra Rai, PMP
SAP Automation Using Bar Code and FIORI.pdfSAP Automation Using Bar Code and FIORI.pdf
SAP Automation Using Bar Code and FIORI.pdf
Data Integrity for Banking and Financial Services by Precisely
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial Services
Precisely21 views
handbook for web 3 adoption.pdf by Liveplex
handbook for web 3 adoption.pdfhandbook for web 3 adoption.pdf
handbook for web 3 adoption.pdf
Liveplex22 views
The details of description: Techniques, tips, and tangents on alternative tex... by BookNet Canada
The details of description: Techniques, tips, and tangents on alternative tex...The details of description: Techniques, tips, and tangents on alternative tex...
The details of description: Techniques, tips, and tangents on alternative tex...
BookNet Canada127 views
Igniting Next Level Productivity with AI-Infused Data Integration Workflows by Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software263 views
Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10248 views
Piloting & Scaling Successfully With Microsoft Viva by Richard Harbridge
Piloting & Scaling Successfully With Microsoft VivaPiloting & Scaling Successfully With Microsoft Viva
Piloting & Scaling Successfully With Microsoft Viva
Unit 1_Lecture 2_Physical Design of IoT.pdf by StephenTec
Unit 1_Lecture 2_Physical Design of IoT.pdfUnit 1_Lecture 2_Physical Design of IoT.pdf
Unit 1_Lecture 2_Physical Design of IoT.pdf
StephenTec12 views
Special_edition_innovator_2023.pdf by WillDavies22
Special_edition_innovator_2023.pdfSpecial_edition_innovator_2023.pdf
Special_edition_innovator_2023.pdf
WillDavies2217 views

Nobody Wants a Slow Website