Imagine arriving at a grocery store with your shopping list in hand. You haven’t even entered the store yet and you already know exactly what you want. However, for some reason the doors won’t open unless you agree to wait.
Would you?
Considering how essential food is for survival, I am guessing that some people might be patient enough to wait for a completely undetermined amount of time. Others might wait briefly before attempting to lodge complaints with the store (me) or simply take a hint and locate another nearby grocery store to purchase similar or even identical products.
As frustrating as this hypothetical may sound, it happens every single day on the web. Slow page speeds prevent your site from effectively opening its door to new visitors. They provide a poor welcome mat and can be one of the greatest deterrents of potential customers for an online storefront or company website.
Now is the Time To Improve Your Page Speed
If you have never assessed the speed of your business’ website, then now is the time. There are a number of (free) easy-to-use tools that will identify areas of your site that can be further optimized and enhanced.
Regardless of your particular industry or niche, reference this prioritized strategy for addressing common speed issues when it comes time to partner with your developer on some site-wide goals for a faster site.
Test Both Your Desktop & Mobile Site Speeds
Optimizing your site properly should guarantee seamless access for your customers on any screen size or network speed. Google’s PageSpeed Insights tool is extremely helpful for providing details concerning both your desktop and mobile user experience.
While all mobile devices can easily access fast internet connections when they are available, many smartphones and tablets are running off much slower network connections through their cell providers. Online businesses must recognize this migration toward mobile browsing and shopping as simply another profitable opportunity to impress new visitors and retain returning ones.
If a fully responsive user experience is important to your online business, be sure to test your site frequently on as many mobile devices as you have access to. Addressing and prioritizing issues with your site’s speed will be easier with a basic understanding of how fast or slow your site loads on a variety of network speeds and devices.
“The fastest and best optimized resource is a resource not sent.”
Since there is no definitive, one-size-fits-all guide for optimizing every site on the web, speeding up yours will require some unique decision making. This advice, however, holds true for every site on the web.
Sometimes the best method for optimizing a particularly unwieldy resource is simply to not send it. When you take the time to thoughtfully consider how your customers are going to engage your site on different screen sizes, this usually happens naturally.
This ultimately places a greater emphasis on the effectiveness of your design process. Designers today should be able to recognize these implications, especially when designing for the mobile web, before creating resources that force roadblocks upon the developer during the construction/optimization.
Leverage Browser Caching
Your browser is smart. In fact, your browser is so smart that it knows if you have visited a website in the past and even keeps a temporary snapshot of that site’s resources and content in what is called a “cache.”
Google reminds us that “fetching resources over the network is both slow and expensive: the download may require multiple roundtrips between the client and the server, which delays processing and may block rendering of page content, and also incurs data costs for the visitor.”
In the event that your site’s content hasn’t changed since the customer’s last visit, their browser can reference the local cached page for more immediate results instead of sending a new request to the web server.
From the business/server side, there are ways to ensure that the right resources are being properly cached in your visitors’ browsers, and for the appropriate amounts of time. Providing specific caching policies to each of your resources can help your site’s speed tremendously by allowing the browser to simply “reuse a previously fetched response” whenever possible for return users.
For more specific caching instructions, you can reference Google’s Caching Checklist.
Reduce HTTP Requests
As we have discussed, caching can effectively reduce response times when a customer decides to return to your site. But what about that first visit?
When someone visits your website for the first time there is a lot going on behind the scenes. An overwhelming majority of the time it takes for most sites to appear onscreen is exhausted downloading the necessary front-end components that make the pages visually interactive. Front-end components include your site’s images, stylesheets, scripts and flash files.
One method for increasing the response time and minimizing the number of HTTP requests is to combine multiple, related files into fewer servable resources. However, this does not mean that reducing your site’s entire resources into a single file will guarantee the best results.
For commonly used graphic elements, you can combine your site’s images in a single master graphic and utilize sprites with CSS to only display a section of the master graphic that is needed. Sprites result in a single image, loaded once, and reused for different display elements. Here’s an example of an image sprite that we use on one of our client sites for A Place at Home.
Optimize Images
Some of my favorite websites feature large, eye-catching photography. Some of my least favorite websites also feature large, eye-catching photography.
Hint: My favorite sites are the ones that load fast.
But what is a website without photos? Most online businesses would have a difficult time selling anything without the help of visual aides. Ultimately, the use of images is encouraged but should never translate into a slower website.
Remember: Our eyes are not capable of noticing the minute differences between an effectively optimized image and an unaltered one, even at the highest quality.
If your site contains a large media library, like on a photography site or ecommerce shop, image optimization should be a top priority. Consider including a “Save for Web” step for proper compression within your site’s ongoing content population process or use a third-party plugin to optimize all the images on your site.
You can also slim down your site’s media resources by removing images from old/dead pages and replacing the largest photos on the site with ones with better compression. In need of quick results? Check out Compressor.io, a powerful online tool that can reduce an image’s size while still maintaining high visual quality. For more specific instructions on quality compression techniques, reference Google’s Image Optimization Checklist.
For heavy traffic sites, you can even go a step further and use a Content Delivery Network (CDN) which will take your media files and duplicate them on servers around the world. When a visitor visits your site, the CDN determines the fastest and closest server to the user and serves the media files from that location to speed up the network delivery time.
Minify Code Resources
Have you ever looked at your site’s source code? Notice, I didn’t say look at it and understand what is going on. If you haven’t, take a look under the hood of your site and see what’s going on.
Hint: This can be accomplished with Right Click > View Source.
As it appears now, your source code can be easily understood by both humans (with basic coding chops) and computers (more specifically, their browsers). You’ll notice the file contains spacing and formatting which helps your developer to quickly and easily make sense of the page’s construction and also return to make edits and updates. However, none of this useful spacing and formatting means anything to your browser.
A helpful process called minification removes any extras, including things like code comments, extra spacing and unused code, that do not affect the manner in which the resource is interpreted by the browser. As a proven method for increasing site speeds, Google highly recommends the minification of all HTML, CSS, and JavaScript resources on your site.
Are you in need of a brand refresh or website redesign? Improve the quality and impact of your online marketing with the power of custom design.