Fast 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.
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 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.
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.
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.
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.
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