Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

WordPress & Front-end performance

1.261 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

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/

×