I watched Nik Molnar give his presentation over at Techorama on Full Stack Web Performance, which I loved, and which inspired me to write a quick blog post about some of the topics he touched myself.
It is not my intention to re-write Nik's talk. If you're interested, take a look at his demo and presentation here. Or better yet, go listen to one of his talks yourself. I doubt you'll regret it.
For me, he was among the best speakers at Techorama. Check out this great blog post about another session he gave, Introducing Nonacat (Guerilla Hacking an Extra Arm onto GitHub).
I'll be writing some more about performance in the near future. So, this post will most likely be part of a larger series.
The attack plan
Nik's 'attack plan' contains 6 steps:
- Measurable Improvements
Use something to measure performance, tooling is important! - Platform Stability & Environment Neutrality
Use the same machine, remove outside factors that could affect your measurements like cron jobs, primed caches or anti-virus software. - Scenario Focused
You do not 'improve the performance of your application', instead profile scenarios/common click paths and try to make the most common ones faster. - Preset Goals
Make sure you Set Goals Before you do your Analysis - Descending Granularity
Start with the biggest problems first and work your way to the smaller problems.
Tools
There are lots of tools to aid you in debugging your site's web performance.
Hit F12 in any browser to get started with its Developer Tools.
Google's PageSpeed Insights is really good.
Or take a look at my personal favorite, Yahoo's YSlow for FireFox, which integrates nicely into FireBug.
Improvements
There are a lot of ways you can improve the performance of a site. I'll talk about the ones you really, really should implement; and about some special ones I really like.
Fewer Requests
Combine Text Assets
Combine your CSS and JavaScript files!
Images sprites
Combine images into sprites. If you use Visual Studio, the Web Essentials pack can be of great assistance! If you don't, take a look at SpriteMapper or SpriteGenerator
HTTP Caching
A web cache is a mechanism for the temporary storage (caching) of web documents, such as HTML pages and images, to reduce bandwidth usage, server load, and perceived lag. In other words, fewer requests to the server.
To configure this, Windows users: take a look here. ExpressJs users, take a look here.
You can (and should) also use CDNs. CDNs, or Content Delivery Networks, are large distributed systems of servers deployed in multiple data centers across the Internet. The goal of a CDN is to serve content to end-users with high availability and high performance.
You could host a complete site in a CDN. Or, more common, use CDNs to reference commonly used JS and CSS libraries. A popular one is Google Hosted Libraries, where you'll find Angular, jQuery, jQuery UI, etc.
You should also have a fallback mechanism.
Smaller Payloads
Minify Text Assets
Minify your CSS and JavaScript files. Your bandwidth usage will be reduced, as will your load-times.
Optimize Images
Formatting and compressing images properly can save many bytes of data.
If you're looking for a tool, I use Smush.it, which is created by Stoyan Stefanov and Nicole Sullivan. But there are lots of good tools out there.
Enable Compression
By enabling the compression of static files you'll get a reduced transmission between your web server and compression-enabled browsers.
To enable compression, Windows users: take a look here. ExpressJs users, take a look here.
Procrastinate
Procrastination is the practice of carrying out less urgent tasks in preference to more urgent ones, or doing more pleasurable things in place of less pleasurable ones, and thus putting off impending tasks to a later time, sometimes to the "last minute" before the deadline.
Async Scripts
<script src="demo_async.js" async></script>
A pretty nifty HTML5 feature is the async attribute on script tags.
A browser will render a page synchronously. This means that when that browser stumbles upon a script tag it will pause rendering to fetch the external script, and continue when it is downloaded. If, however, the script tag has an 'async' attribute set, browsers that support it will download that script in the background without blocking the rest of the content on the page. The script will execute whenever it is finished downloading.
Note: Setting async=true, async=false or async=anything all mean the same thing. They enable the async behavior. The only way to make a script non-async is to completely omit the attribute.
Note: The async attribute is only for external scripts (and should only be used if the src attribute is present).
Note: The async attribute is supported in Internet Explorer 10 (>), Firefox, Opera, Chrome, and Safari.
Lazy loading
<img lazyload="1" src="http://3rd-party.com/some.png"/>
Enables the lowering of loading priority of a resource. If set to one, the resource loads after higher priority resources (if any).
Note: The lazyload attribute is partially supported in Internet Explorer 11. The Resource Priorities spec is currently a working draft. It will most likely be supported by other vendors in the near future.
Anticipate
Preresolve
<link rel="dns-prefetch" href="domain.com">
DNS-prefetch will cause the browser to start resolving a DNS host name proactively. The browser will performs domain name resolution on links that the user may choose to follow as well as URLs for items referenced by the document, including images, CSS, JavaScript, and so forth. This prefetching is performed in the background, so that the DNS is likely to already have been resolved by the time the referenced items are actually needed. This reduces latency when, for example, the user actually clicks a link.
Prerender & prefetch
<link rel="prefetch" href="http://domain.com/asset.ext">
<link rel="prerender" href="http://domain.com/">
Use prerender and prefetch in to improve your website's navigation. Prerender (also called preload) specifies a webpage to be loaded (rendered) in the background while the user reads the current page and prefetch identifies resources to be downloaded in the background. Because both features download content before it's needed, the resources are instantly available when needed by the user.
Comments?
Leave us your opinion.