WordPress & Front-end performance
•
2 gostaram•1,615 visualizações
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.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a WordPress & Front-end performance
Semelhante a WordPress & Front-end performance (20)
Último
Último (20)
WordPress & Front-end performance
- 3. What is Front-End Performance? Front-End Performance Michael Mizner @miznerism
- 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. 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 Michael Mizner @miznerism Performance in Chrome Dev Tools
- 7. Front-End Performance Michael Mizner @miznerism Average Load Times (via HubSpot)
- 8. Who is affected by bad performance? Front-End Performance Michael Mizner @miznerism
- 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. 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. 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. 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. 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. Front-End Performance Michael Mizner @miznerism How do we deal with this in WordPress?
- 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. 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. Front-End Performance Michael Mizner @miznerism GulpGrunt Webpack i.e. concatenation, minification, etc Task Runners
- 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. Front-End Performance Michael Mizner @miznerism Starter Themes https://roots.io/ https://github.com/roots/sage http://underscores.me/ http://components.underscores.me/
- 20. Front-End Performance Michael Mizner @miznerism clean underscores install Mobile Desktop
- 21. Front-End Performance Michael Mizner @miznerism mor10.com Mobile Desktop
- 22. Front-End Performance Michael Mizner @miznerism mizner.io Mobile Desktop
- 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/