Otto Kekäläinen som är VD på Seravo går igenom vad varje WordPress-utvecklare borde känna till kring cache och vad som är best-practice.

1. Mindre och
snabbare
Cache tips för
WordPress-utvecklare

2. Vem, var och varför?

3. Premium hosting
and upkeep for
WordPress
HTTP/2
TESTED
UPDATES
24/7 UPKEEP

4. Branschledande prestanda
En jämförelse publicerad av en
Google-anställd på
ismyhostfastyet.com
bekräftar att Seravos kunders
sajter laddar snabbare än
konkurrenternas.
I studien användes mätdata
från tid till första byte (TTFB)
från verkliga
Chrome-användare.
Fast/Average/Slow TTFB by WordPress Host

5. “Det finns bara två svåra
saker inom programmering:
invalidering av cache och att
namnge saker.”
– Phil Karlton

6. Cache finns överallt
● Inuti CPU:n (nivåer L1-L4).
○ Du behöver inte hämta data från RAM om och om igen.
● I operativsystem (Linux) för att skydda hårddiskarna.
○ Förhindrar att olika program kontinuerligt läser samma fil från hårddisken.
● Vissa program har inbyggd cache:
○ PHP
■ Sparar filer så att det inte finns behov att ladda ner dem från hårddisken varje sekund.
■ Sparar den tolkade PHP-koden så att den inte behöver laddas om hela tiden.
○ Databas
■ Använder mycket cache (RAM) så att hårddisken inte behöver läsas lika ofta.
○ WordPress
■ Lagrar transienter i databasen så att kommande sökningar inte behöver vara lika
omfattande.
...och det här är bara några exempel. Listan är lång.

7. Cache finns överallt, för...?
● Snabbhet!
○ Kan du direkt säga hur mycket 5 gånger 5 är? Ja, för resultatet finns
redan sparat i ditt minne.
○ Vad sägs om 55 gånger 555? Hmm ... Förmodligen måste räkna på
det.
● Allt kan inte lagras i minnet, så det är en bra idé att bara spara saker du
förmodligen kommer att behöva flera gånger.

8. Siffror alla utvecklare borde känna till
● Hämtningstider för olika typer av minnen:
○ L1 cache: 1 nanosekund
○ L2 cache: 3 ns
○ L3 cache: 10 ns
○ RAM: 25 ns
○ PCIe NVMe hårddisk: 2000 ns – flesta Seravos kunder
○ SSD hårddisk: 100 000 ns – några Seravos kunder
○ HDD hårddisk: 10 000 000 ns – inga av Seravos kunder
○ Tammerfors-Berlin ping: 30 000 000 ns
○ HTML-sida från Nginx 2 000 000 ns
○ HTML-sida från PHP/WP 50 000 000 – 1 000 000 000 ns

9. Ska allt läggas i cache?
● Inte allt kan lagras i minnet, så du bör bara lagra saker
som troligen kommer att behövas två gånger eller
mer.
● Om något inte behövs, rensa cachen:
○ Rensning genom kommando, så kallad "cache purge" eller “cache flush”.
○ En inbyggd mekanism, t.ex. en räknare för att berätta hur många gånger data har
hämtats under den senaste timmen.
● Cache kan rensas när som helst och vissa system gör
det regelbundet.
● Dessutom kan cache löpa ut med tiden.

10. Svårt: Invalidering av cache
● När kommer cachen kommer löpa ut?
○ 5 sekunder?
○ 60 sekunder?
○ 15 minuter?
○ 7 dagar?
● Det beror på. Det är därför det är så svårt.

11. Cache koncept
Retrieval time – måste vara snabbare från cachen för att vara effektivt.
Invalidation – kriterierna för att ta bort data från cachen.
Expiry – den tid då data löper ut och tas bort från cachen.
Bypass – avsiktligt kringgå cache.
Miss – om cacheminnet är tomt, hämta senaste data.
Hit rate – hit/miss-ratio, hur ofta data hittades i cachen (idealt 99,99 %).

12. Cache på
WordPress sajter

13. För WP-utvecklare att överväga
● Webbläsares HTTP-cache
○ Alltid snabbast!
● Server HTTP-cache
○ Nginx, Varnish, Cloudflare, Fastly etc.
● WordPress transienter
○ get_transient(key);
● WordPress object cache
○ wp_cache_get(key);
● Filsystems-cache
● MariaDB databascache
Se också: https://seravo.se/tagg/cache/

