How to optimize a website
1 like465 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.
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; }
- 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/
Editor's Notes
- #2: Mobile marketshare increasing2G 3GReduces file size complete website (zip)
- #3: Reduction in filesizewitouthknowing the contentMinify: removeallunneededcharactersConcatenate filesRecompile javascript
- #4: CommentsNew linesWhitespacesbetween tags (tabs, spaces, new lines)
- #6: A lot of small filesHeaderCombine files => 1 header
- #7: Thismakesit a bit more difficultBecause the links don’t match up in htmlSo i used a regularexpressiontoreplace the link tags to the correct tags
- #8: 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
- #9: Google closure compilerCompileyour javascriptto more efficient javascriptRemovingunusedfunctionsinlinefunctionsif more efficientminifingExpectswelformed javascriptLint conormDon’t save functions as strings andexecutewithevalmethod
- #10: Upload zipSelect optimizationsSee reportHistorychartReductionquite large, images causelessreductionCan’toptimize images (convertallto gif) => bad result, need human