Formål

Denne guide beskriver i detaljer, hvordan du på en WordPressside kan reducere den tid, det tager, fra brugeren klikker på et link på din hjemmeside, til siden rent faktisk vises. Det er meget tænkeligt, at du kan reducere tiden til mere end det halve, men det kræver selvfølgelig, at siden ikke allerede er hurtig, fx fordi den ikke har ret meget andet end nogle sider med tekst og lidt billeder.

En side bør loade på maksimalt to sekunder. Et eksempel kan vise, hvad du kan opnå med den optimering, guiden beskriver:

Hjemmesiden, du ser lige nu, findes i to versioner: livesiden og en reserveside. Siderne har nøjagtig det samme indhold. Billederne herunder viser forskellen på en optimeret side og en ikke-optimeret side. Det øverste billede er fra livesiden, mens det nederste er reservesiden. Den optimerede side loader på en fjerdedel af tiden for den ikke-optimerede side. Og så er de 433 billeder på livesiden endda reduceret fra 43,2 Megabytes til 16,6 Megabytes, hvilket svarer til 62 pct. Var det ikke sket, havde livesiden haft en dårligere load time.

Resultaterne herunder viser mit første gennemløb den 30. december 2017 med Pingdom. Du kan sagtens få andre resultater for begge siderne, men størrelsesforholdet bør være nogenlunde det samme.

Reduktionen af billeder er væsentlig, så den beskrives også. Hvis du ikke vil gå gennem alle trinnene, kan du evt. nøjes med at optimere dine billeder. Det betyder meget. I trin seks er beskrevet forskellige muligheder. I trin syv er det beskrevet, hvordan du bruger YouTube til håndtering af videoer.

Guiden er baseret på et onlinekursus på denne side. Den er nok ikke for begyndere, men jeg hjælper gerne. Det er dog intentionen at give dig et værktøj, som du bare skal gå igennem trin for trin og således kan klare dig selv.

Fejl?

Der visse, der mener, at der er flere fejl i guiden. Det kan muligvis være korrekt. Jeg henholder mig dog til, at guiden er en 100 pct. afspejling af onlinekurset, at det virker hos mig, og at det har reduceret min svartid til en fjerdel. Al brug er – som ved alle andre guides på siden – på eget ansvar.

Er WordPress i sig selv problemet?

Mange siger, at en WordPressside altid vil være langsom, og at der ikke kan gøres noget ved det. Herudover skyder mange på antallet af plug-ins. Begge dele er usandt, og det er lige bevist. På den optimerede side er der 17 plug-ins, og på min egen blog er der 23 plug-ins.

Hvis du søger med Google på følgende ord “WordPress optimering hastighed”, kommer der mange resultater fra virksomheder, der – for en net sum – gerne vil hjælpe dig. Denne guide beskriver, hvordan du gratis kan opnå de samme resultater.

Testværktøjer

Hver gang du har gennemført et trin, bør du teste hastigheden for at se, om du er på rette spor. Du skal bruge følgende tre sider:

  • GTmetrix: Denne side er meget brugervenlig, da den viser, hvor man skal sætte ind. Det er især tydeligt, når man kigger på punktet ”Waterfall”. Mange testværktøjer viser alle problemerne, men anviser ikke løsninger. Hvis du laver en konto og logger ind, kan du en gang for alle gemme “Test server region”. Den nærmeste er London.
  • Pingdom.
  • Webpagetest.

Tests skal køres fx fem eller seks gange for at få det rigtige resultat, selvom det ikke er en eksakt videnskab. Ryd op i dit midlertidige lager, der også kaldes cache (*), med alle tre værktøjer inden testen. Det drejer sig om:

  1. Cloudflare
  2. Autoptimize
  3. WFPC (WP Fastest Cache).

* En cache et “midlertidigt lager”: i forbindelse med en browser (som du sidder og kigger på nu) er en cache den funktion, der gemmer siden, så den er hurtigere at vise, når du skal bruge den igen. Herefter bruger jeg ordet cache.

Trin 1: Headers

Headers specificerer perioden (uger, måneder osv.), hvor din browser ikke skal hente eksempelvis billeder, stilark (CSS), javascript eller andet, som ikke er ændret. Hvis der ikke er sket ændringer, er der ingen grund til at hente dem ind igen.

Følgende kode skal sættes ind i din .htaccess-fil, der ligger i /public_html. Linjer, der starter med #, er kommentarer. Det kan fx være rart at vide, hvornår man har indsat koderne. Det kan også være rart at vide, hvor modulet begynder og slutter.

