Three Major Reasons to Care About the Speed of Your Website :
- Google uses the loading time of a website as part of its quality score calculation.
- Google has been rumored to use loading time as part of the organic ranking calculation.
- Studies have shown that slow websites lose customers.
Magento is a resource hungry program. Even the most basic Magento site can take longer than 6 seconds to load, which is about 4 seconds too slow, according to Google Webmaster tools. Most Magento sites are going to take closer to 10 seconds to load, which is far too slow. There are a few things that make Magento a slow old beast:
- Javascript and CSS can be very large files. Some Magento sites we’ve tested have them at almost 1MB. These files are the first to load, and (pretty much) everything else waits on these files.
- Product Images on category pages, when done incorrectly, can take up a massive chunk of bandwidth.
- Poorly selected hosts can greatly slow the speed of your website. Because Magento requires a lot of bandwidth and processing power to run, be careful when choosing who to host with.
Although Magento has some of its own tricks to keep the site moving fast, there is still a lot you can do to improve the speed.
< >The Important Part:
Who you choose as your web host matters. It matters for the first second of load time, because TTFB is largely based on the server your website is hosted on. It also impacts the speed in which queries are executed. Total load times can be reduced by 50% just by switching to a better host. A couple things to keep in mind when selecting a host:
- Shared/Cheap hosting will have a big impact on performance.
- Without a CDN, the distance from your host to your customer will matter.
< >The Optional Parts:
If you are serious about improving your load times, then you might want to consider your theme. Big images used as backgrounds, sliders, buttons, etc. may look great, but they can have a big impact on your performance. Whenever possible, use CSS and HTML styling to get the look you want. If you have an image as a background, try to ensure that it is correctly optimized. If you have buttons, try to load them as a sprite.
Additionally, some sites have links to external images through safe shopping icons, etc. We have found that, as these icons are frequently requested by many websites at the same time, they can have a big impact on the loading time of a site. We highly recommend running load impact to find out what may be slowing your website down. There may be images or external files that can be moved to your own server so you can host them yourself.
There are some changes you can make, if you have access to your server, that will improve its performance.
< >The Easy Parts:
Here are four quick things you can do right now. They are not difficult, and can have a big impact on load times.
- Enable compression on your host. This is usually in your c panel, under optimization. GZIP compression reduces the size of CSS and JS queries to something more bearable. One Magento installation that we looked at had nearly 1MB of JS and 500kb of CSS. Aside from optimization issues there, compression reduced these files down to less than 200KB.
- Get Google to host Jquery. Jquery can take care of a large chunk of the Javascript loaded on your site. Getting Google to do all the work allows your server to work on something else, and as the file is loaded from Google, it will load a lot more quickly than through your pipeline.
- Enable browser caching. For some reason this does not happen automatically, or correctly, through Magento. By encouraging browsers to cache images for a long time, it means that every time someone revisits your site, unchanged images are not downloaded again.
- Minify JS and CSS. Text based files like Javascript and CSS have a lot of white space, some have comments that are useful for developers but nearly useless for browsers. Minifying the files can cut out most of that dead space. Also, combining multiple JS and CSS into one big file, rather than several smaller files. This reduces the number of requests, which increases the compression ratio, and allows you to move all your CSS into the start of the download. Another option here is to install the Fooman Speedster module.
< >Optimize Your Site:
On a product page that loads a header of 200KB every time, it only takes 1000 customers for that file to become 200MB of bandwidth. Optimize your images, both with the right compression, and the right file type. Usually you would pick a PNG for your logo/text images and a JPG for your product/lifestyle images. You should also make sure that your JPGs are on the lowest file compression without compromising the quality of the image. Sliding banners, logos, headers and background files are usually the biggest culprits of under-optimization.
Another thing that is easily dismissed, but can make a big difference, is serving images that have been scaled in HTML. If your banner is supposed to be 900 x 150px, then make sure you optimize it at that size before you upload it. Any dimensions larger than that and you are wasting bandwidth.
There are also benefits to optimizing your theme’s JS and CSS manually. It can be tricky if you are not a developer, and even then it can be difficult. Using something like cleancss and unusedcss can help remove CSS that isn’t used, is duplicated, or poorly set out. CleanCss reduced a standard CSS file from 107.076KB down to 81.004KB, a reduction of 24.3%. UnusedCSS reduced the same file by about 57% again. Including connection and TTFB, a 100kb CSS file can still take almost a full second to download when not optimized.
Getting CSS and JS correctly optimized is important because until these files have been loaded fully, the majority of the assets on your site will not start downloading. Images can be downloaded simultaneously when the CSS has been loaded, so the faster these files are loaded, the faster everything else can be loaded.
< >The Marginal Parts:
Using a CDN reduces the impact on your server, and can decrease the load times for users by a significant amount. A CDN is a network that stores copies of your images/JS/CSS etc on multiple locations. There are a lot of different implementations of a CDN, and Magento offers a few different options. The gains may be questionable when you have less than 1000 customers a week, but on global websites the process is recommended. Amazon S3/Cloud is one option, Coral CDN is another. You can even trick your own server into acting like a CDN. However OnePica seem to have the most reasonable solution.