Download as PDF, PPTX
Uploaded byMichael Mizner
WordPress & Front-end performance
The document discusses front-end performance, noting that 80-90% of poor performance occurs at the front end, with significant implications for user experience and business metrics. It emphasizes the importance of accessibility in web design and offers strategies for improving performance, particularly in WordPress, including optimizing assets and using task runners for code management. Key statistics highlight that users expect fast load times and that delays can have severe impacts on traffic and sales.
More Related Content
![Progressive Web Apps and the Windows Ecosystem [Build 2017]](https://cdn.slidesharecdn.com/ss_thumbnails/progressivewebappsandthewindowsecosystembuild2017-170512062428-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to WordPress & Front-end performance
![How slow load times hurt UX (and what you can do about it) [FluentConf 2016]](https://cdn.slidesharecdn.com/ss_thumbnails/2016-fluent-even-more-abridged-tammyeverts-160310192653-thumbnail.jpg?width=640&height=640&fit=bounds)
WordPress & Front-end performance
- 1.
- 2.
- 3. What is Front-EndPerformance? Front-End Performance Michael Mizner @miznerism
- 4. • Availability • Scalability Front-EndPerformance Michael Mizner @miznerism How long users are waiting for your website to load Back-End Front-End Different Concerns
- 5. 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
- 6. Front-End Performance MichaelMizner @miznerism Performance in Chrome Dev Tools
- 7. Front-End Performance MichaelMizner @miznerism Average Load Times (via HubSpot)
- 8. Who is affectedby bad performance? Front-End Performance Michael Mizner @miznerism
- 9. Front-End Performance MichaelMizner @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
- 10. Front-End Performance MichaelMizner @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
- 11. Front-End Performance MichaelMizner @miznerism Accessibility Concerns • Limited Mobility • Blind, Low Vision • Color Blind • Cognitive/Learning • Deaf, Hard of Hearing • AND EVERYONE ELSE
- 12. Front-End Performance MichaelMizner @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
- 13. Front-End Performance MichaelMizner @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
- 14. Front-End Performance MichaelMizner @miznerism How do we deal with this in WordPress?
- 15. Front-End Performance MichaelMizner @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/
- 16. Front-End Performance MichaelMizner @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
- 17. Front-End Performance MichaelMizner @miznerism GulpGrunt Webpack i.e. concatenation, minification, etc Task Runners
- 18. Front-End Performance MichaelMizner @miznerism Image Optimization JPEG Mini ImageOptim ImageAlpha http://www.jpegmini.com/ https://imageoptim.com/mac https://pngmini.com/ https://jamiemason.github.io/ImageOptim-CLI/ Bonus: CLI Controls
- 19. Front-End Performance MichaelMizner @miznerism Starter Themes https://roots.io/ https://github.com/roots/sage http://underscores.me/ http://components.underscores.me/
- 20. Front-End Performance MichaelMizner @miznerism clean underscores install Mobile Desktop
- 21. Front-End Performance MichaelMizner @miznerism mor10.com Mobile Desktop
- 22. Front-End Performance MichaelMizner @miznerism mizner.io Mobile Desktop
- 23. Front-End Performance MichaelMizner @miznerism Links & Resources http://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/