Successfully reported this slideshow.
Your SlideShare is downloading. ×

Page Performance

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
WordCamp RVA
WordCamp RVA
Loading in …3
×

Check these out next

1 of 27 Ad
Advertisement

More Related Content

Slideshows for you (18)

Similar to Page Performance (20)

Advertisement

Recently uploaded (20)

Advertisement

Page Performance

  1. 1. PAGE-PERFORMANCE WP MEETUP NAIROBI
  2. 2. STEFAN KREMER ‣ FREELANCE CONSULTANT ‣ WORDPRESS SINCE 2005 ‣ CONTRIBUTOR ‣ @STKJJ STEFAN@DIGITAL-BRIDGE.DE
  3. 3. PAGE-PERFORMANCE WHY SHOULD WE CARE ABOUT PAGE PERFORMANCE? ▸ Performance is about retaining users ▸ Performance is about improving conversions ▸ Performance is about user experience ▸ Performace has an ecological aspect
  4. 4. PAGE-PERFORMANCE WHAT ARE THE METRICS? ▸ TTFB ▸ FID ▸ CLS ▸ LCP ▸ Pagesize ▸ Requests
  5. 5. PAGE-PERFORMANCE TTFB - TIME TO FIRST BYTE ▸ very technical metric ▸ DNS ▸ Network infrastructure ▸ Webserver stack ▸ Recommendation: Chose the right hoster! Aim for TTFB < 150 ms
  6. 6. PAGE-PERFORMANCE FID - FIRST INPUT DELAY ▸ measures the interactivity ▸ mainly affected by huge (java)scripts ▸ Recommendation: aim for less than 100 ms
  7. 7. PAGE-PERFORMANCE CLS - CUMMULATIVE LAYOUT SHIFT ▸ measures the visual stability ▸ layout shift score = impact fraction * distance fraction ▸ load order ▸ image area sizes ▸ Recommendation: aim for less than 0.1
  8. 8. PAGE-PERFORMANCE LCP - LARGEST CONTENTFUL PAINT ▸ measures load performance ▸ elements that affect LCP: ▸ block-level elements (<h1>, <h2>, … <p>, <ul>, …) ▸ <img> ▸ <videos> ▸ <images> within <svg> ▸ .css-class { background- image: url(); } ▸ Recommendation: aim for < 2.5 s
  9. 9. PAGE-PERFORMANCE PAGESIZE: CODE ▸ code size ▸ aim for slim and sematic correct HTML ▸ use as less JS as possible ▸ meltdown CSS ▸ Recommendation: reduce as much as possible
  10. 10. PAGE-PERFORMANCE PAGESIZE: IMAGES ▸ image size ▸ use the correct formats (.jpg, .png, .gif, .webp) ▸ reduce width and height to the needs ▸ compress images as much as possible without affecting quality ▸ use lazy loading ▸ use <img srcset="" /> rather than <img src="" /> ▸ Recommendation: reduce as much as possible
  11. 11. PAGE-PERFORMANCE NUMBER OF REQUESTS ▸ every file that has to be loaded is one request ▸ JS ▸ CSS ▸ Images ▸ Fonts ▸ DNS lookups for external content ▸ Recommendation: reduce as much as possible
  12. 12. PAGE-PERFORMANCE PLUGINS ▸ too many plugins? ▸ effects on frontend ▸ addtional fonts, CSS and JS ▸ effects in the backend ▸ number of SQL queries ▸ heavy CPU load
  13. 13. PAGE-PERFORMANCE THEME "HIERARCHY" ▸ rule of thumb for code size and number of requests ▸ all purpose themes and pagebuilders ▸ childthemes ▸ from scratch or based starter themes
  14. 14. PAGE-PERFORMANCE CACHING ▸ Serverside caching ▸ some hosters offer this in their packages ▸ caching plugin ▸ Clientside caching (browser)
  15. 15. PAGE-PERFORMANCE WP-ROCKET + IMAGIFY ▸ same vendor (WP Media) ▸ team up perfectly ▸ does minification, concatenation, JS-defer, OPcache, ▸ per page settings if things fail
  16. 16. PAGE-PERFORMANCE CDN - CONTENT DELIVERY NETWORK ▸ be close to your audience ▸ audience is not your client, but clients of your client! ▸ what if audience is worldwide ▸ CDN can serve from various locations
  17. 17. PAGE-PERFORMANCE MEASURES ▸ find the right hoster ▸ use slim themes ▸ minify, concatenate CSS ▸ minify, concatenate and defer JS ▸ host (google) fonts locally ▸ reduce file sizes of images and videos ▸ apply caching and if needed CDN
  18. 18. PAGE-PERFORMANCE LINK COLLECTION ▸ https://web.dev/learn/ ▸ https://www.websitecarbon.com ▸ https://wordpress.tv/2020/04/22/simon-kraft-wordpress-for- the-future/ ▸ https://www.wholegraindigital.com/blog/website-energy- efficiency/ ▸ https://www.marketingtracer.com/seo/time-to-first-byte ▸ https://www.bytecheck.com/ ▸ https://tools.keycdn.com/http2-test ▸ https://chrome.google.com/webstore/detail/lighthouse/ blipmdconlkpinefehnmjammfjpmpbjk ▸ https://developers.google.com/speed/pagespeed/insights/ ▸ https://gtmetrix.com/ ▸ https://tools.pingdom.com ▸ https://contactform7.com/loading-javascript-and-stylesheet- only-when-it-is-necessary/ ▸ https://www.namecheap.com/support/knowledgebase/ article.aspx/10015/2239/easywp-plugins-cache-plugin-seo- plugin-and-blocked-plugins/#ewpblplgn ▸ https://wp-rocket.me/blog/astra-wordpress-theme- performance/ ▸ https://wpastra.com ▸ https://dessign.net/gutenberg-starter-wordpress-theme-free/ ▸ https://wp-rocket.me/blog/different-types-of-caching/ ▸ https://de.wordpress.org/plugins/cache-enabler/ ▸ https://de.wordpress.org/plugins/cachify/ ▸ https://wp-rocket.me ▸ https://imagify.io ▸ https://www.cloudflare.com
  19. 19. Q&A
  20. 20. I JUST WANT TO KNOW MORE ON ABOVE THE FOLD OPTIMIZATIONS WHAT IS IT AND HOW IT WORKS Peter Mukaka TEXT
  21. 21. 1. HOW CAN I SPEED UP THE PAGE LAODING TIME? 2. WHICH IS THE BEST FREE PAGE BUILDER? Peter Thiarara TEXT
  22. 22. WHICH IS THE BEST PLUGIN FOR ON- PAGE SEO? Leonard Gachimu TEXT
  23. 23. WHAT ARE YOUR FAVOURITE TESTING TOOLS? Benson Muite TEXT https://responsively.app/
  24. 24. HOW WOULD YOU OPTIMIZE A PAGE WITHOUT USING A PLUGIN? Pagan Monk TEXT
  25. 25. HOW WOULD YOU INTEGRATE WP WITH SALESFORCE / SUGAR CRM AND USE IT FOR USER AUTHENTICATION? Pagan Monk TEXT
  26. 26. MORE Q&A
  27. 27. STEFAN KREMER THANK YOU! @STKJJ STEFAN@DIGITAL-BRIDGE.DE

×