Did you know that users on average are willing to wait around 9 seconds for your website to load before leaving? Well, I didn’t either. These numbers showed up in the results of a study done in 1994. The internet today is much different than it was back then. Significantly faster, however websites are much heavier. Today, 40% of users will abandon a page if it takes over 3 seconds to load and 47% expect it to load in 2 seconds or less. A 1 second delay can cause up to 7% loss in conversion rates. That means if you’re website is making $100,000 daily, you’d face a lost off $2.5 million every year.
How time is perceived while using the internet is different than how it is perceived doing other things. Consider this, 0.1 second is how long users can wait before losing that feeling of something happening instantaneously. One full second is how long the user’s flow of thought will remain uninterrupted and any thing that takes longer than 10 seconds will encourage the user to start doing other things while they wait. In this case, an indicator to when a task will complete is very helpful.
Those are high expectations. Don’t be alarmed though, today’s internet offers technologies that help you optimize your website’s performance for you and your business.
These general guidelines are by no means all that you can do to improve your website’s performance, but it’s a great starting point. If you are unfamiliar with some of the details, please have those who are working on your website go through these guidelines.
• Use Google PageSpeed to analyze your website’s performance. This tool helps you analyze and evaluate your website’s performance and suggest recommended best practices.
• Use image sprites instead of multiple image files. If, for example, you intend on using a set of icons (or buttons) throughout your website, plan on having them in one image file instead of many. This helps cut down on those extra requests by users to your server to pull many files when it could pull one instead.
• Combine CSS and JS files when possible. CSS (Cascading Style Sheets) files contain the instructions that tell browsers what your website should look like. JS (Javascript) files contain the instructions to how your website should behave. Sometimes it makes more sense to have separate CSS (or JS) files for your website for different devices. Consolidating those into one can boost your website’s performance significantly.
• Add expire headers on certain files that are infrequently updated using .htaccess. There’s no reason as to why users should download the same unchanged content off your website multiple times every time they visit your website? By setting expire headers on files that are not constantly updated, users will not have to download or request those files the next time they visit your website.
• Put your Javascript at the bottom of your code. Having the instructions that tells your website how to behave at the bottom of your code works best because your website and all its content is loaded and ready to be manipulated. Otherwise, these instructions, being on top, won’t know what to manipulate if the rest of the code hasn’t loaded yet.
• Compress or minimize your CSS/JS files. By removing unnecessary spaces, breaks, and characters, you can shred some few kilobytes off your CSS/JS files. You might think a few kilobytes do nothing, but they do. Especially if you expect a lot of users to visit your website.
• Enable gzip on your server. What this does is that when users request files off your server (your website’s contents), they receive compressed versions of those files that their browsers will uncompress before displaying them.
• Compress images when possible. Having large or high-resolution photographs or graphics on your website can hurt your website’s performance. Compress or resize your images using the many tools available including Photoshop’s ‹Save for web’ built-in feature.
• Use CDN (Content Delivery Networks) when possible. Content Delivery Networks such as CloudFlare or Amazon’s CloudFront can help serve files to your users faster than your server or host will. Their state-of-the-art (very expensive) monster servers are better optimized for speed and delivery than what we can offer. Hosting the files you expect your users to download the most on CDNs can also help improve the performance of your website.
• Add local fallback. Content Delivery Networks are fantastic but imperfect. Though rare, they also can suffer from downtime and performance bumps. You don’t want your website to take a hit because of someone else. That’s why it’s wise to have the files you’ve hosted elsewhere locally, on your server. When your CDN can’t be reached, a local fallback works by serving your users files from your local server or host.
• Limit your file sizes in general. It’s always good practice to constantly keep an eye on your content’s file sizes. Keep an eye out for unnecessarily large content.
• Most of your design requirements can be done using CSS instead of having separate image files. Today, CSS can be used to create all sorts of design elements or styles that in the past were done through image files. From drop shadows, borders, to gradients, and even heavy animations, CSS is your friend.
• Use Firebug or Developer Tools to measure your website or application’s performance. These browser based tools are a must to analyze your website’s performance amongst many other things.
• Remove excessive commenting in your markup to improve performance. Some developers like to leave a great deal of comments in their code for their reference or others. Removing those comments will result in smaller files and in turn better performance.
• Converting small graphic elements to base64 data will reduce number of HTTP requests. Tiny graphic elements such as icons or small buttons can be replaced by their code equivalents, that is, having ‹code’ versions of them instead of actual image files. This improves fetching performance. Convert your images here: http://www.base64-image.de/