Congratulations! Your website is up and running, and we guess it makes you proud. You like the design, and you are happy with the content. But can you tell, objectively, if your website is a good one?
Most people don’t have enough technical knowledge to tell the difference between a good website and a bad website. We’ve heard the same questions many times – “What does it mean a good website”, and “Does it really matter”?
Here is the answer – yes, it does matter… a lot.
We could have finished this article right here and now; but we want you, and all our customers, to understand why it matters and why you should know it. However, many specialists require money for any specific piece of advice, we like to share our experience and help people to improve, and on our blog, we always do it for free. So, sit comfortably, and read what we share with you today.
In today’s blog post, we want to show you how you can test your website using just the Chrome browser and the tool called Lighthouse provided by Google. We want you to understand some of the key metrics available for you.
At the end of the article you should be able to answer a question: “Is my website truly a good one”?
It’s time, let’s put some websites to the test and see how it goes!
Website quality – so what?
There is no doubt that your website has to load very fast. If it does not, you will lose potential clients. We mentioned the magic of 4 seconds in one of our previous posts → Things You Need To Know About Website Speed.
But is that all? It is not. A website is more than just a responsive and fast website design. You can tell if your website is slow by visiting it. Unfortunately, you can’t tell if your website has fundamental issues with the code, syntax, technology, or structure if you don’t know where you should look for it. Therefore, you should test your website to be sure you don’t waste money on marketing that doesn’t bring you expected results.
Your website consists of many scripts, images, and components which play an important role in how a customer sees your brand. It is also crucial for all search engines, social media, and other partners, to see your website in the same “proper” way. If your website does not conform with the accepted standards few things may happen:
- Your website will not receive the highest expected rank in Google Search Engine and other search engines.
- Your marketing efforts will not bring you as many customers as you could expect.
- Thus, the overall cost of the marketing will be much higher than you planned.
- Your website conversion will be lower than it could be.
The above is a result of an unwritten world agreement to make the internet a better place. All marketing tools and search engines has the main designed role to promote good websites. They does not promote websites with low-standard content or poor quality. Today we will show you how to be on a safe side.
How to test the website quality – Lighthouse is the answer!
No worries, you are not alone.
The creators of the biggest search engine in the world – expectedly – come to the rescue with the tool called Lighthouse. They integrated it into the latest Chrome browser. Hence, Lighthouse has recently replaced other well-known tool from Google – Google Page Speed Insights. If you are using the Chrome browser now, then you are ready to start the test. In case you use a different browser, please download Google Chrome from here and let the fun begin.
If you are reading this article in Google Chrome, please right-click anywhere on the screen and choose “Inspect” option. Also, you can press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS). You will notice that additional window pops out on your screen. It has many options which are mainly useful for developers. What we need now is the “Audits” section. It contains many valuable features and hints to help you to understand your website quality.
Once you are in the Audits section of Google Chome developer tools, it gives you a choice of testing your website on a mobile or a desktop device. We strongly suggest running them both one by one. We will start with the mobile version, and explain the results that you can see on your screen. Leave all other options as they are by default, so we are ready to press “Run audits” button at the bottom of the screen (see the picture below).
A few seconds later, we see the results provided by Lighthouse on the screen. Don’t worry if it looks a bit complicated. We will walk you through it and explained it in details.
Let’s focus on the first section. It shows metrics related to website speed, but not only. First Contentful Paint, Time to Interactive, First Meaningful Paint are related to a website structure. A well-performing website needs to be built in a way to deliver content to the user as fast as possible, leaving the less important parts of the website to load in the end. For mobile experience, if you can afford implementing AMP (Accelerated Mobile Pages) into your website then you will see a great increase not only in website performance but also in organic traffic from Google as AMP Pages rank much higher in search results.
How to improve website performance
Nowadays, websites are usually packed with functionality and many powerful tools. The best way to improve website performance is to implement correct caching technology that can help users to see their favourite content quickly. Watch our video showing how LiteSpeed cache can improve the speed of a WordPress website.
Other ways to improve your website performance
In the next section, Google shows you other options to improve your website performance.
List of Lighthouse suggestions will be different for every website as well as the list of possible solutions to these problems. There is still a couple of things that we want to highlight here:
- Most of the ways to improve website performance that are listed in this section may require the assistance of a developer. Unfortunately, optimizing a website structure is a time-consuming process. It requires further analysis to see what causes a problem. Finding a problem is just the beginning. Then, someone has to work on a solution. Be careful! Messing with lines of code without specific knowledge can cause even more problems.
- Fixing some of these problems may require new implementations.
- Fixing some of these issues may also require server work.
- Don’t follow all hints blindly. Not 100% of the listed suggestions can be implemented. For example: “Serve static assets with an efficient cache policy” cannot be done for any resources loaded from external websites.
At the end of the performance, Lighthouse section developers decided to cheer us up by showing how good work we have done on the website despite the problems listed above 🙂 We can celebrate a little bit over our successes here:
And we can see here that there are 12 other indicators for the website performance that we have already fulfilled, for each one you can read the details and learn more about what is being tested for each one.
The next very important section of the Audit is accessibility check which focuses more on the technical aspect of the website, not just it’s speed and look. A good score here will ensure that search engines when reading the website are able to access the content properly and what is more – understand it. This is extremely important for a variety of reasons but we can all agree – if you want your website to be promoted high in organic search results you need to ensure that it is “Google friendly”. That is so much for the good news, the bad news is that again – you may not be able to fully understand nor fix problems listed here. In order to fix it, you need the assistance of experience developer and of course access to the source code of your website. As in previous case the report is divided into multiple sections, starting from the most critical issues and ending on “passed audits” and not applicable items which help you to understand more how the search engines work. If you did not test the website now – this is how this section looks like:
This section is all about the details. You will be perfectly fine not implementing those practices but remember that for those who will take one more step towards the improvement it will pay off in the future. By following those practices you will ensure that:
- Your website is compatible with major browsers
- Your website is secure and your customer data is secure
- Website is “future proof” and you will not have to invest time and money in the near future
SEO and Progressive Web App
These 2 sections of the audit deserve separate articles and this is why we are not going to cover them here in full. That doesn’t mean that they are not important.
What is SEO?
SEO (Search Engine Optimization) is something that we will be focusing more in the coming few months because we can see how much this topic is neglected by web development companies. Lighthouse by Google will highlight in a first place what needs to be done in order to help Google search engine to fully understand the content of your website. This step is absolutely critical for any search engine because only by understanding your content a search engine can efficiently present it to your new customers. What many people don’t know is that SEO is a long term process which involves the cooperation of the website developers together with you, as the owner of the website. Not only website needs to carry specific tags, meta content, meta descriptions, titles etc, but also content that you create should follow certain rules in order to perform best.
What is PWA (Progressive Web App)
Progressive Web App is a new concept which is still a little bit mysterious for many customers and even web development agencies. If you are serious about conquering the internet then rest assured that Progressive Web App will take you one step ahead of your competition. The whole concept of PWA is to deliver app like experience through your website and fill the gap between apps and web development which is still hard to overcome on the market.
Have you tested your own website? Go ahead, share with us!
After few seconds