Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordPress & Front-end performance

1,236 views

Published on

In this presentation I’ll show how WordPress themes (and sites) can be built to achieve 100/100 Google pagespeed. You’ll learn about my process of using Gulp to concatenate and minify resources, along with intentional enqueues and dequeues.

Bonus: some ways to configure cache plugins to achieve a similar effect.

Take aways:

How front-end performance effects mobile users on slower speeds.
Tips on improving front-end performance.
Gulp basics and how to use with WordPress.

Published in: Internet
  • Be the first to comment

WordPress & Front-end performance

  1. 1. Front-End Performance Michael Mizner @miznerism
  2. 2. Front-End Performance Michael Mizner @miznerism
  3. 3. What is Front-End Performance? Front-End Performance Michael Mizner @miznerism
  4. 4. • Availability • Scalability Front-End Performance Michael Mizner @miznerism How long users are waiting for your website to load Back-End Front-End Different Concerns
  5. 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. 6. Front-End Performance Michael Mizner @miznerism Performance in Chrome Dev Tools
  7. 7. Front-End Performance Michael Mizner @miznerism Average Load Times (via HubSpot)
  8. 8. Who is affected by bad performance?  Front-End Performance Michael Mizner @miznerism
  9. 9. 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
  10. 10. 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
  11. 11. Front-End Performance Michael Mizner @miznerism Accessibility Concerns • Limited Mobility • Blind, Low Vision • Color Blind • Cognitive/Learning • Deaf, Hard of Hearing • AND EVERYONE ELSE
  12. 12. 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
  13. 13. 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
  14. 14. Front-End Performance Michael Mizner @miznerism How do we deal with this in WordPress?
  15. 15. 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/
  16. 16. 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
  17. 17. Front-End Performance Michael Mizner @miznerism GulpGrunt Webpack i.e. concatenation, minification, etc Task Runners
  18. 18. Front-End Performance Michael Mizner @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. 19. Front-End Performance Michael Mizner @miznerism Starter Themes https://roots.io/ https://github.com/roots/sage http://underscores.me/ http://components.underscores.me/
  20. 20. Front-End Performance Michael Mizner @miznerism clean underscores install Mobile Desktop
  21. 21. Front-End Performance Michael Mizner @miznerism mor10.com Mobile Desktop
  22. 22. Front-End Performance Michael Mizner @miznerism mizner.io Mobile Desktop
  23. 23. Front-End Performance Michael Mizner @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/

×