14. Nej,
ytterligare ett
tillägg är inte
rätt väg.
Som bäst är det bara som ett
plåster på såret.

15. Webbläsares HTTP-cache
● Mål: att undvika onödig nätverkstrafik.
● Webbläsaren lagrar sidor och filer baserat på vad
HTTP-headers säger.
● Se till att din sajt skickar med rätt HTTP-headers och
innehållsinvalideringsdatum.
● WordPress gör inte detta som standard.

16. Ett exempel: WP 5.3.2 CSS-fil
$ curl -IL https://seravo.com/wp-includes/css/dist/block-library/style.min.css?ver=5.3.2
HTTP/2 200
server: nginx
date: Wed, 29 Apr 2020 05:33:47 GMT
content-type: text/css
last-modified: Tue, 28 Apr 2020 11:42:09 GMT
etag: "5ea81691-1d52e"
expires: Thu, 07 May 2020 05:33:45 GMT
cache-control: max-age=691200
x-proxy-cache: HIT P: A: N: H:0 O: S:
x-powered-by: Seravo
x-seravo-request-id: dd1d5d1e649b5f675269a54e86dabacb
Servern berättar för webbläsaren att innehållet är giltigt i sju dagar. Tidens längd spelar ingen
roll.
Men innehållet i adressen style.min.css?ver=5.3.2 förblir dock detsamma så det måste
uppdateras med ett nytt versionnummer om innehållet uppdateras. Annars kommer sidan att
vara "trasig" i sju dagar för gamla besökare.

17. Ett exempel: ett temas CSS-fil
wp_enqueue_style(
'seravo', get_stylesheet_directory_uri() . '/dist/layout.min.css',
false,
wp_get_theme()->get('Version')
);
=> https://seravo.com/wp-content/themes/seravo/dist/layout.min.css?ver=1.2.3
Om du laddar ner stilfiler eller skript utan versionsnummer kommer webbläsaren alltid att ha
samma layout.min.css.
Men om du lägger till versionsnumret sker nedladdningen med adressen
layout.min.css?ver=1.2.3 vilket säkerställer att när det finns en ny version av temat kommer
webbläsaren också att ladda ner en ny version av stilfilen.

18. Ett exempel: seravo.com CSS-fil
wp_enqueue_style(
'seravo', get_stylesheet_directory_uri() . '/dist/layout.min.css',
false,
seravo_get_git_commit_id()
);
=> https://seravo.com/wp-content/themes/seravo/dist/layout.min.css?ver=c98272d0
function seravo_get_git_commit_id() {
// Don't use shell_exec('git rev-parse --short HEAD') or similar since it
// would spawn a shell session on every WordPress load of every page.
// Instead read directly from .git/logs/HEAD to as efficient as possible.
$git_log_file = '/data/wordpress/.git/logs/HEAD';
if ( is_readable($git_log_file) ) {
$lines = file($git_log_file);
$last_line = array_pop($lines);
$fields = explode(' ', $last_line);
return substr($fields[1], 0, 8);
} else {
return wp_get_theme()->get('Version');
}
}

19. Innehållsinvalideringsdatum
header.php:
$seconds_to_cache = 3600; // 1 hour
$ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT";
header("Expires: $ts");
header("Cache-Control: max-age=$seconds_to_cache");
=>
expires: Wed, 29 Apr 2020 06:55:49 GMT
cache-control: max-age=3600
I dynamiska filer kommer giltighetsperioden från PHP. WordPress ställer inte in något
standarddatum. Temat kan ställa in det med HTTP-headers om sidan sällan uppdateras eller
uppdateringsfördröjningen inte är relevant.
Giltighetsperioden för statiska filer (t.ex. style.css eller script.js) kommer från
HTTP-serverinställningarna. Hos Seravo har statiska filer sju dagars utgång och
cache-kontroll som standard.

20. Blockerar innehållets utgångsdatum
nocache_headers();
=>
expires: Wed, 11 Jan 1984 05:00:00 GMT
cache-control: no-cache, must-revalidate, max-age=0
WordPress (eller ett tema eller ett tillägg) blockerar ibland innehållets utgångsdatum med en
nocache_headers() -funktion.

