Embed Size (px)
Citation preview
Front-End PerformanceMichael Mizner
@miznerism
Front-End PerformanceMichael Mizner
@miznerism
What is Front-End Performance?
Front-End Performance Michael Mizner @miznerism
• Availability • Scalability
Front-End Performance Michael Mizner @miznerism
How long users are waiting for your website to load
Back-End Front-End
Different Concerns
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
Front-End Performance Michael Mizner @miznerism
Performance in Chrome Dev Tools
Front-End Performance Michael Mizner @miznerism
Average Load Times (via HubSpot)
Who is affected by bad performance?
Front-End Performance Michael Mizner @miznerism
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
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
Front-End Performance Michael Mizner @miznerism
Accessibility Concerns• Limited Mobility • Blind, Low Vision • Color Blind • Cognitive/Learning • Deaf, Hard of Hearing• AND EVERYONE ELSE
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
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
Front-End Performance Michael Mizner @miznerism
How do we deal with this in WordPress?
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/
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
Front-End Performance Michael Mizner @miznerism
GulpGrunt Webpack
i.e. concatenation, minification, etc Task Runners
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
Front-End Performance Michael Mizner @miznerism
Starter Themes
https://roots.io/
https://github.com/roots/sage
http://underscores.me/http://components.underscores.me/
Front-End Performance Michael Mizner @miznerism
clean underscores install
Mobile Desktop
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/
