Øget hastighed på din hjemmeside - sådan gør du

Vejen til et hurtigere website er ikke en lige linje.

Hastighedsoptimering er ikke en engangsforteelse, så der er nogle procedurer, du skal vende tilbage til igen og igen for at sikre, at du holder trit. Nogle kan du dog helt springe over, for i sidste ende har hvert website forskellige slags indhold og forskellige problemstillinger at optimere på.

Når du har testet dit websites hastighed og har en klar retning på, eller i det mindste en ide om, hvad der sløver dit website, er hér forskellige teknikker til forbedring af din hastighed, i rækkefølge fra den letteste til den sværeste implementering:

Det du kan gøre for at sætte hastigheden op

Nu hvor du har testet dit websites hastighed og har en klar retning på, eller i det mindste en ide om, hvad der sløver dit website, er hér forskellige teknikker til forbedring af din hastighed, i rækkefølge fra den letteste til den sværeste implementering:

Start med dine billeder og andre grafiske elementer

Vi ønsker alle et visuelt appellerende website design til at lokke kunderne ind, og stærke billeder er ofte den bedste måde at få det på. Imidlertid vil disse billeder ikke være til megen nytte, hvis brugerne ikke kan se dem, fordi de tager for lang tid at loade.

Desuden fokuserer forbrugere for tiden mere på hastighed end det visuelle. Ifølge Unbounces undersøgelse er et betydeligt antal brugere villige til at undvære animationer (56,6%), videoer (52,8%) og billeder (24,1%) på en side, hvis det betyder at siden vil indlæses meget hurtigere.

Meget store billeder er kendt som værende de "største syndere" på langsomme sider, så hvad kan du gøre med dem?

Tip nr. 1: Fjern alt unødvendigt.

“Det mest optimerede billede er det ikke-eksisterende billede,” siger Google i deres mobilhastighedsoptimeringsguide.

Det første du skal overveje er om alle de fancy billeder og videoer, der er lagt ind på dit website, også virkelig er nødvendige. Hvis budskabet bragt af disse elementer lige så godt kan bringes med lidt kreativ brug af CSS (eller cascading style sheets - et sprog, der bruges til at definere stilarter, former og effekter), så er det nok bedre at fjerne sådanne billeder helt og reducere tyngden af dine sider.

Tip nr. 2: Komprimér billeder.

Sørg for at de billeder og videoer, du uploader til dit website, har den faktiske størrelse som de fylder på siden. Husk også at komprimere billeder ved at køre dem gennem værktøjer som TinyPNG.com. Komprimering af dine billeder reducerer deres filstørrelse betydeligt, samtidig med at deres kvalitet bevares.

Tip nr. 3: Brug det korrekte format.

Google foreslår, at billederne skal være i WebP, et billedformat, der er 30% mere komprimeret end det sædvanlige JPEG. For billeder med gennemsigtige baggrunde, brug PNG; For skalérbare ikoner og figurer, brug SVG.

Sæt dig i brugerens sted

Vi har tidligere talt om, hvordan brugere sommetider oplever sider som hurtigere end deres faktiske hastighed på grund af forskellige faktorer, herunder relevansen af det indhold, der først indlæses og sidens interaktivitet.

Brug denne illusion om hastighed til din fordel ved at optimere dit website specifikt til din målgruppe og ikke bare med en generisk målsætning for øje.

For at gøre det helt klart, er der intet galt med konkrete mål, som en fastsat indlæsningstid eller tyngde af en side. Indlæsningstiden vil dog aldrig følge samme standard på tværs af alle brugere med adgang til dit website. Nogle af dem kan have de hurtigste forbindelser, mens andre måske browser på ringe netforbindelser.

Optimering af dit website med brugeren in mente hjælper dig til også at optimere for i hvert fald nogle af disse flaskehalse i den virkelige verden.

Tip nr. 4: Prioritér indlæsning af “above-the-fold”-indhold.

Selvom det er ideelt, at alt indhold på din side indlæses hurtigt, så er det vigtigtere at sørge for, at above-the-fold-indholdet indlæses hurtigere.

Overvej at bruge “lazy loading”"-teknikken, hvor billeder kun indlæses, når brugeren ruller eller kommer ind i området, hvor de er placeret. Det får din side til at blive vist hurtigere, fordi elementer kun vises efter behov.

