Time is money, period. If your website doesn’t load as fast as the industry minimum, you just might be losing potential customers or even investors. We all appreciate that to get a website to be the cousin of Usan Bolt, you might need to spend a pretty dollar. Nonetheless, there are still some quick fixes and best practices to help you increase the speed of your website without breaking the bank, which we will cover in subsequent articles. Before deciding on things to cut back on, you must determine just how fast your website is.
Most times, if you are still in the development stage, you might not want prying eyes on your site; in other words, you might not want third-party sites to see and record the nakedness of your hard work. Although we all know that those plugins (for WordPress sites and certain others), themes, and the rest of the caboodle that you’ve integrated into your site have this very access to your well-kept secret. Don’t worry, you’ll get used to it. Once you install a license of any sort on your website, somebody somewhere gets the details of the website where their license has been activated, and automatic logging begins, but that is not the interest of this article.
You can check the “performance” of your website directly from your Chrome browser (other browsers have similar tools, but we will cover the “Performance” checker on Chrome. Here’s how.
Inspecting the Page
Once more, right-click anywhere within your web page and click on the “Inspect” option.
You should see a split screen similar to the one below. You might not see the device frame, but you can get that by checking our article on device mockups.
Hover over the edge of the right side of the screen (hover over the line in the middle of the screen) and pull it towards the left to expand the right side of the split. Your screen should now look like the one below.
If you pull it far enough, you will have most of the menu items listed inline, and you will not need to click on the >> for more options.
The Performance Checker
You can always resize the screen when you have applied all the settings to get the performance check images to display desktop view. The performance will still be the same, but you might relate better to this. If I just blathered in this paragraph, kindly ignore it and move on with the tutorial. You should see “Performance” in the top toolbar, as shown below.
Under performance, tick screenshots and whatever else you require. Click the “Start profiling and reload page” or “Ctrl + Shift + E” (without the + sign, of course).
You should see this change on your screen, and your webpage will start reloading.
Once the performance check is complete, your report is displayed as shown below.
Now, you can see how long it has taken each element to appear (especially if you do not use a preloader). You can now decide on what is slowing down your pages – sometimes the font or images – and take strategic action such as choosing a more common font or resizing your images with free tools like those mentioned in one of our articles on photo optimization. You can go ahead and download the report for future reference.
There are other free tools to use in achieving the same goal. This tutorial briefly highlighted the performance checker in Chrome’s developer tools. In subsequent tutorials, we will mention others.
Thanks for reading. We really hope this tutorial was helpful to you. Let us know if you liked this method of checking the speed of your website and why. If you know of any other great tools that can be used to get check website speed without much stress, do let us know in the comment section below.
Have any topics you’d like us to cover? Let us know via any of the forms on our site. Please use the title “Article Ideas for Sapphirin”. Or you can write to us at hello.sapphirin.com.
Hey, what about the articles? I can hardly wait.