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? Did anyone tell you about Lighthouse? If not, keep reading.
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 explain it in details.
Performance assesed by Lighthouse
Let’s focus on the first section. It shows metrics related to website speed, but not only. For example, First Contentful Paint, Time to Interactive, First Meaningful Paint are related to a website structure. A well-performing website has to deliver content to a user as fast as possible. Thus, it has to leave less important parts of a 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 powerful tools. The best way to improve website performance is to implement correct caching technology. It helps users to see their favourite content very 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. Check the example below.
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 – the ones that we have already fulfilled. You can read the details and learn more about what has been tested according to all the parameters.
The next very important section of the Audit is an accessibility check. It focuses more on the technical aspects of a website, not just its speed and a look. A good score here will ensure that when search engines read your website, they can access the content properly and, what is even more important, understand it. It is crucial for a variety of reasons, but we can all agree on one thing – 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 fully be able to understand nor fix problems listed here. To fix some of them, you need the assistance of an experienced developer and access to the source code of your website. As in the previous case, the report is divided into multiple sections. It starts from the most critical issues and ends on “passed audits” and not applicable items which help you to understand more how the search engines work. Here you have an example of 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. If you follow these practices, you will ensure that:
- Your website is compatible with the majority of browsers.
- Your website is secure, and your customer data is safe.
- Additionally, your website is “future proof”, and you will not have to invest time and money in the near future.
SEO and Progressive Web App
These two sections of the audit deserve separate articles. Even though, 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 focus on more in the upcoming months because we can see how much web development companies neglect this topic. Anyway, Lighthouse by Google highlights in a first place what needs to be done to help Google search engine to understand the content of your website fully. This step is critical for any search engine. Only by understanding your content can a search engine 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 website developers together with you, as the owner of the website. Not only a website needs to carry specific tags, meta content, meta descriptions, titles, etc., but also content that you create should follow particular rules 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.
Phew, that was a looooong blog post!
It is time for you. Have you tested your website? Go ahead, and share the results with us! We are always here to help you.