21. Server HTTP-cache
● Mål: att undvika onödig PHP-körning och att
tillhandahålla en HTML-fil direkt från minnet.
● Serverns cache lagrar sidor och filer rent baserat på
vad HTTP-headers säger (såväl som webbläsaren!).
● Än en gång, se till att din webbplats skickar rätt
HTTP-headers och utgångsdatum för innehållet.

22. Verktyg: wp-speed-test
$ wp-speed-test
Testing speed URL https://seravo.com...
URL TOTAL NAMELOOKUP CONNECT APPCONNECT PRETRANSFER STARTTRANSFER = AVG
https://seravo.com 0.161 0.004 0.005 0.011 0.011 0.159 0.161
https://seravo.com 0.124 0.000 0.000 0.000 0.000 0.122 0.142
https://seravo.com 0.113 0.000 0.000 0.000 0.000 0.111 0.132
https://seravo.com 0.216 0.000 0.000 0.000 0.000 0.215 0.153
$ wp-speed-test --cache
Testing speed URL https://seravo.com...
Warning: invoked with --cache and thus measuring cached results. This does not measure actual PHP speed.
URL TOTAL NAMELOOKUP CONNECT APPCONNECT PRETRANSFER STARTTRANSFER = AVG
https://seravo.com 0.015 0.004 0.004 0.012 0.012 0.013 0.015
https://seravo.com 0.009 0.000 0.000 0.000 0.000 0.007 0.009
https://seravo.com 0.002 0.000 0.000 0.000 0.000 0.001 0.006
https://seravo.com 0.006 0.000 0.000 0.000 0.000 0.005 0.006
Om --cache ger ett bättre resultat fungerar servercachen på HTTP-nivå korrekt. Som standard
åsidosätter wp-speed-testet alltid cachen (det är inte nginx- utan wp-speed-test).

23. Verktyg: wp-check-http-cache
$ wp-check-http-cache
----------------------------------------
Seravo HTTP cache checker
----------------------------------------
Testing https://example.com...
Request 1: MISS
Request 2: MISS
Request 3: MISS
----------------------------------------
FAILED: HTTP cache does not work for https://example.com.
----------------------------------------
Please review these headers and try to find what emits them:
expires: Wed, 11 Jan 1984 05:00:00 GMT
cache-control: no-transform, no-cache, no-store, must-revalidate
----------------------------------------
Du kan också testa detta själv genom att köra:
curl -IL https://example.com
Webbplatsen har antagligen WP_DEBUG eller nocache_headers() på i och med 1984.

24. Verktyg: wp-check-http-cache
$ wp-check-http-cache
----------------------------------------
Seravo HTTP cache checker
----------------------------------------
Testing https://seravo.com...
Request 1: HIT
Request 2: HIT
Request 3: HIT
----------------------------------------
SUCCESS: HTTP cache works for https://seravo.com.
----------------------------------------
Du kan också testa detta själv genom att köra:
curl -IL https://seravo.com
Webbplatsen skickar inte HTTP-headers som skulle förhindra caching på servernivå.

25. Avsiktligt kringgå cache
De flesta webbplatser vill ha cache på HTTP-nivå aktiverat. Ett undantag är en sida som har
innehåll anpassat endast för en användare, till exempel visas "Hej Otto!" till en identifierad
användare eller en WooCommerce-varukorg.
Som standard visas varukorgen tom och cachningen är aktiverad, men så snart användaren
lägger något i varukorgen ska anpassat innehåll visas för just den besökaren och händelsen
ska inte cachas.
WooCommerce ser till att detta händer genom att sätta cookien woocommece_items_in_cart
och woocommerce_cart_hash som automatiskt förhindrar att cachen fungerar, eftersom de
indikerar användarspecifikt innehåll.

26. Kan servercache sakta ner sajten?
Ytterligare lager av cachning kan minska behovet av att hämta information direkt från källan.
Den bästa cachen är hos webbläsaren själv. Ett intressant alternativ kan vara att cacha hos en
server som är nära användaren. Att använda ett CDN kan dock också öka fördröjningen. Till
exempel är direktanslutningen 90 ms men användningen av WooCommerce via CDN är 60 +
60 ms = 120 ms => 30% långsammare. Se till att mäta före och efter!
Läs mer: https://seravo.se/blogg/hjalper-cloudflare-verkligen-din-wordpress-webbplats/
Öppnar
varukorgen
Besökare i
Berlin
Server i
Stockholm
Server i
Amsterdam
HTTP/2-anslutning, öppning+sök 90 ms
HTTP/2-anslutning, ö+s 60 ms
HTTP/2-anslutning, ö+s 60 ms

