wordpress theme performance - wp vienna meetup 8.6.2016
TRANSCRIPT
How people react to slow mobile sites
Source: http://www.webperformancetoday.com/2015/02/25/google-new-slow-label-web-performance/
Agenda1. Need for speed
2. How fast is fast?
3. State of WordPress theme performance
4. Recommendations
Why should you care about web performance?
Source: http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?_r=2
“These days, even 400 milliseconds — literally the blink of an eye — is too long, as Google engineers have discovered. That barely perceptible delay causes people to search less.”
“People will visit a Web site less often if it is slower than a close competitor by more than 250 milliseconds.”
“Four out of five online users will click away if a video stalls while loading.”
“The two-second rule is still often cited as a standard for Web commerce sites. Yet experts in human-computer interaction say that rule is outdated. “The old two-second guideline has long been surpassed on the racetrack of Web expectations,” said Eric Horvitz, a scientist at Microsoft’s research labs.”
Source: http://www.webperformancetoday.com/2012/03/01/nyt-redux-for-impatient-web-users-an-eye-blink-is-just-too-long-to-wait
Source: http://www.webperformancetoday.com/2012/03/21/neuroscience-page-speed-web-performance/
Source: https://www.google.com/insights/consumersurveys/view?survey=xqnkc3hqtrucy&question=2
Source: https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
https://whatdoesmysitecost.com/test/160604_GR_6fc270a4a027f1ebd93d26bf2eddb8c6#usdCost
Source: https://plus.google.com/u/0/+NeerajKumarKNKayastha/posts/hzgt3oUXmu1
Why should you care about web performance?
• Users are impatient and will leave a site
• It will hurt your brand
• Slow sites cost you money
• Slow sites cost your users money
• Google favours fast sites / punishes slow ones
How fast is fast?
Source: http://www.webperformancetoday.com/2012/03/21/neuroscience-page-speed-web-performance/
What makes a site feel fast/slow?• Time to First Byte
• Start Render
• Requests
• Bytes In/Total Size in KB
• Time to first byte (TTFB)
• Start Render Time
• DOMInteractive
• Frames per Second (FPS)
• Load Time (Fully Loaded)
Source: http://www.webperformancetoday.com/2015/04/15/new-findings-state-union-ecommerce-page-speed-web-performance-spring-2015/
How are things in the WordPress world?
☑FAST
Idea: test all WP themes
Disclaimers• I’m not a data or computer scientist
• I did not test on actual devices
• Not all themes were tested
• The theme previews are not representative
Test setup• Get a list of all WP themes from wordpress.org
• Load them into a spreadsheet
• Feed preview URLs into PageSpeed Insights
• Add results to spreadsheet
• Draw conclusions
https://gist.github.com/jancbeck/92c5d78b15c1c320e5ea5cbe7adbebef
https://docs.google.com/spreadsheets/d/1A9nlG8wcseL98UW3SkhqBvSc1aiR55qjlsMvCLdamRU/edit?usp=sharing
Data gathered• 3875 tested themes (rating, number of ratings,
active installs, last updated)
• mobile/desktop speed score
• number of resources (total, static, images, JS, CSS, other)
• response bytes (total, HTML, CSS, JS)
• number of hosts
Active installs
num
ber o
f act
ive
inst
alls
0
1.750.000
3.500.000
5.250.000
7.000.000
Year of last update
2008 2009 2010 2011 2012 2013 2014 2015 2016
Number of available themesnu
mbe
r of a
vaila
ble
them
es
0
250
500
750
1.000
Year of last update
2008 2009 2010 2011 2012 2013 2014 2015 2016
Them
es
350
700
1.050
1.400
Speed Scores (desktop)
32 39 42 44 49 53 56 60 63 65 67 69 71 73 75 77 79 81 83 85 87 89 91 93 95 97 99
Development of Speed Score over timeSp
eed
Scor
e
0
25
50
75
100
Year
2008 2009 2010 2011 2012 2013 2014 2015 2016
MEDIAN of mobile SPEED SCOREMEDIAN of desktop SPEED SCORE
The median average WP theme assets in 2016
Other 95,738 Bytes
JS 154,576 Bytes
CSS 101,765 Bytes
Images 57,165 Bytes
HTML 23,483 Bytes
Total: 432,727 Bytes
Median Number of Resources over timeRe
sour
ce fi
les
0
8
15
23
30
Year of last update
2008 2009 2010 2011 2012 2013 2014 2015 2016
MEDIAN of Number Static ResourcesMEDIAN of Number JS ResourcesMEDIAN of Number CSS Resources
Median Response Bytes over timeRe
spon
se B
ytes
0
125.000
250.000
375.000
500.000
Year of last update
2008 2009 2010 2011 2012 2013 2014 2015 2016
MEDIAN of HTML Response Bytes MEDIAN of Image Response BytesMEDIAN of CSS Response Bytes MEDIAN of JS Response BytesMEDIAN of Other ResponseBytes
Average resource file sizesFi
le S
ize
in B
ytes
0
12500
25000
37500
50000
Year of last update
2008 2009 2010 2011 2012 2013 2014 2015 2016
10.01611.946
15.760 18.26922.051
16.79316.671
20.559
24.884
5.931 5.931 5.931 4.829 4.435
24.78921.544 20.274 21.729
Avg. JS file size Avg. CSS file size
Recommendations
Source: http://designingforperformance.com/weighing-aesthetics-and-performance/#approach-new-designs-with-a-performance-budget
Source: http://bradfrost.com/blog/post/performance-budget-builder/
Optimise Assets1. Consolidate JavaScript and CSS
2. Minify Code
3. Defer Loading and Executing Non-Essential Scripts
4. Conditionally load
https://gist.github.com/DevinWalker/7621777
Recommended reading• https://jaicab.com/2015/05/18/making-a-difference-
with-performance/
• http://bradfrost.com/blog/post/prioritizing-performance-in-responsive-design/
• https://24ways.org/2012/responsive-responsive-design/
• http://www.webperformancetoday.com/2014/07/16/eight-tricks-improve-perceived-web-performance/
Good performance is good design• Include performance in project documents
• Get designs into the browser as soon as possible
• Test on real devices
• Collaborate
• Educate
• Advertise
Source: http://bradfrost.com/blog/post/performance-as-design/
Select fast themes• Test themes before you buy them
• Tell developers your performance budget
• Create a demand for better performing themes
Questions to ask yourself
• Do I prioritise performance?
• Am I willing to pay/work more for performance?