Download to read offline
More Related Content
Page Performance
- 1.
- 2. STEFAN KREMER ‣ FREELANCECONSULTANT ‣ WORDPRESS SINCE 2005 ‣ CONTRIBUTOR ‣ @STKJJ STEFAN@DIGITAL-BRIDGE.DE
- 3. PAGE-PERFORMANCE WHY SHOULD WECARE ABOUT PAGE PERFORMANCE? ▸ Performance is about retaining users ▸ Performance is about improving conversions ▸ Performance is about user experience ▸ Performace has an ecological aspect
- 4. PAGE-PERFORMANCE WHAT ARE THEMETRICS? ▸ TTFB ▸ FID ▸ CLS ▸ LCP ▸ Pagesize ▸ Requests
- 5. PAGE-PERFORMANCE TTFB - TIMETO FIRST BYTE ▸ very technical metric ▸ DNS ▸ Network infrastructure ▸ Webserver stack ▸ Recommendation: Chose the right hoster! Aim for TTFB < 150 ms
- 6. PAGE-PERFORMANCE FID - FIRSTINPUT DELAY ▸ measures the interactivity ▸ mainly affected by huge (java)scripts ▸ Recommendation: aim for less than 100 ms
- 7. PAGE-PERFORMANCE CLS - CUMMULATIVELAYOUT 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. PAGE-PERFORMANCE LCP - LARGESTCONTENTFUL 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. PAGE-PERFORMANCE PAGESIZE: CODE ▸ codesize ▸ aim for slim and sematic correct HTML ▸ use as less JS as possible ▸ meltdown CSS ▸ Recommendation: reduce as much as possible
- 10. PAGE-PERFORMANCE PAGESIZE: IMAGES ▸ imagesize ▸ 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. 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. PAGE-PERFORMANCE PLUGINS ▸ too manyplugins? ▸ effects on frontend ▸ addtional fonts, CSS and JS ▸ effects in the backend ▸ number of SQL queries ▸ heavy CPU load
- 13. PAGE-PERFORMANCE THEME "HIERARCHY" ▸ ruleof thumb for code size and number of requests ▸ all purpose themes and pagebuilders ▸ childthemes ▸ from scratch or based starter themes
- 14. PAGE-PERFORMANCE CACHING ▸ Serverside caching ▸some hosters offer this in their packages ▸ caching plugin ▸ Clientside caching (browser)
- 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. PAGE-PERFORMANCE CDN - CONTENTDELIVERY 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. PAGE-PERFORMANCE MEASURES ▸ find theright 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. 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.
- 20. I JUST WANTTO KNOW MORE ON ABOVE THE FOLD OPTIMIZATIONS WHAT IS IT AND HOW IT WORKS Peter Mukaka TEXT
- 21. 1. HOW CANI SPEED UP THE PAGE LAODING TIME? 2. WHICH IS THE BEST FREE PAGE BUILDER? Peter Thiarara TEXT
- 22. WHICH IS THEBEST PLUGIN FOR ON- PAGE SEO? Leonard Gachimu TEXT
- 23. WHAT ARE YOURFAVOURITE TESTING TOOLS? Benson Muite TEXT https://responsively.app/
- 24. HOW WOULD YOUOPTIMIZE A PAGE WITHOUT USING A PLUGIN? Pagan Monk TEXT
- 25. HOW WOULD YOUINTEGRATE WP WITH SALESFORCE / SUGAR CRM AND USE IT FOR USER AUTHENTICATION? Pagan Monk TEXT
- 26.
- 27. STEFAN KREMER THANK YOU! @STKJJSTEFAN@DIGITAL-BRIDGE.DE