Download - WordPress & Front-end performance
![Page 1: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/1.jpg)
Front-End PerformanceMichael Mizner
@miznerism
![Page 2: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/2.jpg)
Front-End PerformanceMichael Mizner
@miznerism
![Page 3: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/3.jpg)
What is Front-End Performance?
Front-End Performance Michael Mizner @miznerism
![Page 4: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/4.jpg)
• Availability • Scalability
Front-End Performance Michael Mizner @miznerism
How long users are waiting for your website to load
Back-End Front-End
Different Concerns
![Page 5: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/5.jpg)
80 to 90% of poor performance happens in the front end
Front-End Performance Michael Mizner @miznerism
Steve Souders, Google’s (former) Head Performance Engineer
![Page 6: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/6.jpg)
Front-End Performance Michael Mizner @miznerism
Performance in Chrome Dev Tools
![Page 7: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/7.jpg)
Front-End Performance Michael Mizner @miznerism
Average Load Times (via HubSpot)
![Page 8: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/8.jpg)
Who is affected by bad performance?
Front-End Performance Michael Mizner @miznerism
![Page 9: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/9.jpg)
Front-End Performance Michael Mizner @miznerism
Business
Adding half a second to a search results page can decrease traffic
and ad revenues by 20 percent, according to a Google study
http://alistapart.com/article/improving-ux-through-front-end-performance
http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/
Every additional 100 milliseconds of load time
decreased sales by 1 percent
![Page 10: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/10.jpg)
Front-End Performance Michael Mizner @miznerism
Accessibility
“The Web is fundamentally designed to work for all people, whatever their hardware, software,
language, culture, location, or physical or mental ability.”
https://www.w3.org/WAI/intro/accessibility.php
![Page 11: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/11.jpg)
Front-End Performance Michael Mizner @miznerism
Accessibility Concerns• Limited Mobility • Blind, Low Vision • Color Blind • Cognitive/Learning • Deaf, Hard of Hearing• AND EVERYONE ELSE
![Page 12: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/12.jpg)
Front-End Performance Michael Mizner @miznerism
Poverty
Only 43.8 percent of households with less than a high school education were online, compared to 90.1 percent of those with a college degree.
• GPRS • “Edge” • Dial-Up
Internet Access Options
![Page 13: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/13.jpg)
Front-End Performance Michael Mizner @miznerism
& Gomez Inc. 2019
Users expect pages to load in two seconds—and after three seconds, up to 40 percent will simply leave.
http://alistapart.com/article/improving-ux-through-front-end-performance
![Page 14: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/14.jpg)
Front-End Performance Michael Mizner @miznerism
How do we deal with this in WordPress?
![Page 15: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/15.jpg)
Front-End Performance Michael Mizner @miznerism
Dequeue assets & concatenate Plugins & Themes that add resources do it through
wp_enqueue_script and wp_enqueue_style
http://justintadlock.com/archives/2009/08/06/how-to-disable-scripts-and-styles
https://css-tricks.com/taking-control-cssjs-wordpress-plugins-load/
![Page 16: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/16.jpg)
Front-End Performance Michael Mizner @miznerism
Determine “Critical Styles”A small style sheet with the most important rules for your site.
Place in <head> before <body>
It’s a little non-wordpressy
![Page 17: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/17.jpg)
Front-End Performance Michael Mizner @miznerism
GulpGrunt Webpack
i.e. concatenation, minification, etc Task Runners
![Page 18: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/18.jpg)
Front-End Performance Michael Mizner @miznerism
Image OptimizationJPEG Mini ImageOptim ImageAlpha
http://www.jpegmini.com/
https://imageoptim.com/mac
https://pngmini.com/
https://jamiemason.github.io/ImageOptim-CLI/
Bonus: CLI Controls
![Page 19: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/19.jpg)
Front-End Performance Michael Mizner @miznerism
Starter Themes
https://roots.io/
https://github.com/roots/sage
http://underscores.me/http://components.underscores.me/
![Page 20: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/20.jpg)
Front-End Performance Michael Mizner @miznerism
clean underscores install
Mobile Desktop
![Page 23: WordPress & Front-end performance](https://reader034.vdocuments.mx/reader034/viewer/2022051707/58eec76f1a28abb34b8b4583/html5/thumbnails/23.jpg)
Front-End Performance Michael Mizner @miznerism
Links & Resourceshttp://www.webpagetest.org/ https://tools.pingdom.com/ https://developers.google.com/speed/pagespeed/insights/
Plugins: http://wp-rocket.me/ https://wordpress.org/plugins/wp-super-cache/
Dev Assistive Plugins: https://wordpress.org/plugins/asset-queue-manager/ https://wordpress.org/plugins/wp-asset-clean-up/
https://css-tricks.com/taking-control-cssjs-wordpress-plugins-load/ https://css-tricks.com/one-two-three/