Sådan øger du hastigheden på dit website
Udgivet: July 17, 2019
Senest opdateret: February 24, 2021
Udgivet: July 17, 2019
Senest opdateret: February 24, 2021
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:
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:
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?
“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.
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.
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.
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.
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.
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”.
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.
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.
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.
Bortset fra disse to hovedfokusområder er hér andre hastighedsoptimeringsteknikker, som du nemt kan implementere:
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.
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:
Vores projektledere anbefaler Cloudflare and StackPath (tidligere MaxCDN).
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.
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.
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å.
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:
ved at “rydde op” i koden, dvs. fjerne ekstra mellemrum, kommaer eller andre unødvendige tegn såvel som formatering og ubrugt kode.
af CSS, JS og HTML-filer, der er større end 150 bytes ved brug af gzip.
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.