Hvis du har en side med en vis mængde JavaScript funktionalitet er der sikkert en god mulighed for du også bruger et af de mange JavaScript biblioteker der findes derude, hvad enten det måtte være Mootools, jQuery eller noget helt andet. I en tid hvor folk bliver mere og mere fokuseret på loadtid, kan JavaScript biblioteker, brugt på den forkerte måde, være roden til alt ondt. Henter du fx en ukomprimeret udgave af Mootools er det 140kb dine brugere skal hente. Men loades biblioteket på den rigtige måde kan du faktisk komme helt ned på omkring 20KB.
Du kan selvfølgelig loade dit JavaScript bibliotek igennem din egen sideb, her skal du huske at hente den komprimeret version (gerne YUI hvis muligt) samt gzippe dine JavaScript dokumenter – herved opnår du den laveste mulige størrelse på dit JavaScript bibliotek.
Du har dog også en anden, og efter min mening bedre, mulighed, netop at loade dit JavaScript bibliotek igennem Google. Google AJAX Libraries API gør det muligt at loade de mest populære open source JavaScript biblioteker igennem Googles servere. Dette har en række fordele:
- Caching virker ordentligt, dvs brugerne får altid serveret en cache version med mindre der er sket ændringer
- Biblioteket er automatisk gzippet
- Biblioteket kan loades YUI komprimeret eller minified
- Google har servere i hele verden, så biblioteket loades fra en server nær dine brugere (CDN)
- Hvis nok mennesker bruger googles api vil de fleste brugere på sigt have dit bibliotek i deres cache før de rammer din side
- JS Biblioteker loades fra et såkaldt “Cookieless domain” – dette giver en lille hastigheds fordel, i forhold til de headers der sendes med alle forespørgsler fra/til en browser
- Mulighed for automatisk upate af JS Biblioteker (hvis det ønskes)
Sådan bruger du Googles Ajax API
Google tilbyder to metoder til at loade JavaScript enten direkte ved at loade JavaScript filen eller via et API kald google.load(). Brug af google.load() kræver at man først loader googles eget bibliotek og derefter kalder google.load(), derudover kræves der en google api key:
|
1 2 3 |
<script type="text/javascript" src="http://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script><script type="text/javascript">// <![CDATA[
google.load("mootools", "1.2.5");
// ]]></script> |
En af fordelene ved at loade på denne måde, er at du altid kan loade den seneste version af fx Mootools ved blot at undlade versions nummer, så slipper du altid for at opgradere. Jeg anbefaler dog ikke denne metode, mest fordi jeg foretrækker at have kontrol over hvilken version jeg kører med, ikke mindst af hensyn til om der er noget gammelt kode der af den ene eller anden grund ikke virker længere.
Personligt foretrækker jeg at loade JavaScript direkte og ikke igennem load kommandoen, mest af alt fordi jeg ikke kan se pointen i at tilføje ekstra JavaScript for at loade et andet, derfor loader jeg som regel sådan her:
|
1 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.5/mootools-yui-compressed.js"></script> |
Stier til at loade de forskellige biblioteker igemmen google
Her får du lige stierne til nogen af de mest populære biblioteker, stierne markeret med (u) er de ukomprimerede biblioteker, som jeg aldrig anbefaler du bruger, resten må du selv se over på Google AJAX Libraries API
jQuery:
sti: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
sti(u): http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js
jQuery UI
sti: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js
sti(u): http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js
MooTools
sti: http://ajax.googleapis.com/ajax/libs/mootools/1.2.5/mootools-yui-compressed.js
sti(u): http://ajax.googleapis.com/ajax/libs/mootools/1.2.5/mootools.js
Dojo
sti: http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js
sti(u): http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js.uncompressed.js
En note omkring Mootools more
Har set mange rundt omkring på nettet brokke sig over at mootools more (ekstra funktionalitet til mootols) ikke hostes på google. Dette er efter min mening helt korrekt at google ikke vælger at hoste den. For efter min overbevisning må du ALDRIG bruge en fuld version af mootools more. Mootools more skal bygges specifikt efter den funktionalitet du har behov for via mootools more builder, ellers loades der simpelthen for mange unødige kb!
Super indlæg – jo flere der bruger det, jo bedre!
Det er også værd at navne at man også kan kalde dem vi SSL, f.eks. https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js hvis man har brug for det, så brugeren ikke får er warning pga. blandet sikkert og usikkert indhold.
Lækkert indlæg, jeg er for alt der gør sider hurtigere at loade 😉
Link til seneste blogindlæg: Konverteringskarma light – boganmeldelse
@Michael super detajle med SSL, det kan man jo fint få behov for i fx et betalingsflow!
@Tim samme her, og ja jeg ved godt jeg ikke selv loader min mootools via google, meeen folk skal jo ikke gøre som jeg gør bare som jeg siger 😉
Link til seneste blogindlæg: Tip: Load dit JavaScript bibliotek igennem google
God artikel, Martin. Du har selvfølgelig ret, og jeg skal også se at få det gjort nu.
Men jeg har lige et helt andet tillægsspørgsmål. Du nævne også gzipping som en god optimeringsmulighed. Men giver det ingen ulemper. F.eks. må det da tage tid an unzippe det gzippede? Hvis ja hvad er så den nedre grænse for filstørrelser, hvor det kan betale sig?
F.eks. anbefaler mit Page Ppeed plugin mig også at jeg også skal minify mit stylesheet. Men besparelsen er på 1.3KiB, så her er vi under en bagatelgrænse, hvor en minify giver en masse ekstra arbejde, og nærmest intet udbytte.
Link til seneste blogindlæg: Flash name generator
@Niels i forhold til minify vil jeg sige mange bække små… altså jeg vil nok ikke minify mit stylesheet i forhold til de 1.3kb du nævner, men hvis man har en række af den type besparelser kan det jo være lige nøjagtigt det der får ens site ned under de magiske 2sek i loadtid.
Mht til gzip, vil jeg sige der skal være en vis besparelse, selvfølgelig giver det noget ekstra arbejde for browseren, men i dag understøtter alle browsere gzip (og hvis ikke serveres en ikke gzippede version selvfølgelig, gælder både google men også diverse minify plugins til wp), samtidig sidder de fleste på hurtige computere som sagtens kan håndtere gzip uden ekstra ventetid. Det er klart jo større sites jo mere får man ud af både minify og gzip, skar fx 1sek af loadtiden på gucca.dk ved at få gzippet alt js og css. Det eneste jeg aldrig vil anbefale at gzippe er ting der allerede er komprimeret, fx billeder og pdf filer, her vil man for det meste opleve større filer og dobbeltkomprimeringen gør at dokumenterne faktisk loader langsommere.
Tak for det sidste skub, Martin.
Jeg har nu gzippet min php og flyttet mit jquery over til Google, der jo så blev gzippet ved samme lejlighed.
Jeg var dog stadig en smule utryg ved at at skulle have det ekstra DNS opslag, og den ekstra afhængighed af endnu en server (selvom Google har bedre styr på det end de fleste). Så enden på det hele blev at jeg har skrevet jQuery ud, og i stedet benytter native JavaScript. Det fikser samtidig et andet problem, som jQuery har med IE7 og antialiasing. 😉
Så er det bare at vente, og se om jeg kan se de forbedrede svartider i Googlelabs.
Og så lige en fejlmelding. Når man klikker på dit link til “samt gzippe dine JavaScript dokumenter”, så åbner det hele 2 nye vinduer. En stille protest mod usability politisk korrekthed? 😉
Link til seneste blogindlæg: How to make good business names
Niels det var så lidt, og tak for fejlmeddelsen, mig der havde været lidt for smart med noget javascript
Ang. det ekstra DNS opslag burde det være ligegyldigt, idet de fleste udbydere vil have google i deres cache såå dns opslaget bliver reelt bare en viderestilling – men ja hvis det er så simpelt js at man kan undvære libraries er det selvfølgelig at foretrække!
Link til seneste blogindlæg: Anmeldelse af Drengerøve / Grown Ups
Jeg vil anbefale dig at læse
http://encosia.com/2010/09/15/6953-reasons-why-i-still-let-google-host-jquery-for-me/
Det er interessant læsning