#Begin Expires headers HBS 2017-12-30
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
#End Expires headers HBS 2017-12-30

Hvis der er eksterne links, påvirkes de ikke: Du kan ikke gøre noget ved det, der ligger på andres hjemmesider, kun det der ligger på din hjemmeside.

Trin 2: Query strings

“Query strings” er frit oversat en del af en webadresse/URL, der spørger efter et indhold i din database. Hver gang, der spørges, øges loadtiden, da browseren så er beskæftiget med det og ikke kan foretage sig andet. Derfor skal disse strenge i videst muligt omfang enten reduceres eller helst fjernes, men sidstnævnte er sjældent muligt.

Hent og installer plug-inet: “Remove query strings”. Det skal bare installeres. Der er ingen opsætning.

Trin 3: Gratis CDN ved hjælp af Cloudflare

CDN betyder ”Content Delivery Network” altså nærmest “Levering af dit indhold via et netværk”, og det sker via Cloudflare, der har verdens hurtigste servere. Jeg anbefaler, at du skifter til Cloudflare, hvis du virkelig vil gøre noget ved din hastighed. Skift til dem her.

Start med at oprette en konto som vist til højre. Næste side viser, at du skal:

  1. Tilføje din WordPresside.
  2. Tilføje oplysninger om navneservere.
  3. Vælge en kontotype/plan. Her skal du vælge Free website.
  4. Opdatere navneservere.
  • Udfyld feltet med adressen på din WordPresside fx https://supportpcogandet.dk. Klik “Scan DNS Records”. Mens der scannes, vises en lille video. Det varer ca. 60 sekunder.
  • Efter scanningen klikker du på “Continue”.
  • Resultatet af scanningen vises, og du behøver som hovedregel ikke hverken rette eller tilføje noget. Klik “Continue”.
  • Vælg en plan: “Free Website”. Klik “Continue”.

Der kommer besked om de aktuelle DNS/navneservere (DNS som står for Domain Name System, altså navnene på de servere, hvor domænet/hjemmesiden ligger), og det vises, hvad de skal ændres til.

Når du har fået besked om de nye navneservere, logger du ind hos dk-hostmaster her, og taster de nye DNS’er ind. Du har sikkert på nuværende tidspunkt tre DNS’er, men hos Cloudflare skal du kun bruge to. Det er grunden til, at en af dem er beskrevet som “Remove this nameserver”.

Redelegeringen/viderestillingen sker inden for få timer, også selvom der fx er angivet 24 eller 72 timer. Når viderestillingen er sket, vil nedenstående sorte bjælke blive grøn, og så er du klar.

Trin 4: Tilføj plug-in Cloudflare

Tilføj et nyt plug-in til din WordPresside: Cloudflare. Udfyld settings/indstillinger med domænenavn, API-key (findes under settings) og mail-adresse.

Gå til webpagetest, og bemærk at der nu er en grøn knap i ”Effective use of CDN” yderst til højre.

Gå tilbage til Cloudflares website (ikke plug-inet), hvor der er forskellige blå knapper som vist herunder. Dem med en rød firkant, er dem, du vil komme til at bruge mest:

  1. Caching > Øverst kan man tømme cachen vha. Purge > Purge everything. Sæt Browser Cache Expiration til 1 month. Klik gerne på “Help” for at få en forklaring. Cloudflare er gode til at forklare og uddybe. Et senere plug-in (WP Fastest Cache) vil modificere dette, således at cachen alligevel tømmes, når der fx er en ny guide, et nyt indlæg på din blog eller andet nyt indhold.
  2. Speed:
    1. Auto Minify. Når du minimerer ressourceforbruget, fjerne du unødvendige eller overflødige gentagelser (redundans) uden at forstyrre browseren i dens arbejde. Sæt flueben i dem alle:
      1. JavaScript,
      2. CSS og
      3. HTML.
      4. Prøv at kigge i GTmetrix og se hvor meget det betyder for “Waterfall”. Det kan betyde virkelig meget.
      5. Sæt Rocket Loader til Automatic
    2. Crypto: SSL: Vælg Full.
    3. Page Rules. Lav en regel om at fx et http://-site opfører sig som et https://-site. Se billedet og bemærk wildcards i form af stjernerne (*) i den øverste række.

Trin 5: WP Fastest Cache (WPFC)

Tilføj plug-inet WP Fastest Cache. Slå først ”Rocketloader” i CloudFlare fra igen (findes under knappen Speed), fordi den ikke altid harmonerer med cacheplug-ins, og den har gjort sit job. Opsætningen kan se indviklet ud, men følg billedet. Det kan siges kort: Sæt alle de flueben der kan sættes:

