Å optimalisere WordPress for fart er et av de viktigste grepene du kan ta for å være konkuransedyktig på Internett.
Hvis du lurer på hvorfor din WordPress-side er treg, eller du har et ønske om å forbedre hastigheten på din side, vil vi i denne veiledningen påpeke kritiske og viktige modifikasjoner som garantert vil gi din nettside en fartsøkning.
Å drifte nettsider er en kontinuerlig prosess som krever svært mye tid og arbeid. Tiden det tar for nettstedet ditt å laste påvirker hvor vellykket nettsiden din vil bli.
Optimalisering av nettsiden din for fart, er en av de mest kritiske komponentene i den digitale brukeropplevelsen.
Skiftene i den digitale hverdagen går raskt, så det er viktig at du hele tiden implementerer nye løsninger for fartsoptimalisering så snart de blir tilgjengelige. Bare slik vil du være konkurransedyktig i forhold til dine konkurrenter.
Google Analytics inkorporerer statistikk som sideinnlastingstid, oppslag og sidestørrelse for å rangere nettsider i sin søkemotor. Nettopp fordi dette er svært viktig i et innholdsdrevet digitalt samfunn.
Å være høyt rangert, kan rett og slett bety om din bedrift lykkes eller ikke.
Før vi går i gang med å optimalisere WordPress, anbefales det å sjekke status på ditt nettsted. Det finnes flere gode og gratis online-tjenester som du kan benytte. Ved å benytte disse gratisverktøyene vil du også få gode tips til hva du kan gjøre for å forbedre resultatene fra ditt nettsted basert på testresultatene.
Du kan sjekke ut Pingdom, GTMatrix og Google Pagespeed.
Valg av Webhost
Valg av host (leverandør) og servertype vil ha effekt på hvor rask din nettside vil være. Hvilken løsning du velger nedenfor vil derfor avgjøre hvor bra ditt nettsted blir i forhold til fart.
Shared Hosting kan sammenlignes med å bo i et leilighetskompleks. Alle beboerne i leilighetene må dele tilgjengelige serverressurser med hverandre. Dette inkluderer bla. CPU, minne og diskplass. Dette er klart det billigste alternativet og det de fleste starter med når de oppretter en nettside for første gang.
På en Virtual Private Server (VPS), blir du tildelt en fast del av ressursene. En VPS har i utgangspunktet langt færre brukere enn shared hosting. Dersom det eksempelvis er 5 beboere i et leilighetskompleks, vil alle brukerne på en VPS få 20% av serverressursene, slikt som CPU, minne og diskplass. Dette sørger for mer kraft og fleksibilitet enn å være på en delt konto, som shared hosting er. Denne løsningen koster selvfølgelig noe mer, men du får da en mer driftsoptimalisert løsning.
Dedikert Hosting kan sammenlignes med å eie et hus. Du har full tilgang til alle tilgjengelige ressurser på serveren. Ingen andre vil være i stand til å benytte ressursene, de er kun dine. Dette er en relativt dyr løsning, men dersom ditt nettsted genererer mye trafikk, er dette et must.
Valg av Webserver
Når det gjelder valg av webserver, er det stort sett 3 ulike varianter som benyttes: Apache, Litespeed eller Nginx. Denne veiledningen vil ikke se på fordelene mellom de ulike webserver-typene. Det finnes imidlertid masse informasjon der ute hvor dere kan lese om disse forskjellene.
Det som er klart, er at Apache er en aldrende løsning som nok kommer til å bli forbigått av både Nginx og Litespeed (Apache har i midlertid en så stor del av markedet av dette vil ta lang tid). Dersom du gjennom din webhost får muligheter til å eksempelvis kjøre Litespeed, ville vi ikke nølt med å bytte til denne typen webserver.
Vi på IM benytter selv Litespeed og har opplevd en radikal fartsøkning etter overgangen fra tradisjonell Apache-Webserver.
Valg av tema
Hvilket tema du benytter, vil ha stor betydning på hvor rask din nettside vil bli. Det finnes selvsagt mange gratis tema som du kan benytte, men disse er ikke alltid nødvendigvis optimalisert for fart. De som følger med i WordPress som default, er helt greie og raske nok, men ofte ønsker vi tema med litt mer funksjonalitet.
Vårt råd er at du finner et godt kodet tema som responderer raskt i en nettleser. Gjennom et enkelt Google-søk vil du raskt få en oversikt over aktuelle tema som er optimalisert for fart. Vi på IM har valgt å benytte oss av tema fra Elegant Themes, og vi kan varmt anbefale denne aktøren. Elegant themes har ca 80 ulike tema du kan benytte deg av. Vi har valgt å benytte temaet Divi på vår nettside. Disse temaene koster noen kroner, men det synes vi det er verdt.
Å optimalisere WordPress for fart, er en av de mest kritiske komponentene i en digital brukeropplevelse.
Utvidelser (plugins) – et onde eller et gode?
En vanlig årsak til at nettsiden din kan oppleves treg, er at du har for mange utvidelser installert. Hold antallet utvidelser til et minimum. Vær dessuten nøye med at de utvidelsene du benytter er godt kodet slik at det ikke går ut over hastigheten på nettsiden din.
Etter hvert som du begynner å bli flinkere i WordPress, kan du kanskje selv velge å implementere deler av funksjonaliteten i enkelte utvidelser direkte inn i kjernefilene til WordPress. Dette vil ha positiv innvirkning på farten til ditt nettsted. Husk bare på at du gjør dette i et child-theme.
Databaseoptimalisering
Bruk av utvidelser
En WordPress-database kan generere mengder med revisjoner, kommentarer, spam og brukerdata som tar opp svært mye plass i databasen din. Derfor må databasen optimaliseres og også vedlikeholdes med jevne mellomrom.
Hvis du først har bestemt deg for at det nå er på tide med en vårrengjøring av WordPress, er det også andre elementer du kan optimalisere enn kun selve databasen. Da bør du slette ubrukte utvidelser, bilder, temaer og fikse ødelagte koblinger. Alle disse tiltakene vil gjøre siden din raskere
Optimalisere databasen direkte
For å oppdatere databasen manuelt, logger du deg inn på CPanel. Her leter du deg frem til databaseverktøy. Gå deretter inn på phpMyAdmin for å optimalisere datbasen(e).
Gzip
Gzip-komprimering «pakker» nettsider på en webserver før sidene sendes til den besøkende. Dette sparer båndbredde og du vil umiddelbart oppleve en dramatisk nedgang i tiden en nettleser bruker for å åpne en nettside. Gjestenes nettlesere pakker automatisk ut sidene. Denne sammenpressingen og utpakking tar kun brøkdelen av et sekund og er et av de viktigste grepene du kan ta for å optimalisere WordPress for fart.
GZIP komprimering anbefales for alle typer tekstfiler som:
– HTML
– Tekstfiler (filtypen txt)
– CSS og Javascript
– Webtjenester, for eksempel JSON Du kan enkelt implementere Gzip-komprimering i Cpanel, slik den grafiske presentasjonen nedenfor viser:
Det anbefales ikke å benytte Gzip-komprimering på grafiske filer eller vanlige zip-filer. Disse filtypene er i utgangspunktet godt nok komprimert og du vil dermed ikke tjene noe spesielt på å komprimere dem. Tvert imot, kan du muligens oppleve en økning i tiden det tar å laste en side.
Post revisions (innleggs-revisjoner)
Hver gang du lager en ny side eller en blog-post i WordPress, så lagres det såkalte revisions/midlertidige utgaver i et visst tidsintervall. Disse revisjonene kan det være kjekt å ha dersom du mister informasjon som du ikke har fått lagret. Da kan du alltid velge en tidligere revisjon, en slags backup-løsning.
Disse utkastene tar imidlertid relativ stor plass i databasen, og det er begrenset hvor mange revisjoner av hver post vi egentlig trenger. Dersom du jobber med en lengre tekst som strekker seg over flere dager, så kan det fort bli mange revisjoner av posten eller siden du lager.
En rask nettside krever at databasen ikke inneholder unødvendig med informasjon, men det skal sies at WordPress er smart nok til å kun sjekke mot revisjons-databasen mens du redigerer filer. Så hvor mange revisjoner som er lagret skal i utgangspunktet ikke ha noe å si for hastigheten på siden din, med mindre det blir veldig mange av dem.
Derfor kan det være greit å redusere antallet revisjoner WordPress genererer. Vi på IM har valgt å gjøre dette, ved hjelp av noen kodesnutter vi har lagt inn i wp-config.php-filen vår. Denne filen finner du i roten av ditt nettsted ved å eksempelvis benytte Cpanel.
Dersom du ikke har opprettet et Child theme av nettsiden din enda, anbefales det at du gjør dette nå. Ikke forandre direkte i kjernefilene til temaet ditt. Alltid foreta forandringer i filene som du legger i child-themet ditt. Informasjon om hvordan Child themes lages og fungerer finner du her.
I koden nedenfor er det kun de to kodestrukturene som begynner med define på linje 1 og 2 du skal legge inn i filen din. Koden som er under dette ble kun tatt med for å vise at koden du legger inn i wp-config.php-filen må komme før ABSPATH-koden, ellers vil ikke den nye koden fungere.
define('AUTOSAVE_INTERVAL', 250); // seconds
define('WP_POST_REVISIONS', 3);
/** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
define('ABSPATH', dirname(__FILE__) . '/');
/** Sets up WordPress vars and included files. */
require_once(ABSPATH . 'wp-settings.php');
Koden ovenfor vil fungere slik at den kun lagrer dine utkast hvert 250 sekund, og det vil kun lagres 3 revisjoner av hver artikkel du lager. Du står selv fritt til å bestemme intervallet for lagring og hvor mange revisjoner du vil ta vare på. Noen velger også å fjerne revisjonene helt, men det er ikke anbefalt. Uansett hva du velger å gjøre vil WordPress alltid lagre minst en revisjon. Dersom du ønsker å fjerne alle fremtidige revisjoner, kan du legge inn koden nedenfor.
//disable WP Post Revisions
define('AUTOSAVE_INTERVAL', 250); // seconds
define('WP_POST_REVISIONS', false);Det er også mulig å begrense antallet revisjoner som lagres ved hjelp av en utvidelse. F.eks. WP Revisions Control. Men husk at store mengder utvidelser kan gjøre nettsiden din tregere.
Minify
Når en nettleser åpner siden din, laster nettleseren inn en rekke filer, inkludert HTML, CSS og Javascript. For at nettsiden din skal være raskest mulig, må koden i disse filene være så minimalistisk som mulig.
I utgangspunktet er kodestrukturen i disse filene skrevet for å bli lest av mennesker. Filene vil dermed inneholde tomrom, kommentarer og formateringer som datamaskinen ikke trenger for å kjøre koden. Koden trenger ikke å se fin ut for at datamaskinen skal kunne lese den. Heldigvis kan dette fikses. Metoden vi benytter for å fjerne det som er unødvendig kalles på engelsk for Minify.
Minify er et programmeringsbegrep som i utgangspunktet betyr å fjerne alle unødvendige tegn som ikke er essensielle for at koden skal utføres. Ved å forminske kodestrukturen vil vi dermed dramatisk øke innlastningsfarten av nettsiden i en nettleser. Dette er svært positivt for brukeropplevelsen og ikke minst i rangeringen av ditt nettsted i Google.
Internett kan sammenlignes med en motorvei der en viss mengde trafikk skal kanaliseres. Selv om båndbredden til de fleste i dag er meget god, er det likevel smart å benytte teknikker som genererer filer og kodestrukturer som tar minst mulig plass.
Legg imidlertid merke til at enkelte tema, som for eksempel Divi fra Elegant Themes, har denne funksjonaliteten innebygget. Dette betyr at du ikke trenger å legge inn funksjonaliteten minify. I andre tema som ikke inneholder denne funksjonaliteten kan det være en idé å forsøke å få det bygd inn i temaet ditt. Dette kan gjøres ved hjelp av utvidelser eller et script som legges i functions.php-fila.
Dette scriptet er mye brukt, men skrevet i 2015 (og sannsynligvis basert på denne varianten fra 2011), så det kan kreve oppdateringer/endringer for å fungere (se f.eks. kommentarer her).
PHP-versjon
PHP 8 er den nyeste versjonen av PHP og ble utgitt 26. november 2020. PHP 8 er en stor overhaling av PHP og inneholder store mengder funksjonalitet som ikke finnes i tidligere versjoner.
Så lenge du bruker minimum PHP 7.4, så vil du ha god ytelse på nettsiden din. PHP 7.0 inneholder en del endringer som drastisk forbedret hastigheten i PHP. Dette fordi PHPNG (PHP Next Generation) ble slått sammen med PHP 7. PHPNG er kjernen i PHP og erstattet Zend Engine2, som ble brukt i PHP 5.x. PHPNG er skreddersydd for mer effektiv bruk av minne og ytelse, noe som fører til at ting går mye raskere. Illustrasjonen nedenfor viser klare ytelsesforbedringer ved bruk av PHP 7, kontra PHP 5.6, som var forrige versjon av PHP.
Resultater fra målinger viser at PHP 7 er omtrent 2-3 ganger raskere enn PHP 5.6 og i noen tilfeller til og med raskere enn HHVM (et populært alternativ til PHP).
Å forandre PHP-versjon gjør du enkelt inne i CPanel dersom din host har lagt til rette for dette. Trykk først på ikonet som ser omtrent ut som illustrasjonen nedenfor.
Deretter kan du forandre hvilken PHP-Versjon du ønsker å kjøre på, som vist nedenfor. PHP 8.0 er den nyeste versjonen av PHP 8, mens 7.4 er den nyeste versjonen av PHP 7.
Dersom du av en eller annen merkelig grunn skulle få problemer etter at du har skiftet PHP-versjon, kan du alltids gå tilbake til forrige versjon. Legg imidlertid merke til at det vil kunne ta opp mot 5 minutter før den nye versjonen av PHP er klar til bruk.
Pingbacks og Tracebacks
Pingbacks og tracebacks er en funksjonalitet i WordPress for å finne ut om noen har lenket til nettstedet eller bloggen din. Tracebacks er manuelle mens pingbacks er automatiske. Problemet med disse funksjonalitetene er at 99% av alle tracebacks og pingbacks er spam. Da sier det seg selv at dette kan generere så mye spam i databasen din at det potensielt kan gå ut over hastigheten på nettstedet ditt. For å unngå dette problemet kan du rett og slett fjerne denne muligheten direkte i WordPress.
Gå til Innstillinger> Diskusjoner for å deaktivere pingbacks og tracebacks.
Uansett om du krysser av for at du ikke ønsker at pingbacks og tracebacks skal være aktivert, så vil du uansett kunne oppleve å få noe spam. Du kan imidlertid benytte en utvidelse for å avhjelpe med dette. Akismet kommer ferdig installert på en ny WordPress-installasjon, så alt du trenger å gjøre er å registrere deg med en API-nøkkel. Denne er gratis. Vi har meget gode erfaringer med å benytte Akismet.
Dersom du ikke ønsker at besøkende skal kunne kommentere på nettsiden din, så kan dette slås av i samme innstillingsfane som der du slår av tracebacks og pingbacks.
Cache
Jeg tror vi trygt kan si at Cache er det mest populære grepet man kan gjøre for å optimalisere WordPress for fart. Dette er en av de mest grunnleggende teknikkene du kan implementere for å redusere database-belastningen og samtidig sørge for at nettsiden din reagerer raskt.
Innenfor cache, har vi to ulike cache-metoder: server-side cache og cache på klientsiden. Det er viktig å implementere begge cache-typene på ditt nettsted for å sikre optimalisert fart og brukeropplevelse.
Client-side Cache
Å implementere cache på klientsiden, innebærer at du gir nettleseren beskjed om hvilke data den skal lagre, og hvor lenge disse dataene skal lagres.
For å kunne legge til rette for at mest mulig av din nettside blir cachet, og slikt sett vil lastes raskere i en nettleser, kan vi gjøre noen forandringer i det vi kaller for .htaccess-filen.
Ved å legge inn en kodestruktur i .htaccess-filen som forteller nettleseren hva som skal caches/lagres, betyr det at vi legger inn utløpsdatoer i headeren på siden. På engelsk heter dette «leveraging browser caching». Dette vil da fortelle nettleser hvor lang tid disse filene skal «leve» (hvor lenge nettleseren skal lagre dem). Denne måten å drive cache på er et høyt prioritert kriterium i f.eks. Google Pagespeed-testen, som jeg nevnte innledningsvis.
Nedenfor finner du en kodestruktur som du kan legge inn i .htaccess-filen din. Men først må vi sørge for at du finner filen. For å finne .htaccess- filen din, logger du deg inn i Cpanel–> File Manager –> Public_html –> Gå til Settings og huk av for; Show hidden files, ellers vil du ikke kunne se .htaccess-filen din.
Deretter lokaliserer du din .htaccess-fil og åpner den. Legg deretter inn koden nedenfor og trykk lagre til slutt. Du kan legge inn koden nedenfor hvor som helst i .htaccess-filen din.
<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 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
# Webfonts
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
</IfModule>Server-side Cache
Når det gjelder server-side cache i WordPress, snakker vi egentlig om fire ulike typer cache for å gjøre siden vår raskere. Forskjellene forklares i korte trekk nedenfor.
Side (page) Cache Sidene dine vil lagres som HTML-filer på din lokale server og vil vise statiske HTML-sider til de besøkende (Dette er tidligere genererte data). HTML er betraktelig raskere enn PHP, som er det WordPress vanligvis serverer nettsiden via.
Database Cache WordPress fungerer på en slik måte at det foretas spørringer mot databasen kontinuerlig når besøkende går inn på nettsiden din. Det sier seg selv at dette blir lite effektivt. Hvorfor skal vi kjøre de samme spørringene mot databasen hele tiden? Ved å benytte database-cache, lagres resultatene av spørringene lokalt på serveren, og dette genererer raskere søkeresultater for de besøkende.
Objekt Cache Uten å gå for mye i detaljer her, så er dette en intern API av WordPress som cacher komplekse dataspørringer.
Opcode Cache Lagrer kompilert PHP-kode mellom forespørsler. PHP-filer er i utgangspunktet et sett med instruksjoner til en kompilator. Ved å benytte cache, øker vi hastigheten som kompilatoren bruker for å generere kjørbar kode for web-serveren.
En enkel måte å sørge for at alle aspektene ovenfor blir ivaretatt, er å installere en utvidelse som gjør jobben for oss. Disse utvidelsene har avansert funksjonalitet, men stort sett kan de kjøres «out of the box» for vanlige brukere. Dersom du har tenkt å finjustere internt i utvidelsene, anbefales det at du tar backup og leser deg opp på de ulike funksjonalitetene før du foretar en installasjon av slike utvidelser.
Cache-utvidelser
WP Super Cache. Dette er en av de mest populære cache-utvidelsene for WordPress. Kort forklart fungerer WP Super Cache ved å generere statiske HTML-filer av nettsiden din. Hvor lenge disse statiske sidene skal «leve» bestemmes av intervallet du angir i instillingene på utvidelsen.
W3 Total Cache W3 Total Cache utvidelsen er mer egnet for høyt trafikkerte nettsteder. Den har et bredt utvalg av innstillinger og er nok mer et alternativ for de som absolutt vet hva de holder på med. Dersom du velger dette alternativet, les deg godt opp på hva de ulike funksjonene gjør. Ikke glem å ta backup før du setter i gang med å modifisere i innstillingene.
Litespeed Cache Denne utvidelsen kan kun benyttes av Litespeed web-servere. Dersom du kjører på standard Apache-server, skal du altså ikke benytte denne utvidelsen.
CDN
Content Delivery Network (CDN) er en tjeneste mange nettsider benytter for å distribuere statiske filer som CSS, javascript, bilder og filer bort fra hovedserveren. Denne prosessen gjør at nettsiden din vil lastes raskere og er et viktig steg på veien mot å optimalisere WordPress.
Kort forklart fungerer dette slik at dersom din serverhost er lokalisert i Norge, og en bruker i New York prøver å laste nettsiden din, vil det å benytte en CDN føre til at alle de statiske filene vil lastes i fra et datasenter som ligger nærmest mulig New York. Fordelen med slike CDN-tilbydere er nemlig at de har et stort antall lokasjoner av servere der dine filer kan ligge lagret. Det sier seg selv at dette vil generere en langt raskere nettside og brukeropplevelse ettersom de statiske filene nå ikke trenger å lastes sammen med selve nettsiden.
Det finnes etter hvert mange gode aktører som tilbyr CDN-løsninger. De mest kjente er kanskje Stackpath CDN og CloudFlare. Sistnevnte tilbyr en gratisversjon med redusert funksjonalitet. Flere serverhoster har i den senere tid implementert Cloudflare- funksjonalitet direkte inn i Cpanel, slik som PROISP.
CloudFlare har tidligere hatt problemer med å fungere på nettsider som har et SSL-sertifikat (HTTPS), men dette skal ikke lengre være et problem. Bildet nedenfor viser ikonet du kan benytte i CPanel for å integrere CloudFlare på ditt nettsted.
AMP
Mange benytter i dag mobiltelefonen til å lese innhold på Internett. I 2015 startet Google et konsept som de kalte Accelerated Mobile Pages. Kort sagt AMP.
Formålet er selvsagt at dette skal generere raskere nettsider på mobiltelefon for brukerne.
AMP skal i prinsippet føre til at nettsider lastes umiddelbart på mobilen, men dersom du har en godt optimalisert nettside kan den være kjappere enn en nettside bygd på AMP.
Google prioriterte lenge nettsider som brukte AMP i søkeresultatene sine, men har nå gått bort fra dette, og prioriterer nettsider som er kjappe, uansett hva slags rammeverk de bruker.
Hvis du ønsker å benytte deg av AMP, så finnes det flere utvidelser du kan benytte i WordPress, men dette er ikke en nødvendighet. Som nevnt kan man fint bygge raske nettsider uten å benytte AMP. Husk uansett alltid på å velge utvidelser som blir oppdatert med jevne mellomrom og sjekk at de er kompatible med din versjon av WordPress.
Størrelsen
En vanlig årsak til at mange nettsider er trege, er at selve nettsiden er blitt for stor. Ved å benytte verktøy som Pingdom, Google Pagespeed og GTMatrix vil du raskt få en indikasjon på den totale filstørrelsen på nettstedet ditt.
Oversikten nedenfor gir deg en pekepinn på hvor bra ditt nettsted er.
- Under 500kb er utmerket
- Under 1MB er bra
- 1-3 mb er akseptabelt
- 3MB pluss krever handling
Den største synderen når det kommer til at nettsider blir for store og tunge, er bildene du benytter. Men hva hadde vel et nettsted vært uten bilder? Som en regel kan vi si at bilder ikke bør være større enn 100 kb og at du bør lagre bildene som JPEG. Det holder imidlertid ikke å kun finne bilder på nettet som du laster opp til din egen nettside. Her er det en rekke grep vi kan gjøre for å få nettsiden vår ned i en akseptabel størrelse slik at sidene våre laster raskere. Vårt nettsted havner omtrent midt på treet når det gjelder total størrelse, ifølge Pingdom Tools.
Vi kan selvsagt redusere størrelsen på noen av våre bilder enda mer for slikt sett å få ned den totale størrelsen på nettsiden, men ofte blir det slik at vi bevisst foretar et valg om at enkelte bilder skal ha en litt bedre kvalitet. Da øker selvsagt størrelsen på nettsiden.
Ingen er uenige i at bilder bringer liv til innholdet på nettstedet ditt. De engasjerer og har svært mange viktige funksjoner.
Men hvis bildene ikke er optimalisert, kan de skade mer enn å hjelpe. Før du laster opp et bilde på nettsiden din, anbefaler vi at du bruker et bildebehandlingsprogram for å optimalisere bildene dine for web. Det finnes flere slike programmer du kan benytte som Photoshop, Paint.NET og Gimp. De to sistnevnte er gratis. Vi benytter i denne veiledningen Photoshop, som dere har tilgang til via skolen.
I utgangspunktet kan bilder ha en relativt stor filstørrelse. Men basert på bildeformatet og komprimeringsgraden du velger i et bilderedigeringsprogram under lagring, kan du redusere bildestørrelsen dramatisk. Vi anbefaler at du bruker «save for web«- funksjonaliteten i Photoshop til å redusere bildestørrelsen på JPEG-filene dine. Filen under er redusert fra 1.22 mb til 86 kb uten at du ser en nevneverdig reduksjon i bildekvaliteten. Det er litt vanskelig å se på bildet under, men bruk gjerne lupe 🙂
Det sier seg selv at med en så stor reduksjon i filstørrelsen, vil siden din laste mye raskere. Har du mange bilder på nettstedet ditt, noe de fleste nok har, kan besparelsene her bli astronomiske. Tips: Dersom du er på jakt etter bilder du kan laste ned på en lovlig måte, benytt gjerne freepik.com, pixabay.com eller unsplash.com
Lazy Load
Ved å benytte Lazy load- funksjonalitet, forteller vi nettleseren at bildene ikke skal lastes i nettleservinduet før brukeren faktisk har skrollet seg ned til der bildene befinner seg. Det er ingen vits i at nettleseren skal generere data som brukeren kanskje ikke kommer til å se.
Det finnes mange utvidelser der ute som gjør denne jobben for deg. Sjekk ut de ulike alternativene her.
Komprimere bilder
For å sørge for at bildene på nettsiden din tar minst mulig plass bør du ta i bruk en utvidelse som optimaliserer JPEG-kompresjonen på bildene dine og stripper ut metadata. Sjekk denne listen for gode bilde-optimaliserings-utvidelser.
Skaler bilder
Generelt kan vi si at det er dårlig praksis å bruke HTML til å skalere bildene på nettsiden vår. Dette vil også føre til at leseren av nettsiden må vente lengre på at bildene lastes og det genereres mer unødvendig data.
Bruk heller et bilderedigeringsprogram til å gi bildene dine den nøyaktige størrelsen de skal ha. Da sørger du for at du har en nettside som fungerer mer optimalt.
CSS Sprites
Hvis et nettsted har mange små bilder, vil hvert bilde kreve sin egen HTTP-forespørsel mot databasen. Hver forespørsel mot databasen vil skape ventetid.
Ved å benytte CSS sprites samler vi på en måte alle småbildene i en større fil for så å benytte CSS til å velge riktig bit av spriten som skal vises på nettsiden din. Dette reduserer ikke selve mengden av data som nettleseren må laste ned, men det kutter drastisk ned på hvor lenge forespørselen mot databasen det tar. Nå er det tross alt kun en fil som det utføres spørring mot, og ikke flere.
Det finnes mange måter å generere slike CSS- Sprites, men den enkleste er kanskje CSS Sprite Generator.
Legg imidlertid merke til at CSS-Sprites krever litt kunnskap om CSS og HTML. Hvis du er komfortabel med å redigere i CSS–filer, er dette et godt trekk for å øke hastigheten på siden din. Sørg imidlertid for å ta backup før du begynner å modifisere enkeltfiler i WordPress, og pass på at du har et child theme aktivt før du gjør endringer.
Hotlinking
Hotlinking er en metode andre nettsider benytter for å vise dine bilder på sitt eget nettsted. Problemet med dette, er at de stjeler ressurser fra din webserver. Dette vil utvilsomt kunne gjøre din nettside tregere. For å forhindre dette kan du logge deg inn i CPanel og velge at hotlink protection skal være aktivert.
Du kan også benytte kode direkte i .htaccess- filen din for å stoppe hotlinking. Koden nedenfor gir et greit utgangspunkt, men du må selvfølgelig legge inn din egen nettadresse der det står yourwebsite.
/* hotlink blocking */
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourwebsite.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?otherapprovedwebsite.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [F]Om du velger å gjøre dette i CPanel eller i .htaccess, er helt opp til deg. Begge metodene fungerer like godt.
CSS og JavaScript
Alle moderne nettsider består av CSS og JS. Men ikke alle temaer som er utviklet til WordPress tar høyde for hvor CSS og JS skal plasseres i temastrukturen for å være raskest mulig. Kort forklart, uten å gå for detaljert inn i dette, bør CSS-referanser befinne seg helt i toppen av nettsiden og JS i bunnen. Dette vil føre til at du vil få en raskere innlasting av nettsiden din. Både Pingdom Tools, Google Pagespeed og GTMatrix vil sjekke om temaet ditt er satt opp på en best mulig måte.
For å oppnå denne effekten er det enkleste å benytte en utvidelse som f.eks. Autoptimize.
Avsluttende ord
Nettstedets fart er noe som alle WordPress-brukere må ta på blodig alvor. Ingen gidder å vente på en treg nettside i dagens samfunn.
En lynrask nettside vil hjelpe på din rangering i Google, holde de besøkende fornøyde, og vil resultere i flere delinger og eventuelle salg.
Selv om mye av ordbruken i denne tutorialen kanskje bar preg av nye ord og uttrykk og en slags teknisk diskusjon, så ikke la det skremme deg.
Hvor optimalisert du ønsker at WordPress skal bli, er avhengig av en rekke faktorer. Om du ikke umiddelbart klarer å få implementert alle tipsene i denne tutorialen, vil du uansett kunne oppleve en svært mye raskere nettside om du bare får implementert noen av tipsene.
Jeg anbefaler at du tester ditt nettsted med f.eks. Pingdom tools både før og etter at du foretar optimalisering av WordPress for å sjekke etter om forandringene gav resultater.
Det finnes også flere tips og triks du kan gjennomføre for å gjøre siden din raskere, og har du kommet så langt at du allerede har fått implementert de fleste tipsene her på ditt eget nettsted, da vil du utmerket selv klare å finne den informasjonen du trenger på nettet.
Lykke til!