SĂĄdan gør du: Hastigheds­optimering af wordpress hjemmesider

Hastighedsoptimering af wordpress

11 tips og tricks til en hurtigere wordpress hjemmeside

Okay, så du har fået lavet en hjemmeside i WordPress, eller et lign. cms system. Men det er langsomt. Et langsomt site kan skæmme potentielle kunder væk. Heldigvis er der en række teknikker du kan implementere, som vil gøre en kæmpe forskel.

Mange af de tips jeg giver nu, vil være generelle tips til hjemmeside, og ikke nødvendigvis kun være egnet til wordpress.

Hvorfor skal du hastighedsoptimere din hjemmeside eller webbutik

Der er adskillige ĂĄrsager til at du skal optimere hastigheden pĂĄ din hjemmeside eller eCommerce webshop.

  1. Søgesider som f.eks. google giver dig en score i forhold til hurtige og langsomme sider. Så vil du højre op i søgeresultaterne og øge dine chancer for at blive set. Så er bør hastighed være en prioritet.
  2. Studier har flere gange vist at en åbningshastighed på mere en 2 sekunder, ofte resultere i a 47% af dine besøgerne springer fra. Så, for at beholde omkring halvdelen af besøgende interreseret, burde du øge hastigheden på din wordpress hjemmeside.
  3. Online kunder er utålmodige, meget utålmodige, derfor skal dine sider helst loade på under 1 sekund for at gøre din forretning mere profitable.

Hvor tester jeg min hjemmeside?

Du skal teste og analysere din hjemmeside løbende, og gerne individuelle sider. Før at du kan vide, hvilke faktorer som vil gøre en forskel for ligenetop dit site.

  • Størrelsen af siden
  • Antallet af filer
  • Er den cached og komprimeret
  • og til sidst hvordan er den hosted (lokalt pĂĄ en server eller pĂĄ en delt server løsning.

Normalt arbejder man med en benchmark udefra en test af forsidens hastighed. Du kan teste dit site via:

11 tips til hastighedsoptimering
af wordpress hjemmesider

1. reducer størrelsen på billeder

Kigger vi på hvor meget din hjemmeside fylder, så er billeder en af de største faktore. Derfor er det også noget af det første du skal kigge på.

Med et simpelt trick kan du nemlig reducere størrelsen på dine billeder med over 50%, uden at gå på kompromis med opløsning og kvalitet.

  1. Vælg den rigtige opløsning. Max 2500×2500 px
  2. Brug det rigtige filformat

Normalt til billeder bruger vi jpg og png (png hvis der er gennemsigtighed), men bruger du i stedet .webp formatet, kan du få en komprimering på op til 95% uden tab. Webp kan gemmes i photoshop via et plugin eller via hjemmesiden squoosh.app.

At gå igennem alle billeder manuelt og optimere dem via photoshop, squoosh.app eller andre værktøjer, kan tage lang tid, men her har du bedst kontrol over kvaliteten på dine billeder og grafik, samtidig med at du sparer på serverens processoren, hvilket kan være meget langsom til billedekonverteringer.

Tager det for lang tid? Så findes der heldigvis plugins som kan gøre det. Men de kan gøre din hjemmeside langsom imens at de arbejder.
Et par af de nævneværdige plugins er:

Plugin billedkonvertering til webp er oftes kategoriseret som en betalings feature, derfor få du det resultat ved selv at gøre det. Men uanset hvilken metode du vælger, vil du reducere størrelsen på din hjemmeside kraftigt, og dermed få din side til at loade hurtigere.

Dog skal dit fremhævede billede altid være i jpg, det skal det være for at Facebook og andre socialemedier kan finde det. 

Få reduceret størrelsen på dine billeder med over

0 %
Med webp formatet

2. Brug SVG til logoer og grafik

Logoer eller andet vektorbaseret grafik kan gemmes som svg, men sørg for at teste om logoet ser rigtigt ud bagefter. SVG kan få dit logo helt ned på få kilobytes, og det bil stå knivskarpt på alle skærme uanset oplevelse. WordPress understøtter ikke .svg, det kan du få den til via et plugin eller tilføje dette stykke kode til dit tema functions.php fil.

				
					// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }

  $filetype = wp_check_filetype( $filename, $mimes );

  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];

}, 10, 4 );

