How to optimize a website

1 like?463 views

The document discusses website optimization by minifying HTML, CSS, and JavaScript files to reduce file sizes. It describes concatenating multiple CSS and JavaScript files into a single file to reduce HTTP requests. The document also lists libraries that can be used to minify files, such as Htmlcompressor, YUI Compressor, and Closure Compiler.

Website optimizer
HTML, CSS & JAVASCRIPT

Concatenate
?screen.css
body {
display: block;
}
nav.css
li {
float: left;
}
forms.css
div.btn {
cursor: pointer;
}

Concatenate
?screen.css
body {
display: block;
}
nav.css
li {
float: left;
}
forms.css
div.btn {
cursor: pointer;
}
combined.css
body {
display: block;
}
li {
float: left;
}
div.btn {
cursor: pointer;
}

Libraries
? Htmlcompressor
? https://code.google.com/p/htmlcompressor/
? YUI Compressor
? http://yui.github.io/yuicompressor/
? Closure-compiler
? https://code.google.com/p/closure-compiler/

Bert Verhelst
http://www.slideshare.net/bertyhell/website-optimizer
bert.co.nr

How to optimize a website

1. Website optimizer HTML, CSS & JAVASCRIPT

2. What? ? ? ?

3. Minify ?

4. Minify ?

5. Concatenate ?screen.css body { display: block; } nav.css li { float: left; } forms.css div.btn { cursor: pointer; }

6. Concatenate ?screen.css body { display: block; } nav.css li { float: left; } forms.css div.btn { cursor: pointer; } combined.css body { display: block; } li { float: left; } div.btn { cursor: pointer; }

7. Concatenate ?

8. Recompile

9. Website

10. Libraries ? Htmlcompressor ? https://code.google.com/p/htmlcompressor/ ? YUI Compressor ? http://yui.github.io/yuicompressor/ ? Closure-compiler ? https://code.google.com/p/closure-compiler/

11. Bert Verhelst http://www.slideshare.net/bertyhell/website-optimizer bert.co.nr

Editor's Notes

Mobile marketshare increasing2G 3GReduces file size complete website (zip)
Reduction in filesizewitouthknowing the contentMinify: removeallunneededcharactersConcatenate filesRecompile javascript
CommentsNew linesWhitespacesbetween tags (tabs, spaces, new lines)
A lot of small filesHeaderCombine files => 1 header
Thismakesit a bit more difficultBecause the links don��t match up in htmlSo i used a regularexpressiontoreplace the link tags to the correct tags
Combine icons in 1 imageUsing cssSet as div backgroundTune background positionView 1 iconAdvisableto do itthis way for images thatdon��t have content (set via css)Blind ppldon��tneedanimgfor a button
Google closure compilerCompileyour javascriptto more efficient javascriptRemovingunusedfunctionsinlinefunctionsif more efficientminifingExpectswelformed javascriptLint conormDon��t save functions as strings andexecutewithevalmethod
Upload zipSelect optimizationsSee reportHistorychartReductionquite large, images causelessreductionCan��toptimize images (convertallto gif) => bad result, need human

�ݺ�ߣ

How to optimize a website

More Related Content

How to optimize a website

Editor's Notes