Bra typografi på en webbplats kan ha en positiv inverkan på konverteringar. Att välja rätt typsnitt och optimera dem är avgörande. Google Fonts är en mycket populär tjänst, eftersom de är väldesignade och kan lägga till en extra nivå av elegans till standardwebbplatser. Tyvärr, precis som allt annat på webben, kan de skada din webbplats prestanda om de inte används på rätt sätt. I den här artikeln ska vi titta på 5 tips för att optimera prestanda när du använder Google Fonts med WordPress.
Google Fonts och WordPress-webbplatsprestanda
Google Fonts är en katalog med över 1300 gratis teckensnittsfamiljer från Google som alla kan använda på sina webbplatser eller tryckta projekt. Även om de används på miljontals WordPress-webbplatser, är de ett utmärkt sätt att förbättra en webbplats design. Du kommer säkert att kunna hitta en unik design bland dem. Google Fonts läggs vanligtvis till på en WordPress-webbplats genom att hämta dem från Googles CDN. Det betyder att de finns på servrar som är närmast användaren, inklusive både typsnittet och stilmallen.
Google-teckensnitt som hämtas från webben är inte lika snabba som systemteckensnitt (de som är installerade på din dator). Webbtrafik utanför din webbplats blir en del av laddningshastigheten. Google Fonts laddningstid har en mindre inverkan på din webbplats prestanda än större filer. Teckensnitt är trots allt mycket mindre än bilder. Men varje begäran som din webbplats gör är tid som spenderas när användaren inte kan komma åt den. Därför är det värt att optimera dina Google Fonts för att förbättra din webbplats laddningshastighet.
Lyckligtvis finns det flera sätt att optimera din prestanda när du använder Google Fonts med WordPress.
1. Använd färre teckensnitt
Det är bäst att använda så få typsnitt som möjligt. Helst skulle du använda två uppsättningar teckensnitt som är parade för bästa resultat.
När vi pratar om typsnitt så pratar vi faktiskt om typsnittsfamiljer. Vi tänker ofta på det primära teckensnittet när vi pratar om en teckensnittstyp, men teckensnitt innehåller många varianter som flera vikter, kursiv stil, siffror och symboler. Dessa är kända som glyfer.
Många teckensnitt innehåller vikter som tunn, lätt, medium, halvfet, fet, ultrafet och mer. Var och en av dessa är olika typsnitt inom teckensnittsfamiljen. Varje vikt innehåller också en kursiv stil, vilket fördubblar antalet teckensnitt. När du använder den teckensnittsfamiljen laddar du också in alla dess varianter. Det är mycket när man kommer till det.
Till exempel är Roboto ett populärt typsnitt för sajter nuförtiden. Familjen har 12 uppsättningar teckensnitt med 282 tecken per teckensnitt. Det är 3 384 glyfer för en teckensnittsfamilj gånger antalet teckensnittstillägg du vill använda. Lägg till det Roboto Condensed och Roboto Slab, så är det lätt att se hur antalet teckensnitt som används på en webbplats kan bli astronomiskt. När du använder flera teckensnittsfamiljer kan du använda tiotusentals teckensnitt.
2. Google Fonts på din egen WordPress-server
Det är möjligt att ladda ner och hosta Google Fonts på din WordPress-server. På så sätt kommer webbplatsens typografi att levereras till användaren från samma plats som webbplatsen. Webbplatsen kommer inte behöva begära teckensnittsfilerna från någon annanstans, och sidan kommer att laddas snabbare för användaren.
När du väljer ett teckensnitt på Google Fonts-webbplatsen ser du ett nedladdningsalternativ. Ladda ner teckensnittsfamiljen och ladda sedan upp dem via FTP till mappen innehåll/uppladdningar. För att använda dem, hänvisa inte till tredjepartstypsnittsvärden i
av dina sidor. Referera istället till din URL/fonts/FONT_FILE_NAME.file-extension i din stilmall.
Med allt detta i åtanke, ladda bara de typsnitt och vikter du behöver. Använd inte alla möjliga vikter och kursiv stil. Använd formaten TTF, EOT, WOFF och WOFF2 för varje typsnitt.
3. Förladda Google Fonts
Google Fonts hämtas vanligtvis från Googles CDN. Visserligen är detta en snabb server, men typsnitt dras vanligtvis sent i laddningsprocessen av en webbplats.
Om det finns ett anslutningsproblem och typsnitten inte laddas ner, renderas sidan med generiska systemteckensnitt. Sedan, när typsnitten har laddats ner, renderas sidan igen. I enklare termer laddas sidan med ett teckensnitt och ändras sedan till ett annat teckensnitt. Detta är känt som en blixt av ostilad text (FOUT). Detta är att föredra framför att vänta. Men det är fortfarande inte jättebra.
Ett sätt att lösa detta är att förinstallera typsnitten. Att förinstallera Google Fonts minskar också laddningstiden med cirka 100 ms. Anledningen till detta är att DNS, TCP och TLS laddas parallellt med Google Fonts CSS-fil.
Förladdning kräver att du föransluter och använder en förladdningslänk i stilmallen. Du skulle ladda typsnittets familj och stilmall med HTML till
av din webbplats.
Här är ett exempel på HTML som använder preconnect from CDN Planet:
<head> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:[email protected]&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:[email protected]&display=swap"> </head>
Byta ut Roboto i exemplet ovan, samt alla teckensnittsalternativ med de typsnitt och alternativ du vill använda.
4. Optimera Google Fonts med ett WordPress-plugin
Som med det mesta angående WordPress gör plugins det mycket lättare att optimera Google Fonts. De hanterar mjukvarusidan av saker åt dig, så du behöver inte oroa dig för var du ska placera koden.
Det finns massor av bra plugins som kan optimera dina Google Fonts. En som Vi tycker är särskilt intressant är OMGF | Värd Google Fonts lokalt. Den är speciellt utformad för att optimera de Google-teckensnitt du redan använder. Liksom många andra Google Fonts-plugins har den här både en gratis och en premiumversion. Gratisversionen innehåller bara manuella inställningar, vilket kan vara knepigt. Men de är inte alltför komplicerade att installera.
Det viktigaste som sticker ut med den här är att gratisversionen innehåller några optimeringar som alla kan dra nytta av, snarare än att bara underlätta användningen av själva typsnitten. De flesta plugins som detta ger endast optimering genom premiumversionen. För bästa resultat rekommenderar Vi dock premiumversionen. Gratisversionen har tillräckligt med optimeringar för att komma igång.
Plugin-programmet cachar typsnitten och du kan vara värd för Google Fonts lokalt. Typsnitt i kö tas automatiskt bort från rubriken och ersätts med lokala teckensnitt. Du kan förinläsa typsnitt som är ovanför mitten och hindra dem från att ladda vissa typsnitt och stilmallar.
Du kan ersätta eller ta bort teckensnitt i identifieringsinställningarna. Detta kan vara särskilt användbart efter en omdesign så att du inte laddar gamla resurser som aldrig kommer att levereras till dina användare.
Och om du håller ett riktigt rent hus låter de avancerade inställningarna dig välja katalogen för typsnittscachen.
5. Använd Google Fonts-integration med Divi-moduler
600 Google Fonts är integrerade i alla Divi-moduler som använder text och är tillgängliga i både Divi-tema och Divi-plugin och optimerad för bästa möjliga prestanda och design. Välj teckensnittsfamilj, vikt och stil och anpassa deras storlek, färg, linjehöjd, radavstånd och skuggor för brödtext och alla rubrikstorlekar individuellt. Du kan till och med justera dem för enskilda enheter.
Google Fonts cachelagras och endast de teckensnitt som används läses in i modulen. Detta hindrar webbläsaren från att ladda teckensnittsvarianter som inte behövs.
Det finns ett par Google Fonts-inställningar i Divi Theme Options, i Allmän > Prestanda flik. Båda är aktiverade som standard. Det betyder att om du är en Divi-användare och inte visste att detta var något som temat hanterar, är du redan omhändertagen.
Förbättra inläsning av Google Fonts cachar Google Fonts och laddar dem inline för att förbättra sidladdningstiden och minska renderingsblockerande begäranden. Nedanför det är ett alternativ som kallas Begränsa stödet för Google Fonts för äldre webbläsare. Den här funktionen minskar storleken på Google Fonts för att förbättra laddningstiderna. Nackdelen är att stödet för Google Fonts är begränsat i vissa äldre webbläsare.
Sammanfattning
Det finns en god chans att din webbplats redan använder Google Fonts på något sätt. Men om du följer dessa 5 tips för att optimera prestanda när du använder Google Fonts med WordPress tror Vi att du kommer att märka skillnad. Även om det kan vara litet kan ooptimerade Google Fonts ha en inverkan på din webbplats laddningstid och övergripande användarupplevelse. Det finns flera manuella alternativ för att optimera dina Google Fonts, men Vi rekommenderar att de flesta användare installerar ett typsnittsoptimeringsplugin, som t.ex. OMGF. Naturligtvis är Divi alltid ett bra alternativ för alla typer av typsnittsoptimering och hantering.
OBS! Det har kommit nya regler rörande Google fonta och GDPR så du måste kontrollera vad som gäller för just dig innan du använder Google fonts
Vi vill höra från dig. Använder du något av dessa tips för att optimera Google Fonts med WordPress? Låt oss veta i kommentarerna.
Utvald bild via Sammby / shutterstock.com