Webperf 101: How to speed up your Website

Michael Ruescher

SpeedometerFast load times and a snappy interface is a key indicator of quality for any website. Here's the key things to know about achieving the kind of web performance that keeps your visitors happy and coming back to your site. When it comes to web perf, less is usually more.

Start Measuring

Don't work blindly, you need to know how well your current site is performing. Obtaining performance metrics gives you a frame of reference and helps you identify where there is room for improvement.

Learn how to use the Network Panel of your favorite browser inspector.

Use a browser extension like Google PageSpeed for Chrome and Firefox to evaluate performance and get suggestions for how improve it.

Use tools like Pingdom Tools to test the load time of your site from an actual server.

Images

Images are often the largest portion of a sites page weight. Consider each image and wether it is actually necessary, if not, get rid of it. Consider alternatives like CSS based visuals, icon fonts, and SVG.

For any images that you choose to keep, make sure they are properly sized and as compressed as possible. You can use a free image editing program like GIMP or Seashore for basic compression, look for “save for web” settings. You can aslo try out Yahoo's Smush.it for a browser based image compression service.

If you have lots of really small images, consider spriting them with something like Spriteme.org to reduce http requests and page weight.

Optimize your CSS

Link to your CSS in your document <head>. This way the browser can download and parse the stylesheets first before it gets around to rendering the html.

Concatenate and minify it. Use your build tool of choice, like Grunt or Codekit. If you're using Webpop, you can just use the <pop:bundle> tag.

In your actual CSS markup, you want to get rid of redundant style declerations and write efficient selectors. Also, get rid of deprecated vendor prefixes. For example, you should no longer prefix border-radius or box-shadow. The amount of people using browsers that would require the prefix is just too small for it to be worth it and is shrinking every day.

Javascript

Whenever possible, load your scripts in the footer right before the closing </body> tag, otherwise browsers will hold off on rendering the page until the the scripts are done loading and have completed their exectution.

Just like CSS, you should concatenate and minify your JS to reduce page weight & http requests.

Use fewer and newer libraries. Open source libraries like jQuery often get faster and lighter as they mature.

See if you can do without it, e.g. check out this slider gallery which is built without any javascript at all!

Use a CDN and cache your assets

A content delivery network (CDN) will make sure that your site assets are served to your site visitors from the server that is the fastest and closest to them. Example CDN providers include Akamai, Cloudfront, MaxCDN and Cloudflare.

Set aggressive caching headers and use a cache buster to make sure that browsers and intermediaries like CDN servers will cache your assets unless they have been modifed. This will make it so browsers don't need to download things more than once.

Webpop automatically serves all your dynamic media content through the Akamai CDN with the right caching headers. And if you use the <pop:bundle> tag it will also automatically cache and serve your javascript, stylesheets and any media assets referenced by those stylesheets via Akamai as well.

Conclusion

These are just the basics, but if you actually apply all this stuff to your site, you will be ahead of 99% of the sites out there. If you're using Webpop, try making a new version of your site and then applying what your learned in this list and then compare it with the origional version. Use the dynamic image resizing of the <pop:image> tag and the asset optimization of the <pop:bundle>  tag and you'll be 90% there. Writing efficient markup is up to you!

« Back to Blog Index

Sign up now

30 days free trial. Sign up in 60 seconds. Upgrade, downgrade, cancel at any time.
×
blog comments powered by Disqus