Site optimization
-
Upload
dimitar-belchugov -
Category
Education
-
view
160 -
download
0
Transcript of Site optimization
![Page 1: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/1.jpg)
Site Optimization
Dimitar Belchugov
@belchugov
![Page 2: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/2.jpg)
does performance really matter?
Of course it matters and you know it. So why do we keep making slow sites that lead to a bad user experience?
Let's not waste time showing millionaires performance cases, let's get straight to the point!
![Page 3: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/3.jpg)
HTML
![Page 4: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/4.jpg)
avoid inline/embedded code
1) Inline: the CSS is defined inside a style attribute and the JavaScript inside an onclick attribute for example, in any HTML tag;
2) Embedded: the CSS is defined inside a <style> tag and the JavaScript inside a <script> tag;
3) External: the CSS is loaded from a <link> and the JavaScript from the src attribute of the <script> tag.
> Useful tools / References
![Page 5: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/5.jpg)
styles up top, scripts down bottom
<head><meta charset="UTF-8"><title>Browser Diet</title>
<!-- CSS --><link rel="stylesheet" href="style.css" media="all"></head>
<body><p>Lorem ipsum dolor sit amet.</p>
<!-- JS --> <script src="script.js"></script></body>
> References
![Page 6: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/6.jpg)
minify your html
<p>Lorem ipsum dolor sit amet.</p>
<!-- My List -->
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
![Page 7: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/7.jpg)
minify your html
<p>Lorem ipsum dolor sit amet.</p> <!-- My List --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li></ul>
On the right side you see a few samples of HTML Compressor results with default settings.
> Useful tools / References
![Page 8: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/8.jpg)
try out async
<script src="example.js"></script>
<script async src="example.js"></script>
> References
![Page 9: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/9.jpg)
CSS
![Page 10: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/10.jpg)
minify your stylesheets
.center {width: 960px;margin: 0 auto; }
/* --- Structure --- */.intro {margin: 100px;position: relative; }
.center{width:960px;margin:0auto}.intro{margin:100px;position:relative}
![Page 11: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/11.jpg)
minify your stylesheets
For those that use pre-processors like Sass, Less, and Stylus, it's possible to configure your compiled CSS output to be minified.
> Useful tools / References
![Page 12: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/12.jpg)
combining multiple css files
<link rel="stylesheet" href="structure.css" media="all"><link rel="stylesheet" href="banner.css" media="all"><link rel="stylesheet" href="layout.css" media="all"><link rel="stylesheet" href="component.css" media="all"><link rel="stylesheet" href="plugin.css" media="all">
<link rel="stylesheet" href="main.css" media="all">
> Useful tools / References
![Page 13: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/13.jpg)
prefer <link> over @import
There's two ways to include an external stylesheet in your page: either via the <link> tag:<link rel="stylesheet" href="style.css">
Or through the @import directive (inside an external stylesheetor in an inline <style> tag):
@import url('style.css');
When you use the second option through an external stylesheet, the browser is incapable of downloading the asset in parallel, which can block the download of other assets.
> References
![Page 14: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/14.jpg)
JAVASCRIPT
![Page 15: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/15.jpg)
load 3rd party content asynchronously
var script = document.createElement('script'),scripts = document.getElementsByTagName('script')[0];
script.async = true; script.src = url; scripts.parentNode.insertBefore(script, scripts);
Alternatively, if you want to load multiple 3rd party widgets, you can asynchronously load them with usingthisscript.> Video / References
![Page 16: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/16.jpg)
cache array lengths
var arr = new Array(1000), len, i;
for (i = 0; i < arr.length; i++) {// Bad - size needs to be recalculated 1000 times
} for (i = 0, len = arr.length; i < len; i++) {
// Good - size is calculated only 1 time and then stored}
> Results on JSPerf
![Page 17: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/17.jpg)
cache array lengths
var links = document.getElementsByTagName('a'), len, i; for (i = 0; i < links.length; i++) { // Bad - each iteration the list of links will be recalculated to see if there was a change} for (i = 0, len = links.length; i < len; i++) {
// Good - the list size is first obtained and stored, then compared each iteration} // Terrible: infinite loop examplefor (i = 0; i < links.length; i++) { document.body.appendChild(document.createElement('a'));
// each iteration the list of links increases, never satisfying the termination condition of the loop
// this would not happen if the size of the list was stored and used as a condition}> References
![Page 18: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/18.jpg)
avoid document.write
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
Attention: document.write performed during or after window.onload event replaces the entire content of the current page.
<span>foo</span><script>window.onload = function() {document.write('<span>bar</span>'); };</script>
<span>foo</span><script> setTimeout(function() {document.write('<span>bar</span>');}, 1000);window.onload = function() {// ...};</script>
> References
![Page 19: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/19.jpg)
minimize repaints and reflows
There is no doubt that excessive reflows and repaints should be avoided, so instead of doing this:
var div = document.getElementById("to-measure"),
lis = document.getElementsByTagName('li'), i, len;
for (i = 0, len = lis.length; i < len; i++) {
lis[i].style.width = div.offsetWidth + 'px';
}
![Page 20: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/20.jpg)
minimize repaints and reflows
Do this:
var div = document.getElementById("to-measure"),lis = document.getElementsByTagName('li'), widthToSet = div.offsetWidth,i, len; for (i = 0, len = lis.length; i < len; i++) {lis[i].style.width = widthToSet + 'px'; }
> Demo / References
![Page 21: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/21.jpg)
avoid unnecessary dom manipulations
// really bad!for (var i = 0; i < 100; i++) { document.getElementById("myList").innerHTML += "<span>" + i + "</span>"; }
// much better :)var myList = "";
for (var i = 0; i < 100; i++) {myList += "<span>" + i + "</span>"; }
document.getElementById("myList").innerHTML = myList;
> Results on JSPerf
![Page 22: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/22.jpg)
minify your script
BrowserDiet.app = function() {
var foo = true;
return {bar: function() {// do something
} };
};
BrowserDiet.app=function(){var a=!0;return{bar:function(){}}}
> Useful tools / References
![Page 23: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/23.jpg)
combine multiple js files into one
![Page 24: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/24.jpg)
Before<script src="navbar.js"></script><script src="component.js"></script><script src="page.js"></script><script src="framework.js"></script><script src="plugin.js"></script>
After
<script src="main.js"></script>
> Useful tools / References
![Page 25: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/25.jpg)
JQUERY
![Page 26: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/26.jpg)
always use the latest version of jquery
http://code.jquery.com/jquery-latest.js
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Just like the wise Barney Stinson says, "New is always better" :P
> References
![Page 27: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/27.jpg)
![Page 28: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/28.jpg)
use for instead of each
The use of native JavaScript functions nearly always results in faster execution than the ones in jQuery. For this reason, instead of using the jQuery.each method, use JavaScript's own for loop.
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }
> Results on JSPerf / References
![Page 29: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/29.jpg)
don't use jquery...
...unless it's absolutely necessary. :)
Why use the attr() method to search for an ID?
$('a').on('click', function() {console.log( $(this).attr('id') );});
If you can can get this attribute natively through this:
$('a').on('click', function() {console.log( this.id ); });
And it's faster.> Results on JSPerf / References
![Page 30: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/30.jpg)
IMAGES
![Page 31: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/31.jpg)
use css sprites
This technique is all about grouping various images into a single file.
.icon-foo {background-image: url('mySprite.png');background-position: -10px -10px; }
.icon-bar {background-image: url('mySprite.png');background-position: -5px -5px;
}
> Useful tools / References
![Page 32: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/32.jpg)
data uri
Before:
.icon-foo {background-image: url('foo.png'); }
After:
.icon-foo {background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D'); }
> Useful tools / References
![Page 33: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/33.jpg)
don't rescale images in markup
<img width="100" height="100" src="logo.jpg"alt="Logo">
> References
![Page 34: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/34.jpg)
optimize your images
> Useful tools / References
![Page 35: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/35.jpg)
SERVER
![Page 36: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/36.jpg)
enable smart caching
ExpiresActive On ExpiresByType image/gif "access plus 6 months"ExpiresByType image/jpeg "access plus 6 months"ExpiresByType image/png "access plus 6 months"ExpiresByType text/css "access plus 6 months"ExpiresByType text/javascript "access plus 6 months"ExpiresByType application/javascript "access plus 6 months“
> References
![Page 37: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/37.jpg)
gzip
AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/cssAddOutputFilterByType DEFLATE application/javascript
> References
![Page 38: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/38.jpg)
BONUS
![Page 39: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/39.jpg)
diagnosis tools: your best friend
If you'd like to venture into this world of web performance, it's crucial to install the YSlowand PageSpeed extensions in your browser—they'll be your best friends from now on.
Or, if you prefer online tools, visit the WebPageTest, HTTP Archive, or PageSpeed sites.
In general each will analyse your site's performance and create a report that gives your site a grade coupled with invaluable advice to help you resolve the potential problems.
![Page 40: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/40.jpg)
that's it for today!
And remember, like all things in life, there's no such thing as a silver bullet.
![Page 41: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/41.jpg)
Questions
![Page 42: Site optimization](https://reader033.fdocuments.in/reader033/viewer/2022052601/55997aab1a28abf20f8b4618/html5/thumbnails/42.jpg)
Thank you!