Tip nr. 5: Sørg for at dit indhold straks er interaktivt.

Synligt loadet indhold er måske ikke særlig brugbart for en bruger, hvis hun ikke kan bruge eller interagere med det med det samme.

For det meste er synderen bag de synlige men ikke-interaktive elementer JavaScript og CSS som blokerer for renderingen. Det er opgaver der holder browseren travlt optaget, hvilket gør at den ikke reagerer på brugerens input eller interaktion.

Bed din udvikler om at fjerne, eller i det mindste udsætte, indlæsningen af disse renderings-blokerende resurser for at forbedre din “Time to interactive”.

Tip nr. 6: Vis pladsholdere, mens dit indhold stadig indlæses.

Når en bruger forlader et website, fordi det er “for langsomt”, skyldes det normalt, at der ikke sker noget under indlæsningstiden for at holde brugeren engageret, som f.eks. kun at have en blank hvid side vist på skærmen.

Men hvis der vises noget respons til brugeren, selv når en side loader langsomt, er brugeren ofte mere villig til at vente, da der er et synligt signal om, at der sker noget.

Facebook bruger f.eks. pladsholdere, mens den indlæser indlæg i nyhedsfeedet. Disse er egentlig bare rammer til indlæg, bestående af figurer, der vikarierer for elementer som profilbillede, navn og selve indlægget, indtil det faktiske indhold er loadet.

Tip nr. 7: Minimér tap- eller klikforsinkelse.

Oplevelsen af hastighed er ikke begrænset til at handle om den umiddelbare indlæsningstid. Selvom din side blev indlæst hurtigt, vil brugeren forlade den med en dårlig oplevelse, hvis elementer ikke er umiddelbart interaktive (som omtalt ovenfor), og hvis der er for meget forsinkelse efter et klik eller tap.

Google anbefaler at den traditionelle 300-350 ms forsinkelse mellem touchend og klik bør elimineres for at skabe hurtigere interaktion for brugeren.

Tip nr. 8: Benyt dig af Optimistic actions.

Optimistic actions sender øjeblikkelig feedback til brugeren, der gør at det virker som om en handling er udført, selvom serveren i virkeligheden stadig behandler den i baggrunden.

Et godt eksempel på dette er Instagrams Like/Hjerte-action i dets app. Når en bruger dobbeltklikker på et billede, vises brugeren straks et hjerte, selvom handlingen endnu ikke er blevet helt udført for Instagrams vedkommende. Eller besked-apps hvor meddelelsen ser ud til at være "sendt" med det samme (dvs. meddelelsen forlader tekstfeltet og overføres til chatboksen), mens den faktisk stadig sender.

Tænk over de gange hvor du selv har forladt en side, fordi den loadede for langsomt, sammenholdt med de gange hvor du ventede på en side, selvom den ikke blev indlæst på et øjeblik. Disse sider kan have haft mere eller mindre samme indlæsningstider i sekunder, men forskellen er sandsynligvis, at sidstnævnte gruppe holdt dig engageret nok med konstant feedback.

Altså – det handler dybest set om, hvordan dine brugeres oplevelse af dit website skaber indtrykket hos dem af hvor hurtigt eller langsomt det er. Optimering på brugerorienterede parametre er en win-win i virkeligheden - Du kan optimere dit website "selektivt", men gøre det på en måde som faktisk opfylder dine brugers behov og forventninger bedre.

Andre metoder

Bortset fra disse to hovedfokusområder er hér andre hastighedsoptimeringsteknikker, som du nemt kan implementere:

Tip nr. 9: Udnyt browseres caching.

Når en bruger besøger dit website for første gang, skal browseren downloade alt indholdet for at kunne vise siden korrekt. Det inkluderer HTML, JavaScript, CSS og billeder.

Browseren kan gemme eller “cache” disse elementer lokalt, så når brugeren vender tilbage, behøver den ikke at downloade alle filerne igen, og kan derved forkorte indlæsningstiden.

