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

Det første, du skal overveje, er om alle de fancy billeder og videoer, der er lagt ind på din hjemmeside, også virkelig er nødvendige. Hvis budskabet bragt af disse elementer lige så godt kan bringes med lidt kreativ brug af CSS (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 din hjemmeside, 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 din hjemmeside specifikt til din målgruppe og ikke bare med en generisk målsætning for øje.

Optimering af din hjemmeside 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 vigtigere 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 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 ressourcer for at forbedre din “Time to Interactive”.

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

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 din hjemmeside skaber indtrykket hos dem af, hvor hurtig eller langsom, den er. Optimering på brugerorienterede parametre er i virkeligheden en win-win. Du kan optimere din hjemmeside "selektivt", men 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 din hjemmeside 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 ressourcer, den skal genindlæse, hver gang brugeren vender tilbage til din hjemmeside.

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

Et CDN er et netværk af servere, der er placeret forskellige strategiske steder rundt om i verden. Det fungerer som et forbindelsesled mellem brugeren og den server, din hjemmeside oprindeligt 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. 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 websitet. Kontrollér om alle de plugins, du har installeret i øjeblikket, er nogle 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 websitet bedre.

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

Fjernelse, minifying og komprimering af ressourcer kan kun hjælpe til en vis grænse. Hvis din hjemmeside 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 dit udviklingsteam 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ærdigvist 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 dit udviklingsteam:

Tip nr. 14: Minify ressourcer (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 301 redirects

for at reducere yderligere ventetid ved HTTP-anmodninger.

Indtil videre har vi talt om optimering af eksisterende ressourcer 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ører for din hjemmesides hastighed.

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