Doehl's Blog

Wordpress hastighedsoptimering

2011-12-08T13:26:55Z

Jeg spurgte for noget tid siden, om hvilket CMS jeg skulle fokusere på.

Ikke særlig overraskende faldt valget på Wordpress, så jeg har i den senere tid brugt på at sætte mig ind i Wordpress. For at se hvor i wordpress der er et hastigheds problem.

Det første jeg gjorde, var at bygge min egen blog (Doehl's Blog) op i Wordpress. Før fungerede blog'en i et CMS som jeg selv har designet og bygget (Der satte fokus på hastighed). Her var der en load tid på mellem 0.40 – 0.65 Sek. Men efter jeg byggede den op i Wordpress, var load tiden på ca. 0.60 – 1.20 sek. Hvilket for det første er en stor stigning, men for det andet har en stor svingning af load tid. Dette er endda sket, selv om bloggen har fået et meget mere simpelt design.

Efter at have sat mig ind i Wordpress, og fået optimeret min blog. Er load tiden kommet helt ned på 0.25 – 0.5 Sek.

Jeg har endda på en test server, formået at komme helt ned på 0.17 sek. Hvordan det er muligt, kommer jeg til at skrive om senere i Wordpress serien.

Jeg køre serien om Wordpress optimering, som en del af mit nyhedsbrev...

Så ønsker du at følge med i min serie om Wordpress hastighedsoptimering, kan du tilmelde dig min nyhedsbrev.

Går du glip af enden en del af serien eller den hele skal du ikke blive bekymret, for hele serien vil blive lagt på både Doehl's Blog samt Amino, en måned efter nyhedsbrevet er sendt ud.

Så tilmeld dig mit nyhedsbrev nu, og følg med i min serie om wordpress optimering...

Skal jeg lave video blog, om hastighedsoptimering

2011-11-10T10:01:53Z

Jeg fik en tanke forleden. At det kan være en smule svært, at forstå hastighedsoptimering når jeg kun giver eksempler over tekst.

Kunne det hjælpe hvis jeg begyndte at lave et par video'er, om den hastighedsoptimering jeg skriver om?

Jeg har bare et par spørgsmål.
Syndes du at jeg skal lave video til min blog?
Skal jeg lave hele blog indlæget i videoen?
Eller skal det kun være det tekniske?

Hvis det er hele blog indlæget du syndes.
Skal jeg så lave det i et studio format? (Hvor jeg bland andet kan få gæste eksperter forbi)
Eller skal jeg bare tale, mens du kun kigger på en computer skærm?

Skriv en kommentar til hvad du syndes. Så vil jeg tage det op til overvejning.

Hvilken CMS skal jeg først skrive om?

2011-11-10T09:48:46Z

Jeg har brugt de sidste par dage, på at konvertere mit blog site til wordpress CMS. Her slog det mig endelig, hvor meget mere langsommer en hjemmeside kan blive. Jeg gik fra en load tid på 0.4 sek op på ca. 0.7 – 1.3 sek. Selv om det ikke lyder af meget, kan det få brugere til ikke længere at bruge ens site.
Det skete endda også selv om jeg har gjort layoutet lang mere simpel, og uden så mange billeder, javascript og CSS som før.

Nu ved jeg at de fleste site efterhånden bruger et CMS, så derfor kan det være en god idé at skrive om hvordan man hastighedsoptimere en CMS hjemmeside. Spørgsmålet er bare, hvilket CMS skal jeg starte med?

Så jeg tænkte at i lige kunne skrive en kommentar på, hvilket CMS jeg skulle starte med.

Det bliver spænde at se hvilket CMS i gerne vil høre først om.

Minimering og optimering af JavaScript

2011-11-01T12:20:00Z

Javascript er gået hen og blevet rigtig populært de seneste år. Som blandt andet bliver brugt til analytics, validering af kontakt form, smarte reklamer der slider billeder samt meget mere.

Men nu er det de færreste, der selv skriver deres javascript fra bunden. Enden henter de et færdig lavet script fra nettet, ellers bruger de et framework.

En stor del af disse javascript filer er hvilken minimeret eller optimeret. Så de fylder langt mere end de behøver for at kunne køre. Det er kun det ene af problemerne, ved at hente færdige javascript filer. For det er også de færreste der samler alle filerne i et enkelt dokument. Som jeg skrev i mit forrige indlæg om ”Optimer rækkefølgen af CSS og Javascript”, så blokere hentning af javascript filer, for hentningen af andre filer (Som billeder, CSS og m.m.). Der for er det en god idé, at samle så meget javascript i en fil som muligt.

Hvad kan du så gøre for at minimere eller optimere javascript. Personligt går jeg selv en del at scriptet igennem, og bygger dem op så de både er optimeret samt minimeret bedst muligt.
Men nu er det ikke alle der ved, hvordan man optimere javascript. Dette problem har google lavet en løsning på. Det hedder Google Closure Compiler. Som er en web app der helt automatisk læser og forstår din javascript. Så det på den måde både optimere og minimere scriptet.

Den har 3 måder at gøre det på.

”Whitespace only”, som navnet siger fjerner den alt mellemrum i scriptet.
”Simple optimering”, som kan bruges på 98% af alle javascript filer. Den ændre blandt andet på funktion variabler navne og lidt andet, for at gøre javascript filen så lille som muligt.
”Advanced optimering”, som læser, forstår og ændre javascript filen fuldstændig. Så den både er optimeret og minimere bedst muligt. Der er bare et par ting man skal være opmærksom på. Den kan kun bruges, hvis alle javascript filer der bliver brugt, bliver optimere på en gang. Og det er langt fra alt javascript den optimere, så den også virker efterfølgende.

Her er eksempel på hvad Google Closure Compiler kan gøre:

Javascriptet før

function hello(name) {
alert('Hello, ' + name);
}
hello('New user');

Whitespace only

function hello(name){alert("Hello, "+name)}hello("New user");

Simple optimering

function hello(a){alert("Hello, "+a)}hello("New user");

Advanced optimering

alert("Hello, New user");

Disse 4 scripts gør nøjagtigt det samme. Som man kan se er der der kun fjernet mellemrum i Whitespace only.
I Simple optimering er det ændret på et variable navn, så det ikke fylder så meget.
Men i Advanced optimering har Closure Compiler fundet ud af, at funktionen ”hello” kun bliver kaldt en gang. Samt at det bare bliver tilføjet ”New user” til en alert. Så den har fjernet funktionen og lavet en alert med hele teksten.

Optimer rækkefølgen af CSS og Javascript

2011-10-27T12:34:00Z

Et af problemerne ved at have javascript filer, er at de blokere for hentningen af andre filer. Hvilket vil sige at hvis når en Javascript fil bliver hentet, kan det ikke hentes andre filer på samme tid.

Da CSS er med til at opbygge og vise en hjemmeside, stopper opbygningen af hjemmesiden, når en javascript fil bliver hentet.

Af denne grund er det en god ting, at sætte den rigtige rækkefølge af filerne i ”head” området i en HTML fil.

Ikke nok med at opbygningen af selve hjemmesiden stopper, så kan hjemmesiden også blive hentet langsommere.

Her er et eksempel på hvordan dette er muligt:

I det øverste skema er CSS og Javascript filerne sat i den rigtige rækkefølge, hvilket for filerne til at blive hentet på 300ms.
Men hvorimod det nederste skema ikke er sat i en optimeret rækkefølge, der for filerne til at blive hentet 100ms langsommere.

Hvordan ser disse 2 eksempler ud i HTML.

Optimeret

Ikke optimeret

<head>

<title>Optimeret</title>

</head>

<head>

<title>Ikke optimeret</title>

</head>

Det er også muligt at få Javascript filerne, til at blive hentet parallelt med både CSS og billed filer. Men dette vil jeg skrive på et andet tidspunkt.

Gratis hastigheds programmer

2011-10-22T00:24:00Z

Nu er det sidst på efterårsferien. (Ikke fordi jeg har haft ferie) Så jeg har fået lyst til at dele ud af mine egen udviklede programmer. Jeg vil over de næste par måneder, ligge en del hatighedsoptimering programmer ud på bloggen. Jeg har selv lavet programmerne. Men har blandt andet brugt, ressourcer fra bland andet Google's PageSpeed.

Det første program jeg har valgt at ligge op er GJPMin. GJPMin kan bruges til at lossless komprimere, flere billeder på engang. Jeg har skrevet et indlæg om, hvorfor det er en god idé at lossless komprimere billeder.

Jeg har blandt andet lavet et program, til at minimere og optimere Javascript kode. En af metoderne som programmet bruger ved at minimere Javascript, er at fjerne alle mellemrum og linjeskift. Programmet kan også optimere javascript koden. Dette gør den ved at læse Javascript koden og skrive den om, så det kræver mindst mulig regnekræft at køre det.

Så har jeg også lavet et CSS minimering og optimerings program. Dette program minimere også ved at fjerne alle mellemrum og linjeskift. Så kan den også læse og omskrive CSS koden, så den er optimeret til hurtig parsing.

Hvis du har et forslag til et program, der vil gøre godt som optimeringsværktøj. Er du velkommen til at skrive dit forslag til mig på mail. Du kan skrive en PM.

Hastighedsoptimering er SEO

2011-09-26T14:16:00Z

Jeg har i den seneste tid, fået en del henvendelser på hvorfor hastighedsoptimering er så vigtigt. Det er der mere en et svar på.

Når jeg for dette spørgsmål, plager jeg at give et spørgsmål tilbage. Gider du virkelig vente på en hjemmeside der er 5-6sek. om at loade? For det gider jeg ikke. Selv om 5-6sek. ikke lyder af meget, så viser de fleste af undersøgelserne, at 6 sek. er det maksimale vi gider vente på en hjemmeside. Her er det vigtigt at ligge mærke til at jeg skrev, at 6 sek. var det maksimale!!!
Det betyder at selv om din load time ca. ligger på 4 sek., er det ikke godt nok. For Google har bevist at ved en load time ved 3-4 sek., bliver folk for utålmodig.

Hvorfor kigger Google på load time?

Det du skal huske når du laver SEO, er hvad en søgemaskines vigtigste opgave er. At give de bedste resultater til deres brugere. Så det hjælper ikke lige frem Google, hvis de viser resultater der har en load time på 4 sek. eller over.

Hvilke Google produkter kigger på load time?

Et af Googles produkter som bruger load time i stor stil er Google Adwords.
Det skal siges at jeg ikke er en Adword ekspert, men ud fra hvad Google har meld ud. Så bruger Google load time i deres vurdering, på hvor god en kvalitet din Adword kampagne er.

Så husk du for mere end en hurtig hjemmeside, ved at hastighedsoptimerer den. Heriblandt for du glade brugere og flere brugere af din hjemmeside, samt en bedre placering både på Google search og Google Adwords.

Du er også velkommen til at følge min blog på Doehl.dk, hvor jeg skriver om hastighedsoptimering.

Pagespeed et godt værktøj

2011-09-14T21:59:00Z

Når man skal lave en hver form for hastighedsoptimering af en hjemmeside, er det vigtigt at man har det helt rigtige stykke værktøj. Der findes tonsvis af værktøj til at analysere hjemmesider, de fleste er gratis og et par få koster nogle kroner.

Hvad skal man så vælge? Er et dyrere produkt bedre? Der er dyre produkter på markedet som er rigtig gode. Jeg har ikke fundet produktet, som ud fra pris og kvalitet kan slå Google pagespeed eller Yahoo Yslow.

Jeg fortrækker selv at bruge en blanding af forskellige applikationer. Her i blandt Google pagespeed og et par af mine egne udviklede applikationer.

Der er flere ting ved Google Pagespeed jeg godt kan lide. En af de bedre ting er at google pagespeed er under kraftig udvikling i skrivende stund (Der er i skrive stund lavet 1965 ændringer og forbedringer). Google har de seneste år sat stor fokus på hastighedsoptimering, med blandt andet hjemmesider som ”Let's make the web faster” og applikationen Pagespeed.

Det pagespeed gør, er at tage et kig på hvordan en hjemmeside er bygget op. Hvor på den giver en score på forskellige områder af optimering. Ud over at give denne score, fortæller den også helt præsis hvad du kan gøre. Som f.eks. at aktivere Gzip eller compile javascript så det fylder og kræver mindre.

De områder kan du så optimere ud fra. Husk jo højere et punkt står i pagespeed, jo større virkning vil det have at udbedre.

Jeg vil forslå at du tager et godt kig på Pagespeed, som du kan downloade her:http://code.google.com/intl/da-DK/speed/page-speed/download.html

Det kræver dog at du enden bruger Firefox (Med firebug installeret) eller google chrome.

Du er også velkommen til at følge min blog på Doehl.dk, hvor jeg skriver om hastighedsoptimering.

Det rigtige filformat (Billeder)

2011-08-24T09:59:00Z

Det rigtige filformat kan både spare filstørrelse og parsing tid. Så når man snakker om billeder på en hjemmeside, kender de fleste filformatet GIF. Det blev brugt meget til at animere billeder, hvilket også var det rigtige filformat til. Men efter PNG er blevet bedre understøttet i de moderne browser, der det ikke længere GIF filformaten der hovedsagligt skal vælges. Jeg skriver ikke at GIF slet ikke skal bruges, men det er en sjældenhed. Jeg vil længere nede i teksten, forklare hvornår hvilke filformater skal vælges.

De filformater der bliver brugt til hjemmesider, er JPG, JPEG , PNG, GIF. (Men der er lidt flere som f.eks. .ico og .webp, men dem vil jeg ikke ind på her. Måske senere.) De 3 filformater er GIF, JPEG og PNG. Følgende filformater skal IKKE bruges til hjemmesider: BMP og TIFF.

Hvorfor vælge GIF

GIF har efterhånden ikke længere nogen fordele frem for PNG. Der er kun 2 tilfælde jeg kan komme på. Det ene er billeder der er mindre end 10x10 pixel, eller ikke har flere end 3 farver. Det andet er animeret billeder. Hvis disse kræv ikke opfyldes, vil jeg forslå at du bruger PNG. Men hvis du mener at et billed i GIF formatet, vil fylde mindre end i PNG format. Skal du selvfølgelig vælge PNG.

Hvorfor vælge PNG

Som skrevet ovenfor er PNG næsten altid et bedre valg end GIF. PNG vil i de fleste tilfælde være et bedre valg. PNG filformatet er blevet understøttet i alle nyere browser. (Firefox1+, IE4+, Mac IE5+, Opera 3.51+, Safari 1+) Men IE 4-6 understøtter ikke gennemsigtighed (Alpha), der skal man op i IE 7+. Der kan bruges forskellige programmer for at lave eller konvertere en PNG fil. Jeg bruger selv Adobe Fireworks, som er en blanding mellem Adobe Photoshop og Adobe Illustrator.

Hvorfor vælge JPEG

Jeg kan kun komme en grund til at vælge JPEG, og det er hvis billedet er et fotografi.

Du er også velkommen til at følge min blog på Doehl.dk, hvor jeg skriver om hastighedsoptimering.

Det magiske GZip (Del 2)

2011-08-10T12:05:00Z

NOTE: Dette er del 2 af Det magiske GZip. Du kan læse del 1 her.

Der er flere forskellige metoder, hvorpå man kan aktivere Gzip på. Den nemmeste og hurtigste måde er at aktivere mod_gzip.c i .htaccess filen. Men der er ikke alle hostings virksomhederne, der tillader deres kunder at aktivere Gzip i .htaccess. (Her iblandt det hosting center jeg bruger...)
Er der også mulighed for at aktivere Gzip ved hjælp af lidt PHP. Omfanget af PHP metoden er ikke helt den samme som .htaccess, da Gzip skal aktiveres i samtlige PHP filer. Det vil kun være PHP filen der bliver Gzip'et.

Der findes en metode til hvordan, man kan aktivere Gzip i både JS og CSS, ved hjælp af PHP. Dette beskriver jeg længere nede.

Htaccess

<ifModule mod_gzip.c>

mod_gzip_on Yes

mod_gzip_dechunk Yes

mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$

mod_gzip_item_include handler ^cgi-script$

mod_gzip_item_include mime ^text/.*

mod_gzip_item_include mime ^application/x-javascript.*

mod_gzip_item_exclude mime ^image/.*

mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

</ifModule>

PHP

<?php

if(!ob_start("ob_gzhandler")) ob_start();

?>

PHP – Hvad med JS og CSS

For at kunne Gzip en Javascript eller CSS fil, skal den laves om til en PHP fil, så PHP har mulighed for at læse filen. Ud over at kunne aktivere Gzip i PHP, er der også mulighed for at ændre ”Content-type”. Så browseren læsere JS-PHP/CSS-PHP filen som en Javascript/CSS fil.
Dette kan gøres som nedenstående:

JS

CSS

<?php

if(!ob_start("ob_gzhandler")) ob_start();

header("Content-type: application/x-javascript; charset: UTF-8");

<?php

if(!ob_start("ob_gzhandler")) ob_start();

header("Content-type: text/css; charset: UTF-8");

Hvis du har spørgsmål til hvordan Gzip aktiveres, kan du skrive dit spørgsmål i en kommentar.

Du er også velkommen til at følge min blog på Doehl.dk, hvor jeg skriver om hastighedsoptimering.

Det magiske GZip (Del 1)

2011-08-09T09:09:00Z

Det magiske Gzip lyder måske lidt overvurderet, men det kan ikke sige for mange gange, hvor meget Gzip kan gøre for oplevelsen af en hjemmeside. Brugervenlighed har ikke kun noget at gøre med, hvordan en hjemmeside er opbygget; om det er et lækkert layout og hvorvidt brugeren kan finde rundt på hjemmesiden. Tager det for lang tid at hente og vise hjemmesiden vil der sandsynligvis ikke være nogen brugere, at vise den flotte hjemmeside for.

Problemet ligger i, at tid er blevet en vigtig faktor i vores liv. Der må derfor ikke være spildtid i forhold til at vente på at en hjemmeside bliver hentet. Der er et par kloge mænd der har udtalt, at der spildes 99 menneske år om dagen på grund af at hjemmesider ikke er komprimeret ordentligt. Det vil jeg nu mene er en pæn del, set i lyset at der kun skal et par linjer kode til.

Hvad er Gzip

Gzip er et GNU projekt, som bliver brugt til at komprimere filer, der står for ”GNU zip”. Den første udgave (0.1) udkom i Oktober 1992, efterfulgt af version 1.0 4 måneder senere i 1993. Gzip er baseret på DEFLATE algoritmen.

En af grundene til at Gzip er den foretrukne komprimering til HTML er, at Gzip har en super hastighed op mod selve komprimeringen. Gzip fungerer på den måde, at den leder efter tekst der matcher hinanden. Eftersom HTML er opbygget af ”Tags”, og ofte indeholder en masse mellemrum, gør det Gzip til en rigtig god komprimeringsmetode til HTML.

Når Gzip er aktiveret kan der spares helt op til 70% af overførslen af tekst filerne. Gzip kan anvendes på følgende fil formater HTML, XML, TXT, CSS, JS, PHP, PL og m.m.

Vær opmærksom på at det ikke er altid Gzip kan gøre en tekst mindre. I tilfælde af at der ikke er så mange matchene tekst i filen, vil det få filen til at vokse i stedet for at blive mindre.

I nedenstående eksempel er der vist, i hvilke tilfælde Gzip fungere bedst, og hvordan den bruger matchene tags til at komprimere.

Dårlig eksempel Uden komprimering: 88 bytes Med komprimering: 96 bytes Forskel: 8 bytes	Gode eksempel Uden komprimering: 119 bytes Med komprimering: 45 bytes Forskel: -74 bytes
<ul>Et</ul> <li>To</li> <p>Tre</p> <h1>Fire</h1> <h2>Fem</h2> <h3>Seks</h3> <h4>Syv</h4>	<div>Doehl</div> <div>Doehl</div> <div>Doehl</div> <div>Doehl</div> <div>Doehl</div> <div>Doehl</div> <div>Doehl</div>
Her bliver filstørrelsen 8 bytes større. Fordi forskelden ikke er større end 25 byte, vil kunden ikke opleve nogen forskel.	Her bliver filstørrelsen 74 bytes mindre, hvilket er en stor fordel.

Følg med i del 2, hvor jeg vil forklare hvordan Gzip aktiveres.

Du er også velkommen til at følge min blog på Doehl.dk, hvor jeg skriver om hastighedsoptimering.

Blog om hastighedsoptimering

2011-08-09T07:46:00Z

Der har i længere tid været en del, der har spurgt til hvorfor jeg ikke starter på en blog, om hvordan man optimere en hjemmeside.

Jeg har dog været en del skeptisk over, at skulle starte på en blog, da jeg altid har set det som spild af tid. Da jeg startede som iværksætter med virksomheden DNW-Solutions, fik jeg øjne op for hjemmesidenamino, som er et sted hvor man kan få hjælp til alt indenfor iværksætteri. Fik jeg øjne op for blog på amino, hvor jeg er begyndt at læse en del blog's. Nu kan jeg godt se, at det med en blog faktisk er en god måde at få sine holdninger og viden ud på. Jeg bruger tid hver dag på at læse forskellige blog's her iblandt Kristoffer Hjerrild's blogom iværksætteri.

Så nu måtte det være på tide, at jeg tog mig sammen og fik startet på den blog som så mange gerne så komme.
Jeg vil for det meste sætte fokus på frontend optimering. Hvilket vil sige at det er optimeringen ved slutbrugeren, og ikke optimering af PHP eller C# kodning. Et par meget kloge hoveder hos yahoo, fandt for nogen år tilbage ud af, at der kan hentes mest ved ”frontend” end ved ”backend” optimering.

Jeg har de sidste 2år brugt det meste af min fritid, på at lære om hjemmesideoptimering. Hastighedsoptimering er et område inde for programmering, jeg finder meget spænde. For der er ikke så mange, programmøre der tænker over hvad de skriver, og hvilken virkning det har på deres program eller hjemmeside.

Der var engang hvor en hjemmeside bare tog den tid at hente, som den nu engang gjorde. Men i det samfund som vi er gået hen og blevet, er vi blevet meget uålmodige og tid er blevet en værdi faktor i vores liv.

Håber du synes om min blog, og for noget ud af den.
Hvis der er et punkt som du gerne vil høre mere om, er du velkommen til at skrive det til mig.

Du kan enden følge min blog her på amino, eller på Doehl.dk

Et par af de optimeringer jeg vil fortælle om vil være følgende:

Gzip komprimering
Billieder til CSS-Sprites
Compile Javascript
http caching
Optimer CSS selector
Aktiver Keep alive

Minimering af CSS
Minimering af JS
Minimering af HTML
Lossless billed komprimering
Optimer CSS og JS rækkefølgen
Mange flere