Recently we have had a report from a client of ours who has their images loading fairly slow on their own website. So to help this out, as well as help prevent/fix future issues with others we have collected information from 2 outside sources to help improve your performance.
Unoptimized images were the clear winner, impacting 90% of the Alexa Top 1000. In this context, we refer to unoptimized images as any image that can be reduced in size without visual impact to your user, also known as “lossless” optimization. Images that are optimized using lossless methods are visually identical to their original images, just stripped of extraneous metadata that helps describe the image (useful to the designer, not needed for the end user).
A few best practices to consider:
For more information about image optimization, check out this presentation as well.
Enabling HTTP compression on your webserver can dramatically reduce the size of the downloaded page, significantly improving load time. This is a high impact change, but is not always as easy as it may seem. We actually did a dedicated blog post on this topic over a year ago here, so i’ll defer most of the details to that.
Browsers make an individual HTTP request for every background image specified in your CSS pages. It is not uncommon for over half of your total HTTP requests from a single web page to be used for loading background CSS images. By combining related images into a small number of CSS sprites, you can significantly reduce the number of HTTP requests made during your page load. More information on CSS Sprites can be found here.
HTTP Caching allows the browser to store a copy of an image for a period of time, preventing the browser from reloading the same image on subsequent page loads and thus dramatically increasing performance. To cache your images, update your web server configuration to provide a expires header to your image responses from the server. For images that do not change often, you should specify a “far future” expires header, typically a date 6 months to a year out from the current date.
Note that even with a far future Expires date, you can always change the image later by modifying the referenced filename using versioning, for example MyImage.png become MyImage_v2.png For more information, see revving filenames.
Most browsers typically support 2-4 concurrent downloads of static resources for each hostname. Therefore, if your page is loading many static resources from the same hostname, the browser will bottleneck in a stair-step fashion downloading all the content. By splitting resources across 2 different domains, you can effectively double browser throughput downloading the required links.
Note that it may be administratively difficult to physically move your files to different hostnames, so as a clever “trick” you can utilize DNS CNAME records to map different hostnames to the same origin. For example, static1.example.com and static2.example.com could both map to static.example.com, thus prompting the browser to load twice as many links concurrently as before, without requiring you physically move the files on the server. For more information see Maximizing Parallel Downloads in the Carpool Lane
Of course too much concurrency has its own drawbacks on performance, so testing should be done to find the optimal balance.
Want to see if your website has these problems? Try a free performance scan to learn more about these and 395 other performance best practices.
Fancy isn’t always fun. In fact, Flash can seriously slow down your website. Flash is the sumo wrestler of software – it’s big and bulky. And here’s one more vote against it: Flash is almost always incompatible with mobile devices, meaning that a large chunk of your audience won’t even be able to access it. So, if you’re using Flash, you’re slowing down your site for minimal benefit.
Another common culprit for a slow-running website is external media usage. That means cutting down on the videos and shiny stuff – they’re like carbs. Use them in moderation. Although you may find a fun video or smart slideshow that you think is relevant to your business, think twice before embedding someone else’s media into your site. Once you embed external material into your site, your pages will only run as fast as the host site. In other words, if that external site is having a particularly slow day, your site may run slowly too. Don’t let another site drag yours down! Whenever possible, it’s smart to host all content on your own server.Tags: Cache, Compression, Embed, Flash, Optimize, Performance, Slow
DigitalCoreHQ LLC VWThemes