Whether it's once a month or once a year, every blogger should take some time to reflect on their site. Consider your strengths, weaknesses, successes and failures, but also take some time to do a technical review of your blog and see what you can tidy up. One of the biggest elements to review is your site speed.
How quickly does your homepage load? When a reader clicks on “recipes” how long does it take to pull that page up? Blogs with a slow site speed are subject to higher bounce rates and Google even takes action; they are known to rank your site lower in search results for poor usability if page load time is deemed too high.
There are TONS of tools out there that do site speed tests, but that doesn't mean they're all trustworthy. I sat down with our dev team to find out what tools they recommend and describe the important take aways from each test below!
What tools should I use?
Ideally, our developers say that the best tool to use for identifying issues on your blog are the built-in "developer tools" in Google Chrome. To find these tools, simply right click when you're in your Chrome browser window and then select “inspect.” Then, toggle over to "Network" to see how and when all of the elements of your page are loading. This tool is a developer's best friend, but can feel a bit overwhelming, so we decided to look for some other tools that may feel a bit easier to navigate.
Option One: GTmetrix
GTmetrix offers a lot of bells and whistles after they finish running an initial speed test on your site. The number one reason we wanted to share this tool is because of the Waterfall section of the test. This is exactly what you would see if you used the dev tools provided by Google Chrome, just a bit cleaner and a lot easier to read, in my opinion. GTmetrix also analyzes and suggests areas where your blog could use some help (but we prefer a different tool for that, which we'll mention as option two).
Option Two: Google PageSpeed Insights
Google is well, Google. They are the leader in just about everything internet. They determine how you should mark up your recipes, how rich snippets get generated and also provide you with the tools to improve your website. PageSpeed Insights shows you what's weighing down your site on mobile and desktop and helps to prioritize what you should tackle first.
For starters, let's talk about how to interpret all of the lines indicating the code that's loading on your site. In the waterfall chart on GTMetrix, anything to the left of the blue line indicates elements rendered BEFORE the main content of your page loads. Anything to the right of the blue line is what renders AFTER your page elements (your text, template, photos) have loaded. Any elements rendering before that blue line are going to affect how quickly a user sees content on your page or not, which is the most crucial question when talking about site speed. You want to present what you can as it's available so that the reader can start reading and interacting with your site rather than waiting around for some ad to appear or social share icons to pop up.
When it comes to your site, the browser knows not to wait for an entire script to load before moving onto the next item in the queue, if it's written "asynchronously." As soon as the system has resources free, it moves onto the next script, as you can see in the photo on the left. This basically avoids the system from processing everything line by line, which would cause your site to load VERY slowly.
Good plugins or site elements may briefly ping in before the "blue line," but will then continue loading asynchronously after your main page comes into view. Your ad network may also talk about how and when their ads are loading; ads that load synchronously will have better visibility and therefore earnings because they'll appear immediately when the rest of your site comes into view. Though you may wish to consider how synchronously loading ads will affect your site speed, the tradeoff may be totally worth it!
Interpreting Google Pagespeed Insights
PageSpeed Insights doesn’t waste time with trying to make things look pretty. There are two tabs, mobile and desktop; pick where you want to get started and everything is laid out very clearly. Paste in your URL, submit, and a full report on how your page stacks up, Google-wise, generates. There are three areas where you can go ahead and poke around: "should fix," "consider fixing" and "passed rules."
Check out the optimize images section and find out which images could use some gzip compression! What-the-what is gzip compression? All those beautiful high resolution photos you take turn into monster-sized files on your computer, turn into monster-sized images on your blog, and ultimately impact on your page load time. We are not telling you to sacrifice your photos (because they make your blog!) and neither is this test; it's simply a tool with suggestions, not requirements. Your photos, shot in raw, probably don't need to be 1,000,000px wide; scale down and zip up what you can. The slower your site, the more you might want to consider changing.
These are just a couple tools and suggestions to get you started. As you run these tests, you might notice certain plugins or elements that are hogging resources on your site. Reach out to the creators or developers and have a conversation--everyone generally wants to be doing what's best for site speed, so sometimes clarification and a conversation will solve all of your concerns. Have any other site speed questions or tools that you like to use? We'd love to hear your feedback! Leave your thoughts in the comments.