Udnyt denne funktion ved at markere dine sider, eller specifikke elementer på dine sider, med det interval, hvor du ønsker browseren skal opdatere eller genindlæse sådanne elementer. Egentlig fortæller du browseren, at nogle elementer på din side formentlig ikke opdateres regelmæssigt, så den kan cache disse elementer i længere tid, hvilket reducerer den mængde resurser den skal genindlæse, hver gang brugeren vender tilbage til dit website.

Tip nr. 10: Brug et Content Delivery Network (CDN).

Et CDN er et netværk af servere der strategisk er placeret forskellige steder rundt om i verden. Det fungerer som et forbindelsesled mellem brugeren og serveren dit website oprindelig ligger på og hjælper meget med at forbedre sidens hastighed ved:

1. at være tættere på dine brugere – Afstanden fra brugeren til din webserver kan påvirke sidens hastighed. Med et CDN kan brugerens browser sende en anmodning til den nærmeste server fra sin placering i stedet for direkte til din hovedserver.
2. 2. at fjerne noget af belastningen fra din hovedserver, så at sige - Mange anmodninger kan sløve din primære server. Hvis du har et CDN, kan anmodningerne rettes mod disse servere i stedet og mindske den belastning, som hovedserveren udsættes for. Udover dette hjælper det dig også til at reducere hosting-omkostninger ved at cache indhold og dermed reducere mængden af data, som hovedserveren skal levere.

Vores projektledere anbefaler Cloudflare and StackPath (tidligere MaxCDN).

Tip nr. 11: Fjern ubrugte eller unødvendige plugins.

Med mange ting at vedligeholde på en hjemmeside kan deaktiverede eller ubrugte plugins ophobe sig og tynge dit website ned. Kontrollér om alle de plugins du har installeret i øjeblikket, er nogen du stadig bruger, og fjern de unødvendige for at reducere tyngden af din side.

Tip nr. 12: Opgradér til den seneste version.

Hvis du bruger et CMS (som WordPress eller Umbraco) eller en webshop (som Magento), kan bare dét at opgradere til den seneste version hjælpe med at forbedre sidens hastighed.

Det er selvfølgelig ikke altid tilfældet, at en opgradering er den bedste løsning - især for meget nye versionsopgraderinger, der stadig er ustabile. Det er dog godt at holde dig på forkant med de seneste opdateringer til dit CMS, for at udnytte de nye funktioner og forbedringer de medfører, for ikke at nævne de nye sikkerhedsopdateringer, som vil bidrage til at beskytte dit website bedre.

Tip nr. 13: Opgradér til en større server.

Fjernelse, minifying og komprimering af resurser kan kun hjælpe til en vis grænse. Hvis dit website vokser og du får mere trafik, kan det være på tide at opgradere eller opskalere til en større server. Du vil formentlig gerne konsultere din udvikler angående dette, da opskalering til en større server ikke er noget der bør tages let på.

Flere metoder ditudviklingsteam kan bruge

Marcelo, en af vores Magento-projektledere, siger, at sammenlægning af JS- og CSS-filer er et relativt simpelt hastighedsoptimerings-trick, som kan gøre en stor forskel for en sides indlæsningstid. Retfærdighedsvis bør det dog siges, at det er et relativt simpelt trick for en udvikler, men næppe for en ikke-teknisk person.

Her er nogle flere tips, som du kan gå over med din udviklingsteam:

Tip nr. 14: Minify resurser (CSS, JS og HTML)

ved at “rydde op” i koden, dvs. fjerne ekstra mellemrum, kommaer eller andre unødvendige tegn såvel som formatering og ubrugt kode.

Tip nr. 15: Aktivér komprimering

af CSS, JS og HTML-filer, der er større end 150 bytes ved brug af gzip.

Tip nr. 16: Begræns antallet af redirects

for at reducere yderligere ventetid ved HTTP-anmodninger.

 

Indtil videre har vi talt om optimering af eksisterende resurser eller fjernelse af unødvendige. For at tage din hastighedsoptimering et skridt videre, så overvej at implementere disse mere avancerede teknikker som vi fortæller mere om I de næste artikler. Det er teknologier der måske tager længere tid at gennemføre, men som i sidste ende vil være dét værd, på grund af den betydelige forbedring de medføre for dit websites hastighed.

Næste: Optimer hastigheden på din hjemmeside med AMP og PWA