Trin 6: Optimer dine billeder

Dette trin betyder meget for hastigheden på din side. Som nævnt i indledningen er denne hjemmesides 433 billeder reduceret fra 43,2 Megabytes til 16,6 Megabytes, hvilket er en reduktion på 62 pct. På min egen blog, som har kørt i ti år og rummer ca. 1.200 indlæg og 11.000 kommentarer, har jeg reduceret 900 billeder fra 437 Megabytes til 155 Megabytes. Det er en reduktion på 65 pct.

Jeg bruger plug-inet Imagify, som har den store fordel, at det også kan tage fat i alle de billeder, du allerede har uploadet og optimere dem. Det er vældig praktisk, når man har 900 “gamle” billeder.

Du finder de billeder, du som minimum bør arbejde med i GTMetrix’ faneblad Waterfall og i ”Optimize images” under PageSpeed. Målet er, at det skal se nogenlunde ud som på billedet herunder, som stammer fra min egen side.

Og så endda… der er stadig noget at arbejde med. Det har drillet (meget). Det er som om, de samme problemer dukker op igen og igen. Billeder, jeg har optimeret, vises stadig på listen over problemer i Waterfall. Jeg kender ikke løsningen.

 

Der er (mindst) to gode værktøjer til optimering af billederne

  1. Photoshop: Har du adgang til dette program, vælger du i fanen “Filer” > “Gem til web”, der rummer en hård komprimering, men du kan stille på den. En reduktion på 40 pct. så du lander på 60 pct. kan være et godt udgangspunkt.
  2. TinyPNG: Her uploader du dine billeder til en hjemmeside, der komprimerer dine billeder uden det mindste kvalitetstab. Siden er uhyre effektiv. Et billede reduceres fx med 6,3 Kilobytes, og du tænker måske, at det er ligegyldigt, men har man tusind billeder, betyder det meget. Den typiske kompression er mindst 60 pct., som billedet viser. Det kræver lidt ekstra museklik, men det er det værd. 7,2 kilobytes er ligegyldige, men 60 pct. er betydningsfulde.

Trin 7: Brug YouTube til videoerne

Hvis du ønsker en “levende” WordPressside, kan videoer være vejen frem. Problemet med dem er, at de typisk fylder mange Megabytes, som sløver din side. Løsningen er at gå vejen via YouTube.

Denne video viser, hvordan du opretter en Googlekonto og en YouTubekonto. De to konti er associerede.

Når du har oprettet kontoen/kontiene, logger du ind på din YouTubekonto og uploader din video. Når videoen er helt uploaded, viser YouTube det link, der er skabt til videoen. Det er selve linket, du trækker ind på din side eller ind i dit indlæg. Et link fylder ingenting. Derfor er dette en god løsning.

Jeg har fx nedenstående 4:46 minutter lange slideshow liggende. I den rå form på min PC fylder det 131.248 Kilobytes, som svarer til 128 Megabytes. Så stor en fil vil man ofte ikke engang kunne uploade til webhotellet.

Slideshowet er skabt med helt almindelige stillbilleder. Her er en guide til, hvordan kan gøres med det gratis Windows Movie Maker.

Trin 8: Trim databasen

Alle dine blogindlæg og sider gør, at din database med tiden kan blive “tung og sløv”. Det kan fx skyldes, at du har store mængder af gamle udkast til blogposter, sider, spamkommentarer, deaktiverede plug-ins, papirkurven er ikke tømt mv. Alt dette rydder du op i vha. plug-inet “WP Optimize”. Du trimmer databasen. Du bør gøre det jævnligt, hvis du vil sikre dig, at dine WordPresssider hentes hurtigt.

For en sikkerheds skyld bør du altid lave en backup af din database, inden du kører plug-inet eller foretager dig andet “farligt”. Databasen er “nerven og maven” i din WordPresside, derfor skal du sikre den med en backup. Selv vælger jeg den simple metode: Log ind på databasen, vælg alle tabeller og vælg Eksporter. Du skal sikkert ikke bruge eksporten/backuppen til noget, men den er god at have hvis nu…

Trin 9: To yderligere plug-ins

Jeg nævner yderligere to plug-ins, som jeg ikke er helt klar over betydningen af. De nævnes i kurset, men deres “eksistensberettigelse” er ikke dokumenteret.

  1. Heartbeat Control og
  2. Disable Emojis:

Hanne B. Stegemüller, 31. december 2017