The document discusses optimizing WordPress page performance. It begins by explaining why performance is important for user experience, conversions, and retention. It then defines key performance metrics like Time to First Byte (TTFB), First Input Delay (FID), Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP), page size, and number of requests. For each metric, it provides recommendations on targets to aim for to improve performance. Additional tips include using efficient themes, images, caching, minification, concatenation, lazy loading, and content delivery networks. The document emphasizes measuring performance and provides several tools and resources for doing so.

1. PAGE-PERFORMANCE
WP MEETUP NAIROBI

2. STEFAN KREMER
‣ FREELANCE CONSULTANT
‣ WORDPRESS SINCE 2005
‣ CONTRIBUTOR
‣
@STKJJ STEFAN@DIGITAL-BRIDGE.DE

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. PAGE-PERFORMANCE
WHAT ARE THE METRICS?
▸ TTFB
▸ FID
▸ CLS
▸ LCP
▸ Pagesize
▸ Requests

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. PAGE-PERFORMANCE
FID - FIRST INPUT DELAY
▸ measures the interactivity
▸ mainly affected by huge (java)scripts
▸ Recommendation: aim for less than 100 ms

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. 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. 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. 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. 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 many plugins?
▸ effects on frontend
▸ addtional fonts, CSS and JS
▸ effects in the backend
▸ number of SQL queries
▸ heavy CPU load

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. 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 - 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. 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. 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. Q&A

20. I JUST WANT TO KNOW MORE ON ABOVE
THE FOLD OPTIMIZATIONS WHAT IS IT
AND HOW IT WORKS
Peter Mukaka
TEXT

21. 1. HOW CAN I SPEED UP THE PAGE
LAODING TIME? 2. WHICH IS THE BEST
FREE PAGE BUILDER?
Peter Thiarara
TEXT

22. WHICH IS THE BEST PLUGIN FOR ON-
PAGE SEO?
Leonard Gachimu
TEXT

23. WHAT ARE YOUR FAVOURITE TESTING
TOOLS?
Benson Muite
TEXT
https://responsively.app/

24. HOW WOULD YOU OPTIMIZE A PAGE
WITHOUT USING A PLUGIN?
Pagan Monk
TEXT

25. HOW WOULD YOU INTEGRATE WP WITH
SALESFORCE / SUGAR CRM AND USE IT
FOR USER AUTHENTICATION?
Pagan Monk
TEXT

26. MORE Q&A

27. STEFAN KREMER
THANK YOU!
@STKJJ STEFAN@DIGITAL-BRIDGE.DE