function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );
				
			

SVG filer

Raster/pixel grafik v. vektor. SVG filer indeholder imodsætning til almindelige billeder vektorgrafik, dvs. formler for formerne i dit logo. Resultatet er en ultra kompakt filtype som stĂĄr knivskarpt uanset opløsningen. I eksemplet nedenfor kan du se at SVG filen stĂĄr mærkbart skarpere end png filen, og den fylder 50% mindre. Skulle PNG filen stĂĄ ligesĂĄ skarp, ville den fylde over 500 gange sĂĄ meget. Mine data fra flere sider viser at du kan spare op til 1mb pĂĄ hver side, ved at skifte logo og grafik ud med svg’er, nĂĄr du skal lave hastighedsoptimering af wordpress hjemmesider

PNG logo fil 100x100px
SVG logo fil 100x100px

3. Minify dine css og js filer

Hvis du har testet dit site via PageSpeed Insights vil du formentlig have set en besked om minimering af størrelsen på din CSS og JS filer. Hvilket betyder at en reducering af størrelsen og antallet af CSS og JS filer, kan være med til at forbedre loadhastigheden af dine sider.

Har du selv bygget dit wordpress tema kan du selv fikse det via guides lavet af google. Hvis ikke kan du bruge plugins f.eks Autoptimize, der er blandt de mest populære. Husk altid at teste din side løbende, når du installere performance plugins eller ændre i dets indstillinger.

4. Aktiver caching

Cache er midlertidige samlede filer af dine sider og dit indhold. Disse filer vil spare dine besøgende for en masse forespørgsler til en række enkelt filer og databaser, og i stedet få præsenteret en eller enkelte samlede komprimerede filer.

Caching minimere altså både antallet af forespørgsler og størrelsen op dine filer, dette koncept kan også bruges på WordPress hjemmeside til optimering af performance og få hjemmesider til at loade hurtigere.

Der findes flere metoder at aktivere WordPress cache, nogle af de mest populære er:

Men vær forsigtig nogle WordPress temaer og temabyggere understøtter ikke al form for caching og data komprimering. Derfor skal du altid teste din side løbende, imens at du går indstillingerne igennem.

5. FĂĄ hosted dine billeder og css filer via et CDN

Ligesom Køgebugt motorvejen bliver presset af, alle de biler der skal igennem. Så kan din server blive langsommere, hvis at den skal sende mange filer ud til flere besøgende på en gang. Heldigvis kan det løses med et CDN netværk, her får du via en service dine statiske filer placeret på flere servere, på den måde får vi placeret filerne på ud på flere motorveje, og dermed får dine besøgende dem leveret hurtigere.

Mange cache plugins har mulighed for CDN opkobling, to af de mest populære løsninger er Cloudfare og Bunny.net

Men der findes også en all in one service, det er en dyr service for de fleste. Men kræver ingen tech skills, og kan prøves gratis i 14 dage.

6. Ryd op I wordpress databasen

Vi kender alle sammen til at have et skab fyldt med rod, og vi ved lige præcis hvad der er og hvor det er derinde. Men at finde ligepræcis det vi skal bruge kan tage tid. Det er lidt det samme med databaser. Derfor er det vigtigt at få ryddet op. Og det er heldigvis ret nemt.

  1. Fjern inaktive brugere
    Gøres under brugere
  2. Slet gamle eller irrelevante kommentarer
    Under kommentarer
  3. Slet spam
    Under kommentarer og evt. email log
  4. Slet kladder du ikke skal bruge og tøm papirkurven
  5. Rens indlæg og sider for tidligere gemte versioner
    Brug WP Revisions Control til at sætte en begrænsning for antallet af gemte side/indlægsversioner, og gĂĄ herefter alle dine sider/indlæg igennem for rense siderne for gemte versioner “Purge theese revisions“.

