Hastighedsoptimering af langsom hjemmeside
Din hjemmeside kan også blive hurtigere
Optimering af loadtider, performance og hastighed på langsomme hjemmesider som din, er et af de områder jeg har haft stor fokus på og har mere end 20 års erfaring med. Og netop din hjemmeside er ingen undtagelse når optimering af loadtider og performance skal igangsættes, implementeres og fuldføres.
Langsom hjemmeside
I takt med at hjemmesider bliver mere og mere avancerede, og ikke mindst det at man har muligheden for at udbygge de forskellige systemer med plugins og moduler, så bliver hjemmesider langsommere og langsommere, det kan ikke undgås. Men der er selvfølgelig som i alle andre fag gode og dårlige måder at lave en ny funktion på. De fleste open Source hjemmesider lidder under langsomme loadtider, og dårlig performance. Nogen gange er det fordi den der har opsat hjemmesiden, ikke selv ved hvad der er godt og dårligt. Andre gange er det bare fordi udvikleren måske er ny eller ikke har prøvet så meget endnu, at han/hun kan sige om en funktion er god eller dårlig.
For kunden er det tit nok at det virker som de har efterspurgt, men for mig, er det typisk ikke nok at det bare virker og dækker det kunden har efterspurgt. Det skal altid i mine øjne, laves så søgemaskinevenligt og hurtigt som muligt, med lav indflydelse på performance. Og det er netop fordi jeg vil have at det jeg udvikler også kan køre på så billige servere som muligt, så man ikke altid skal op i den store forkromede serverløsning for at kunne afvikle en forholdsvis simpel hjemmeside.
Hvad er hastighedsoptimering?
At hastighedsoptimere en hjemmeside, er det at man sørger for at hjemmesidens hastighed er så hurtigt som overhovedet muligt ude hos brugeren. Der findes forskellige tiltag som kan gøre hjemmesiden hurtigere, de fleste kræver dog at man har et vidst kendskab til serverindstillinger, programmering og komprimering af filer.
Hvorfor er det godt?
Det siger egentlig lidt sig selv, gør man en hjemmeside hurtigere, bliver oplevelsen hos brugeren også betydeligt bedre, du mister færre brugere og konverteringen bliver bedre. Yderligere har dette også indflydelse på hvor godt din hjemmeside er søgemaskineoptimeret både direkte og indirekte, da Google nu længe har kigget på hjemmesidens hastighed som en faktor der spiller en rolle.
Hastighedsoptimering med hastighedsgaranti
Jeg (Kim Tetzlaff) tilbyder som altid hastighedsgaranti på loadtiden, hvilket betyder at du ikke skal betale hvis ikke jeg opnår den lovede hastighed. Og du får med garanti den bedste hastighed jeg med mere end 20 år erfaring kan give dig.
Få en hurtigere hjemmeside i dag
Ring 38609918 eller skriv en mail til [email protected]
Ann-christine Hellerup Brandt
Kim Tetzlaff har hjulpet mig med at optimere hastigheden og trafikforbruget på min side valdemarsro.dk. Efter at Kim havde været inde over mit site blev forbruget skåret ned fra ca 300 GB til ca 50 GB om måneden, og hastigheden gik fra ca 7 sekunder til under 1 sekund, så opgaven blev løst til fuld tilfredsstillelse.
Det der ekstra, som gjorde at det var en stor fornøjelse at samarbejde med Kim er, at han er meget grundig og gavmild med sine forklaringer omkring hvad der skaber problemer, hvad jeg kan optimere og hvordan jeg kan gøre det. Altsammen i enkle og direkte formuleringer, som er lige til at gøre brug af.
Jeg kan varmt anbefale Kim Tetzlaff og det er bestemt heller ikke sidste gang jeg selv gør brug af hans ekspertise.
Peter Jakobsen – Trylleskolen.dk
Kim Tetzlaff har har optimeret min hjemmeside trylleskolen.dk så den blev omkring 9 sekunder hurtigere. Jeg er meget imponeret.
Det er en meget omfattende community-side med mange plugins, WP og BuddyPress og Kim løste opgaven perfekt.
Jeg har sjældent følt mig så tryg i hænderne på en programmør. Kim kan virkelig sit kram og meget mere. Han anbefales til alle som ikke lader sig nøje og har brug for en ekspert
John Nielsen – Nielco IT
Jeg har haft fornøjelsen af at benytte Kim Tetzlaff, KTJ-Media.dk, til mange opgaver vedrørende teknisk hastighedsoptimering af hjemmesider. Kim har løst opgaverne til perfektionisme og på et fagligt meget højt niveau.
Kim Tetzlaff er efter min vurdering, en af de absolut bedste i landet inden for hastighedsoptimering af websites. Jeg kan på det varmeste anbefale Kim Tetzlaff, og jeg vil ikke tøve med at benytte Kim igen, når et site virkelig skal fintunes.
John Nielsen
Nielco IT
Anbefalinger fra andre steder
Komprimering af filer, er en eller flere handlinger som gør filer mindre end de typisk er. Der er mange måder hvorpå man kan gøre netop det. Og der er selvfølgelig ting man bør se på først.
Komprimering af billeder
Billeder kan typisk blive komprimeret ret meget uden at miste deres kvalitet. Men før du begynder at komprimere billeder, vil det være en god ide at du finder ud af hvilken størrelse billederne skal bruges i. og derefter komprimere billederne korrekt.
Minificering og komprimering af html, serverside, css og javascript
At komprimere og minificere denne type filer hjælper på mange fronter. minificere man fx serversidefiler, vil serveren arbejde hurtigere med at generere HTML koden. og minificere og komprimere man html, css og javascriptfiler, vil de fylde mindre, og blive hentet hurtigere. Måden er blandt andet at fjerne unødig Whitespace, linjeskift og kommentarer i programmeringskoden både CSS, serverside, HTML og JS.
Til sidst
Når du har gjort ovenstående, kan du lade serveren komprimere html, css og js filer.
Hvad kan man opnå?
Jo, reelt kan man opnå ret meget ved at gøre det, og faktisk gå hele vejen. Nogen gange ender man ud i at kode bliver lettere ulæselig, men det er noget man må tage med efter min mening. Jeg har oplevet en reduktion i det antal KB en bruger henter ned, på op imod 80%. Så det er bestemt værd at tage med.
Hjemmesider i dag bruger grafik som aldrig før, og med systemer som wordpress, drupal mf. der alle bruger plugins til at løfte design og muligheder. Bliver der også lavet endnu flere css og javascript filer som brugeren skal hente.
Browsere kan kun hente et bestemt antal filer på en gang. Derfor er det endnu mere vigtigt at vi sørger for at brugeren skal hente så få filer som muligt, og dette gøres med forskellige metoder.
Sammenlægning af filer
Sammenlægning af filer, kan også gøre en meget stor forskel, har man fx 10 CSS filer kan man med fordel putte dem i 1 fil. Brugeren skal derfor kun hente 1 CSS fil frem for 10 CSS filer. Det samme gælder Javascript filer. Men husk altid at teste, da det at sammenlægge filer, kan gøre at filstørrelsen bliver så stor, at der vil være ventetid på at få hentet filen og fortolket den.
Sprites (Sammenlægning af grafikfiler)
I stedet for at have mange enkeltstående grafikfiler, som brugeren skal hente, kan man sammenlægge grafikker og ikoner til 1-2 filer.
Lazy load
At lazyloade er i grunden det at man kun henter det brugeren har brug for at hente, når de har brug for det. Man taler typisk om denne metode i forbindelse med billeder, men hvad de færeste ved, så kan det også bruges i forbindelse med video, iframes, javascript, css mm.
Hvis man har en masse statiske filer såsom billeder, javascript, css og andre statiske filer, vil det være en god ide at lægge disse på separate domæner (max 2) som er forskellig fra hoveddomænet.
Grunden er at browsere som standard kun kan hente 2-4 filer af gangen fra et domæne. Har man fx 30 filer i alt som skal hentes for at hjemmesiden kan blive set, og man samtidig spreder filerne ud over i alt 3 domæner inkl. hoveddomænet, betyder dette at man teknisk set kan reducere downloadtiden med ca. 2/3.
Og det er her en CDN løsning kommer ind i billedet. Vi benytter os af Cloudflare i rigtig mange tilfælde, og hvis ikke bruger vi dem bare som en gratis DNS host.
Cloudflare har mange muligheder for både sikring af sit website, samt hastighed på hjemmesider.
Hvad er en CDN?
CDN står for Content Delivery Network, og er en server lavet specifikt til at levere filer. Typisk er dette en Nginx server, som er kendt for at være hurtig på aftrækkeren, især når der er tale om statiske filer. Det gode ved de fleste netværk, er at de har servere rundt om i verdenen, hvilket betyder sidder du i DK, og ser på kim-tetzlaff.dk, så vil du få filerne fra den server der står nærmest dig. Sidder du i USA, så får du også filerne fra den nærmeste server. Derfor vil leveringen af filer være hurtig, næsten uanset hvor i verden du befinder dig.
Brugen af inline css og javascript gør så der kommer en hel del mere kode i html dokumentet end hvis disse lå i seperate filer. Yderligere hvis denne kode kommer i deres egne filer, er der også mulighed for at de forskellige browsere gemmer en kopi i cachen, hvilket vil sige at næste gang brugeren så kommer forbi, behøver de ikke hente de filer igen. Så der er kun gode grunde til at gøre det.
Vil man gerne have javascript eller css kode i dokumentet, skal man i stedet indsætte dette imellem head taggene. det kan der også være en fordel i, hvis man fx gerne vil optimere på renderingstiden.
At optimere databasen er ikke så nemt som man skulle tro, det handler både om indstillinger, men også databaseplacering og opsætning af tabeller og indexes. gør man det på den rette måde, kan man få de allerede eksisterende kald til databasen, til at køre noget hurtigere, hvilket overordnet optimere både performance og loadtider.
Optimering og minimering af kald til databasen
En ting er at optimere databasen, en anden er at optimere de flere hundrede kald/læsninger som en hjemmeside typisk foretager når du besøger en side på en hjemmeside. Det man typisk gør er at se på om de eksisterende læsninger kan optimeres på den ene eller den anden måde, der er nemlig flere måder at opnå de samme resultater på, og rigtig tit ser jeg at man kan fjerne rigtig meget støj ved at optimere disse læsninger i databasen. Yderligere vil det være en rigtig god ide hvis man minimere antallet af kald, især dem hvor resultatet kun ændre sig i ny og næ. Der er jo ikke nogen grund til at gå til databasen for så at læse det samme hver gang en bruger kommer forbi. Dette kaldes database caching.
Det kan være en rigtig god ide at benytte sig af AJAX på steder hvor der er høj dynamik, altså ved ting som skal opdateres instant, eller som skifter fra bruger til bruger. Dette gør nemlig at man så ud over det kan bruge html caching på sin side, som reelt gør det at der skabes en statisk HTML fil som indlæses i stedet for at hele database og PHP møllen bliver sat igang.
Bruger man ikke AJAX, vil det fx være svært at benytte sig af html caching på shops, og højt dynamiske sider..
Døde filer er med til at gøre så loadtiden bliver længere, netop fordi browseren prøver at se om der findes noget, og yderligere fordi det aktivere typisk PHP og database læsning på grund af custom 404 sider som langt de fleste i dag bruger.
Ja det kan bestemt betale sig at se lidt dybere på hvad der er muligt med fx CSS, for det er muligt at gøre rigtig meget i dag. I sidste ende er det dog et spørgsmål om hvor kompatibel man vil være med ældre browsere, min personlige holdning er hvorfor lave skygge, gradienter mm med grafik når man kan gøre det med CSS.
Renderingstid er den tid det tager for en browser at fortolke og vise brugeren indholdet på hjemmesiden. Denne skal selvfølgelig være så lav som muligt, da det kan være en stor faktor når der måles på hastigheden. Jo højere renderingstid, jo længere tager det før browseren viser selve indholdet.
Hvad kan være med til at skabe en højere renderingstid?
Jo, renderingstiden bliver forhøjet af blandt andet blokkerende javascript og css filer, der lige skal hentes ned, før siden kan blive fortolket. Det kan også være billeder, video og iframes der forlænger renderingstiden.
Hvad skal man gøre for at gøre renderingstiden lavere?
Kort sagt, skal man loade css og javascript asynkront, og indsætte den CSS der er brug for mellem head tagget, for at browseren kan rendere hjemmesiden pænt.