Typekit-Fonts besser per Java-Script einbinden

Als „Crea­ti­ve Cloud-Abon­nent“ kann ich die Type­kit-Fonts, heu­te: Ado­be Fonts, kos­ten­los für mei­ne Blogs benut­zen. Obwohl man vie­le Web­sites fin­det, die die qua­li­ta­tiv hoch­wer­ti­gen Fonts nut­zen, haben Blog­ger viel­leicht recht­li­che Beden­ken (DSGVO) und zögern, die Fonts ein­zu­set­zen. Auf der ande­ren Sei­te sehe ich auch zahl­rei­che Blogs, die ihre Fonts nicht selbst hos­ten, son­dern auch Goog­le-Fonts wei­ter­hin von den Goog­le – Ser­vern laden. Dass die­se Tat­sa­che in die Daten­schutz­er­klä­rung (Nut­zung von Goog­le- oder Type­kit-Fonts) gehört, soll­te jeder bedenken. 

Neh­men wir also an, du hät­test die Mög­lich­keit, Type­kit-Fonts zu nut­zen. Dann stellt sich die Fra­ge, wie die Ein­bin­dung der von dir selek­tier­ten und vor­ein­ge­stell­ten Fonts (Stich­wort: font-display: swap) erfol­gen soll­te. Ich glau­be, Sta­te-of-the-Art ist seit Län­ge­rem die­ser Ein­trag in eurer style.css:

@import url("https://use.typekit.net/xxxxxxx.css");

Mei­ner Erfah­rung nach ist die Ein­bin­dung per Java­Script deut­lich per­for­man­ter, jeden­falls wenn ich den Page­speed – Mes­sun­gen trau­en kann. Ich nut­ze hier das fan­tas­ti­sche Word­Press – Pre­mi­um-Plug­in perf­mat­ters und lege den Java­Script-Code mit sei­ner Hil­fe im Hea­der mei­nes Blogs ab:

<script>
  (function(d) {
    var config = {
      kitId: 'xxxxxxx',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>

Ich gebe unum­wun­den zu, dass ich zwi­schen der Ver­wen­dung von Sys­tem-Schrift­ar­ten, also ganz ohne Font-Ein­bin­dun­gen aus­zu­kom­men, (Google‑, Type­kit oder ande­ren) hin und her schwan­ke. Ich weiß, dass vie­le Blog­ger sol­che Über­le­gun­gen für höchst über­flüs­sig hal­ten. Sie ver­wen­den Sys­tem-Schrift­ar­ten und ihnen reicht das völlig. 

Die Ver­wen­dung des @Import-Einzeilers im Style­sheet hat nach mei­ner Beob­ach­tung erheb­li­che Per­for­man­cen­ach­tei­le. Page­speed weist bei mei­nem Blog einen Unter­schied von min­des­tens 6 – 7 Punk­ten aus. Der Nor­mal­wert lau­tet: 98 (mobil) und 100 (Desk­top), wenn ich die ein­zei­li­gen Auf­ruf in style.css ver­wen­de kommt ich auf 90 – 92 (mobil) und 100 (Desk­top). Ange­me­ckert wird dabei zum einen „First Con­tentful Paint“ und zum ande­ren „Lar­gest Con­tentful Paint“. 

Zur Ver­bes­se­rung der Per­for­mance ver­wen­de ich außer­dem DNS-Pre­fetch. Das kann zum Bei­spiel via WP-Rocket (Pre­mi­um Cache Plug­in) oder auch via perf­mat­ters gesche­hen. Die Ein­trä­ge bei Type­kit sehen so aus:

//use.typekit.com
//p.typekit.net

Dane­ben nut­ze ich die Mög­lich­keit, evtl. ver­wen­de­te selbst gehos­te­te Fonts vor­la­den zu las­sen. Auch dies geht mit WP-Rocket oder perf­mat­ters. Es macht einen Unter­schied, ob ich das DNS-Pre­fetch und das Vor­la­den der Fonts nut­ze. In den wei­ter unten ver­link­ten Per­for­mance­tipps wer­den die Details dazu gut erläutert.

Es ist und bleibt nun mal die Ent­schei­dung zwi­schen Optik und Per­for­mance. Das Laden von Fonts von ande­ren Ser­vern bringt manch­mal erheb­li­che Geschwin­dig­keits­vor­tei­le. Und mei­ne Lie­be zu schö­nen Fonts heißt schließ­lich nicht, dass sich „nur“ mit Sys­tem­schrift­ar­ten bei Ver­wen­dung der typo­gra­fi­schen Mög­lich­kei­ten (Varia­tio­nen) nicht auch wun­der­ba­re Ergeb­nis­se erzie­len ließen.

Web-Schrift­ar­ten machen durch­schnitt­lich 6 % des Gesamt­ge­wichts einer Web­sei­te auf Mobil­ge­rä­ten aus. Sie wir­ken sich auf Ihre Lade­zeit und die Art und Wei­se aus, wie Ihre Sei­te ger­en­dert wird. Vie­le Web­sites ver­wen­den mehr Schrift­ar­ten, als sie benö­ti­gen. Wäh­len Sie ein paar ver­schie­de­ne Gewichts­va­ri­an­ten, nor­mal, fett, etc. Dadurch wird die Grö­ße nied­rig blei­ben. Außer­dem wird WOFF 2 von über 95% aller Brow­ser unterstützt

Word­Press-Leis­tungs-Check­lis­te (alles, was Sie brauchen)

‎Wenn Sie einen Sys­tem­schrift­sta­pel ver­wen­den, müs­sen Sie kei­ne Schrift­ar­ten auf die Sei­te laden! Das ist ziem­lich rie­sig! Es eli­mi­niert auch alle FOUT (Flash von unsty­led Text) oder FOIT (Flash von unsicht­ba­rem Text) Häss­lich­keit. Unse­re Web­site ver­wen­det Sys­tem­schrift­ar­ten, und ich wet­te, Sie haben es nicht ein­mal bemerkt. Das ist rich­tig; ‎‎Die­se Site lädt kei­ne ein­zel­ne Schriftart‎‎.‎

How to speed up Word­Press (opti­miza­ti­ons for Core Web Vitals in 2021)