When you run tests using any of the three major online tests (Google Page Speed Insights, Pingdom or WebPageTest), there’s a lot of info to absorb. It would take hours to go over every detail of every report, but I wanted to give you a quick rundown on some of the major messages and what you can and can’t do easily.
I’m going to use abbreviations for each service so you know what name each service gives each error type, so P = Pingdom, GPSI = Google Page Speed Insights and WPT = WebPageTest. I’m going to go over the major messages that may come up. There are others and Pingdom (and gtmetrix) have a few more, but they are all of lesser value in my opinion. I’ll also outline which services can help with each message but later we’ll discuss some of the ins and outs of each service compared to each problem. I’ll abbreviate those solutions as follows:
Your Store Wizards Speed Wizard
http://yahoo.yourstorewizards.com/load-speed-optimizer.html
Your Store Wizards Product Image Optimization
http://yahoo.yourstorewizards.com/image-optimization-service.html
Cloudflare
https://www.cloudflare.com/
Manual Optimization
Optimize Images (GPSI)/Compress Images (WPT)
Solved/Mitigated by:
In a nutshell, your image files are too large. This isn’t the dimensions of the image but the actual size of the file needing downloading (weight of the image file itself).
This is most often one of the biggest issues on most eCommerce sites. Images are a majority of the data needed to download to display a page, and so optimizing makes a big difference. Most eCommerce hosts can resize and to a varying degree optimize the images, but they are often far from ideal. Framework images (header, footer, buttons, etc) are also usually used direct and need to be optimized as well. This message also, particularly on Google Page Speed Insights may mention using the appropriate size as well. We’ve seen many cases where the image isn’t optimized but even worse, it’s loading a much larger image (height and width) than is used on the page. This means the browser is loading a lot more data than is needed. If an image is twice the height and width of what’s displayed you’re automatically loading four times the data than you need (not even accounting for optimizing).
One other thing to note, is that scoring on these tests matter, but speed and quality of the images for the user also matter. Sometimes you need higher quality (usually on larger product images) and sometimes you can reduce quality without it being noticeable and increase load speed. So if you even score ok on this item, if you can reduce load time further it can be helpful, but keep an eye that quality doesn’t reduce to a level to harm conversions and sales.
Enable Compression (GPSI)/Compress Transfer (WPT)
Solved/Mitigated by:
This message may also reference gzip or gzipping content. What this means is the server serving your content will compress the files sent prior to sending across the internet to your browser (when your browser supports it – which is every major one). So this support on your server or CDN is a nice boost. Yahoo!’s CDN doesn’t currently support compression so files loaded in the files section will show this error.
Leverage Browser Caching (P/GPSI)/Cache Static Content(WPT)
Solved/Mitigated by:
When a browser sees a file to be used on a website, it first checks to see if it has a cached copy of the file so it won’t have to download and can use it’s local cached version. This message is basically stating that the server sending the file has marked the file with a short lifespan (how long the browser keeps it before it has to re-request). For some 3rd party services short lifespans are needed, and often they are used when you can’t change filenames easily.
Eliminate render-blocking JavaScript and CSS in above-the-fold content (GPSI)
Solved/Mitigated by:
This one is really two items in one. Render blocking javascript and CSS are both issues when loaded early but take two different tactics to resolve. When a page loads and reaches a javascript file or inline script, it must load the file and run whatever is in it, before it continues. There are options to delay this running using an asynchronous load, or a defer tag, but the scripts must be set up to still operate properly if loaded later. If not, then to really maximize this would require rewriting the scripts and how they function.
Optimizing CSS is easier AND more challenging all in one. CSS by definition is simpler to combine because it doesn’t rely on page elements existing when it loads. But at the same time you can’t just move it all later or the site may not display properly until it loads. So the goal is to determine the “critical” css, and load it inline or early. Multiple page types, and dimensions for responsive sites, means there can be a fair amount of complexity extracting the key portions properly.
Minify Javascript (GPSI)
Solved/Mitigated by:
This mostly has to do with compressing Javascript in the actual JS file. This means taking out extra spaces, carriage returns, comments, etc. The one down side is if you compress the files it makes them harder to work with, change and debug later. So depending on how often the file is updated, and what option you use for a solution, you have to weigh the pros and cons.
Minify CSS (GPSI)
Solved/Mitigated by:
Ok. This one is pretty much the same as the Javascript, including what each service can do. It just has to do with your sites CSS (which controls the format/layout of the page) instead of the javascript.
Avoid Landing Page Redirects (GPSI)/Minimize Redirects (P):
When a url is requested by the browser, often the actual file may not be at that url but it redirects to another url to obtain the file. This adds a little bit (depending on the server) to the time to serve the file/resource. So when possible, use direct references to the files.
Effective Use of CDN (WPT):
Solved/Mitigated by:
Using a CDN helps guarantee not only the files are served quickly but also from a location nearer to the visitor. Most eCommerce hosts give you a CDN so most is often already covered. But if you do see this warning, you’ll want to review what files aren’t on a CDN. It could be 3rd party services (not much you can do), or files that you do have access to that are on standard hosting somewhere. Move them if possible to a CDN.
Reduce Server Response Time (GPSI)/First Byte Time (WPT):
Honestly, let’s hope you don’t ever get this message. It may happen at times but as a rule with hosted providers you shouldn’t see this consistently. If you do, it means analyzing if there is something going on with your site, or server (which you only can impact if you’re hosting the site such as WordPress or Magento).
Prioritize Visible Content (GPSI):
This is also a rare error that most sites won’t see. But if you do, it requires analyzing why your site is laid out and served in such a way that the page can’t display without multiple server round trips.
Other Errors:
As I mentioned, there are other possible errors/warnings you may see. I’ve listed a few below but these are all of lesser value or rarer to find. So unless you see horrible scores on these, I would address all the ones I listed already first.
Minify HTML (GPSI)
Keep-alive Enabled (WPT)
Serve static content from a cookieless domain (P)
Remove query strings from static resources (P)
Avoid Bad Requests (P)
Specify a cache validator (P)
Specify a Vary: Accept-Encoding header (P)
Frequently Asked Questions
Can these services work together?
Yes, they can and can work well. Each service has it’s strengths and can work together nicely to get the benefit of each. For example, Cloudflare provides fast DNS and Security but can’t touch images on a Yahoo! Store to optimize (or Javascript and CSS files), so the Speed Wizard service and Product Image Optimization can optimize those while letting Cloudflare deal with DNS, Security and other aspects.
If I use the speed service from Your Store Wizards, or Cloudflare, is it harder to update or add files? Do I have to update a different location? If I disable will I have old files?
The beauty of using Cloudflare or the Speed Wizard from Your Store Wizards is that you only update your base files where they exist now. Any updates you put in your base files will automatically get used as is. And if you should disable either, the base file would still be used. The benefit of the Speed Wizard, since it can impact files not in your domain, is that we automatically make a copy of the base file on every publish and reoptimize. So any updates or changes are automatically applied without you doing anything new or different. The only case you’d have to do anything is if you add a new file, you’d want to register it with Speed Wizard so it could be optimized.
Questions? Feel free to ask us…
Note: This is part 3 of 4 blog posts related to Site Speed. Below are the others.
Site Speed – Part 1 – Why Do We Care?
Site Speed – Part 2 – Testing Tools