27. Seravo-egenskap: servercaching
● En standard WordPress-sida cachelagras på servernivå i 10 minuter
som standard (se detta genom att titta på HIT / MISS-raderna i
HTTP-svaret).
● Cache på servernivå kan rensas med kommandot wp-purge-cache.
● ...eller hoppas över genom att ladda sidan med Ctrl + F5.
● Om sidan är trasig (t.ex. PHP-syntaxfel), kommer inaktuell cache in i
bilden och visar sidan från cache medan utvecklaren lägger till det
saknade semikolonet etc.

28. WordPress transienter
● Mål: att undvika upprepade tunga nätverks- och
databassökningar inom samma minut eller timme.

29. WordPress transienter
// Check for transient. If none, then execute WP_Query
if ( false === ( $featured = get_transient( 'foo_featured_posts' ) ) ) {
$featured = new WP_Query(
array(
'category' => 'featured',
'posts_per_page' => 5
));
// Put the results in a transient. Expire after 12 hours.
set_transient( 'foo_featured_posts', $featured, 12 * HOUR_IN_SECONDS );
}
WordPress egna inbyggda cache för lagring av data för senare användning (t.ex. en minut eller
en timme). Lagrar i databasen som standard, men kan också använda till exempel bara RAM om
object-cache.php används och t.ex. Redis-server är tillgänglig (som är fallet för alla
Seravo-kunder).
Transient API kortfattat: get_transient(), set_transient() och delete_transient()
För mer information: https://seravo.se/blogg/300-snabbare-wordpress-med-transienter/
Kom alltid ihåg giltighetstidens utgång!
Annars kan WP ladda data via
wp_load_alloptions() med varje sidladdning!

30. WordPress object cache
● Mål: att undvika upprepade databassökningar under
samma PHP-sidladdning.

31. WP object cache
function prefix_get_post_count( $post_status = 'publish' ) {
$cache_key = 'prefix_post_count_'. $post_status;
$_posts = wp_cache_get( $cache_key );
if ( false === $_posts ) {
$_posts = $wpdb->get_var(
$wpdb->prepare(
"SELECT COUNT(*) FROM $wpdb->posts WHERE post_type = 'post' AND post_status = %s",
$post_status
));
wp_cache_set( $cache_key, $_posts );
}
return $_posts;
}
Lagrar till exempel databassökresultat i PHP:s minne, så att sökningar som gjorts i olika delar
av WordPress-kod under samma PHP-körning inte behöver upprepas många gånger. (Jag har
aldrig använt den. Transient API är vad en utvecklare verkligen behöver!).
Exempelsida https://developer.wordpress.org/reference/functions/wp_cache_get/

32. Filsystems-cache
● Mål: att undvika onödiga hårddiskoperationer i
allmänhet, oavsett program.
● Seravo löser det åt dig!

33. Databascache
● Mål: att undvika onödiga hårddiskoperationer för
databasen specifikt.
● Seravo löser det åt dig!

34. Tideways
Xdebug är ett bra verktyg för att
profilera PHP-kod i en lokal
utvecklingsmiljö.
I en produktionsmiljö
rekommenderar Seravo
Tideways.com.
seravo.com/docs/development/xdebug/
seravo.com/docs/development/tideways/

35. seravo.com/docs
Instruktioner för
WordPress-utvecklare

36. Kom alltid ihåg att mäta före och
efter!

37. Tack!
Seravo.se @SeravoSE @ottokekalainen

38. Se även
Make Your Site Faster with Caching
https://seravo.com/blog/wordpress-cache/
300 % snabbare WordPress med transienter
https://seravo.se/blogg/300-snabbare-wordpress-med-transienter/
5 common reasons why your WordPress site is slow
https://youtu.be/8sJExUO-U4A
Improving WordPress Performance with XDebug and PHP Profiling
https://youtu.be/oKcIS5A-6_c