WordPress Meetup Nairobi 29.8.2020

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