Data from major Internet providers like Google, Amazon and Akamai has shown that how fast a website loads significantly affects user behavior. And because users don’t like slow sites, Google uses load time as a factor in computing PageRank results. In short: It pays to be fast.
There are a lot of factors that can affect your site’s performance. While some are dependent on your hosting environment, there are plenty of factors beyond server/internet speed (and the obvious sheer number of bits to be loaded) that affect your page load time, such as HTTP connections, DNS lookups, and asset load sequencing.
If you’re a front-end developer and you’re serious about building websites that load as fast as possible, come learn about techniques (such as non-blocking Javascript) you can use in your markup and themes — whether on WordPress or some other system — to help things load as quickly as possible. We’ll also review tools you can use to assess whether your site is doing all it can to load quickly.
10. BLOATED DOM & CSS
make it clean before you make it mini
11. MORE ELEMENTS = SLOWER
<body class="page">
<div id="wrapper">
<div id="page">
<div id="main">
<div class="main-side">
<aside id="sidebar">
...
</aside>
</div>
</div>
</div>
</div>
</body>
You can do a count with:
!
$(‘*’).length;
!
or
!
document.
getElementsByTagName(‘*”).
length
12. SIMPLE SELECTORS
html body div#main article#post-22 p a.inline {
property: value;
}
.inline {
property: value;
}
VS.
ul li {} is slower than ul > li {} which is slower than .ul-li {}
14. HTTP CONNECTIONS
Each asset (script, image, css file,
font, etc) is retrieved via an HTTP
connection.
Each connection takes a moment
to start due to overhead.
17. COMBINING CSS FILES
Use a tool like SASS that combines
them for you
Only write a single style.css
Use a plugin (e.g. W3 Total Cache) to
combine (& compress!) them for you.
18. COMBINING JS FILES
Use a plugin (e.g. W3 Total Cache)
to combine+compress
them for you.
Manually put all your jQuery
plugins into a single file.
19. COMBINING JS FILES
WordPress is especially prone to
loading lots of JS files
It’s worth the effort to mitigate
against this. Seriously.
20. CSS SPRITES
Put all your images into a single
file, and use CSS to position the
background properly.
21. CSS SPRITE EXAMPLE
.sprite-ben {
height: 117px;
width: 91px;
background-image: url('img/sprite.png');
background-position: 0 -525px;
background-repeat: no-repeat;
}
overall sprite.png file
measures 304 x 910
but my headshot is a small part
22. DON’T USE IMAGES
CSS3 provides alternatives:
Gradients
Rounded Corners
Text and box shadows
Rotation
24. SEQUENTIAL VS. PARALLEL
Browsers can load some
assets in parallel, such as
CSS files, images, and
fonts. This is good.
But some assets —JS files
— are loaded in sequence
and block others.
25. CSS AND SCRIPTS
JS should be at bottom of page.
CSS should go at the top of your
page and be loaded via
<link> not @import
30. FOR MORE
Google “Steve Souder”
https://developers.google.com/speed/docs/best-
practices/rules_intro
!
http://developer.yahoo.com/yslow/
!
https://developers.google.com/speed/
pagespeed/