Hvis du gennemføre nogle af disse trin, kan de føre til en reducering af størrelsen på dine databaser og web filer, og dermed øge hastigheden på din WordPress hjemmeside.

7. Brug et letvægtstema

Temaer sælger sig ofte på en masse bling og blær, som slideshows, widgets, animerede ikoner og en masse andet pral, alt sammen for at fange dit øjes opmærksomhed. Men husk at alle de ting fylder, og giver tungere side filer. Så vil du lave hastighedsoptimering af wordpress hjemmesider, bør du vælge dit tema med omhu.

På de fleste af mine hjemmesider benytter jeg Hello, det er et hurtigt, letvægts og meget tilpasningsvenligt. Og det virker rigtig godt sammen med Elementor, mit foretrukne valg af visuelle wordpress byggere.

8. SlĂĄ pingbacks og tracksback fra

Pingbacks og tracksback er kerne funktioner i wordpress, de er der for at levere notifikationer til dig når der linkes til din side. Brugbart ja, men bruger du samtidig værktøjer som f.eks. Google Webmaster Tools eller lign. Så får du samme informationer, men 2 steder fra. Derudover er funktionen også ofte misbrugt til DDoS angreb. At gøre sit site mere sikkert, giver også plus på kontoen når vi snakker om hastighedsoptimering af wordpress.

Alt du skal gøre er alt gĂĄ ind pĂĄ din adminside → Indstillinger → Diskussion ogsĂĄ bare fravælge “

9. Deaktiver og/eller slet plugins

Igen handler det om at rydde op. Spare plads og server ressourcer.
Er du lige begyndt med en ny hjemmeside, bør du overveje om et plugin kan erstattes med en funktion i functions.php. Og giver dit plugin dig problemer, virker det ikke som hensigten eller bruger du det ikke alligevel, så slet det. En god regel er at begrænse antallet af plugins til færre end 20.. 

10. Aktiver GZIP komprimering

Compressing files on your local computer can save a lot of disk space. Similarly, for the web, we can use GZIP compression. This maneuver will dramatically reduce the bandwidth usage and the time it takes to gain access to your website. GZIP compresses various files so that whenever a visitor tries to access your website; their browser will first have to unzip the website. This process brings down the bandwidth usage to a considerable extent. You can use either a plugin like the PageSpeed Ninja, which enables GZIP compression, or add the following codes in your .htaccess file.
				
					# BEGIN gzip
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# END gzip
				
			

11. Vælg et bedre webhotel

Den største spiller der bestemmer hastigheden på din hjemmeside er dit webhotel. Det kan virke fedt med et billigt webhotel med ubegrænset plads, trafik, mail-adresser, domæner etc. til kun 50 kr. i måneden. Men så har man misset pointen, man køber sig ind på en server delt med mange andre, og der kommer en flaskehalseffekt på tidspunkter med høj trafik. Serveren bliver ustabil og nedetider oftere, supporten er ringe da mængden af solgte webhoteller er vigtigere end kvaliteten.

Jeg bruger hetzner.com som partner til webhoteller, de levere et solidt produkt med fokus på kvalitet, sikkerhed og miljø.

Konklusion

De største fordele i en forbedring af din hjemmesides hastighed, er en bedre brugeroplevelse og fastholdelse af besøgende. Sagen er den samme uanset om de er mobilbrugere eller sidder med en computer. 

De største fisk når det gælder hastighedsoptimering af wordpress hjemmesider, er webhotel, billeder, grafik/logo 

Mit resultat pĂĄ Google PageSpeed Insight er typisk mellem

0 /
0

Sidehastigheder på under 1 sekund og en størrelse på kun 1-3 mb

Nu er det din tur. 

Book et møde

Skal du have hjælp

FĂĄ et hurtigt og uforpligtende opkald

Vil du ringes op?