Google Lighthouse is a free tool that helps you analyze the quality of web pages on your website. It audits your pages for accessibility, performance, and SEO and recommends changes to improve them.
Let’s assume the Lighthouse is the speedometer of a car that not only shows the car’s speed but also shows suggestions to improve the speed. You can use the recommendations from the Lighthouse report to improve your website further.
The major focus of Lighthouse audits is Google’s Core Web Vitals. Core Web Vitals is a set of three metrics i.e. Google uses them to calculate the speed of the web page and overall user experience (UX).
Lighthouse uses six metrics to generate the performance score. These are
The good thing about Lighthouse is that it not only shows you a report on all the important Core Web Vitals information. It also gives you actionable insights in just a few seconds to improve several site aspects like web accessibility and SEO.
It is very important to run a Lighthouse audit on your site to see specific performance weaknesses related to your site that negatively influence the user experience.
Lighthouse checks your website and assigns it a score across five various categories.
In this audit, Lighthouse calculates how fast a web page loads and how quickly it becomes interactive.
It presents your performance for the five-speed metrics mentioned below:
Lighthouse provides an overall performance score for all these metrics based on your page performance. The score should be anything between 0 to 100.
If the score is anything between 90 and 100 it means your page is effectively optimized for user experience. A score below 90 needs some improvement in your performance for which Lighthouse provides suggestions.
Lighthouse’s accessibility test evaluates how well the users who use assistive technology are capable of using your website. It looks at elements including links and buttons to check if they are appropriately described.
The accessibility score connects to how usable your website is for all users, in all their diversity.
It also analyzes site images to check whether alt text is present or not. It is required for users with poor vision to understand what the image is all about while using a screen reader.
Like the performance report, the accessibility report also provides you with a score out of 100. It also provides recommendations to improve your overall accessibility.
This audit checks whether your page is created on the latest standards of web development. Additionally, it conducts a brief audit of generally approved best practices for web development. Lighthouse examines whether:
All the above-mentioned audit factors provide you with a score out of 100. The report on best practices also highlights some particular elements that need your attention to improve the score.
Lighthouse assesses the SEO of a website by considering elements such as structured data, meta tags, and headings. It checks if your page has valid structured data or not, whether your page is mobile-friendly, and so on. It then provides a score out of 100.
It gives suggestions to enhance the search engine visibility of your website which is essential to operate organic traffic.
The last section of the Lighthouse metrics is PWA. It checks whether the site meets the standard of Progressive Web App to provide an excellent user experience.
The PWA audit measures whether your web app is
The test runs your website against these audit factors and represents one of the PWA badges. It also provides recommendations to improve the overall PWA performance.
There are a few tools that can run a Lighthouse audit on the website. If you wish to avoid installing an extension or running a command, you need to use the web.dev or Chrome DevTools. Let’s take a look at the instructions for each one of them:
To run a report in Chrome you need to go through these steps:
An easier way to audit a web page with Lighthouse is pagespeed.web.dev. It is a browser-based tool where you need to enter the URL of your website.
As soon as the audit is finished, Lighthouse presents you with a detailed report. Note that it does not provide two separate reports for desktop or mobile, so you can see only one analytics report.
Another popular way to run an audit on the website is Chrome Extension. You need to install the Lighthouse Chrome Extension on your Chrome browser. After that, you should visit the web page you want to test.
Open the Chrome Extension menu and click on the Lighthouse symbol. Click on Generate Report to perform the audit. After that, it presents you with a detailed report.
There are various ways to improve your Lighthouse performance on your website. Now take a look at some of them to provide you a taste of how you can upgrade the Lighthouse metrics:
By compressing every photo you can optimize your images. Images are required to be responsive and scaled to the screen size. The images should have SEO-friendly titles, alt texts, and alt descriptions.
Adding alt text and descriptions provides screen readers with an easy way to represent imagery for people with no vision. This performance connected them to a long list of audits completed for Lighthouse’s Accessibility score.
They also give context to site crawlers. Thus, this optimization enhances both SEO and Accessibility scores.
It could be difficult if not impossible to manually optimize hundreds & thousands of images. You can automate the process by using any image optimizer similar to RabbitLoaderif you are on wordpress CMS.
Filenames do not seem necessary but context is important for both accessibility and image optimization.
You should use dashes instead of spaces. For instance- A-picture-of-an-island instead of a picture of an island. You should try to keep names that are appropriate to the imagery.
To optimize your LCP score you have to shrink your video sizes. You should always be aware of the size of your background images.You would need to optimize your fonts completely.
Set-up page caching is also helpful in boosting your server response time remarkably and helps in improving the Largest Contentful Paint (LCP).
LCP presents a website’s loading time. It calculates how fast the web page renders its largest elements as well as text blocks and images.
It might become too messy & conflicting if you use a plugin or a tool for each of the optimization you need hence you should try an all in one optimization tool like RabbitLoader.
It is a cache-based speed optimization plugin to improve the LCP score of your website. RabbitLoader reduces the time it takes for a site to load its largest element through compression and caching technologies. It ensures that the largest content element is quickly visible on the user’s screen.
If you are facing difficulty in improving Total Blocking Time (TBT) and Time To Interactive (TTI), you need to check whether there is any irrelevant CSS or Javascript file available that is slowing down the rendering of the page.
RabbitLoader efficiently defers non-critical Javascript files, specifically those belonging to third-party services, and third-party plugins like chat widgets, pop-ups, analytics, and so on.
With the help of RabbitLoader, site owners look for better website performance, user engagement, and decreased page load times.
On platforms like WordPress & many other CMS’s a large number of packages or plugins are available to improve the performance of your website, but as you keep installing the plugin to improve each aspect of performance they add up & start conflicting with each other & since you now have installed a lot of plugins those plugins would make the website even slower.
Instead of using one plugin for image optimization and one for caching, try RabbitLoader .You do not need several plugins for caching, image size reduction, CSS, HTML, and Javascript minification, compression, and so on. You just need to install RabbitLoader and it will optimize your website in a few minutes.
Google Lighthouse provides operative insights to improve the user experience, accessibility, and overall performance. By recognizing the areas for improvement, you should evaluate your site for better user engagement, more successful online presence, and higher search rankings.
Defer jQuery is probably the most popular JavaScript library that makes a developer’s life easy writing cross-browser compatible JS code. Basically, it uses many native or vanilla JavaScript APIs under the hood and makes complex tasks like DOM traversal, event handling, and XHR (a JavaScript API to create AJAX requests) super easy and mostly exception-free.
defer jQuery comes bundled with WordPress core ever since the WordPress platform evolved. That is the reason, even many themes or plugins developed for WordPress have a dependency on jQuery. While starting from Twenty Nineteen default theme, WP has stopped loading jQuery in the frontend, around 76% of popular WordPress themes still have a dependency on the defer jQuery library.
Page Contents
While the popular library makes life easy, it comes with a performance cost. To understand this, let’s first try to understand how an HTML page and related assets such as JavaScript code are downloaded, evaluated, and executed.
The heavier the script, the more delay it will cause in finishing the page load event. And this is not just determined by the file size on the network, but more by how CPU intensive is the piece of code sitting inside the library. This is the reason defer jQuery contributes to high Total Blocking Time (TBT) and Time to Interactive (TTI) hence having a significant impact on your overall PageSpeed performance score.
async and defer are two special attributes for a <script>
tag to indicate the browser when it should download and evaluate the source file of the script. There is a basic difference between how these two directives work.
This SO thread has good content related to async and defer.
The short answer is not easy. Now that we have learned how async and defer work, none of them seems suitable for the main jQuery library. One primary reason is many plugins and inline scripts are dependent on jQuery. There are tons of plugins for different purposes such as creating image carousels or sliders, form validation and submission, making fancy dropdowns on top of default <select> element, interactive tabular data, and charts, maps, etc.
You may often see common dependent statements like $( document ).ready()
. If the defer jQuery is not available before any other script that is dependent on it, the browser will start throwing errors such as “jQuery is not defined” because the browser won’t understand what the other script is referring to.
One possible solution is, can include defer jQuery as the first-ever JS block on a page with the ‘defer’ attribute and make sure to defer all other following scripts to guarantee the order of execution. But because many theme developers and plugin developers write it differently, it may not be strictly followed and all inline <script> blocks need to be removed as the defer attributes are only supported for external scripts.
Consider the below code example, where the scripts are fed to the browser in an unrecognizable way first, say by setting script type as “anything-random” instead of “text/javascript” and then changing the type once the page is loaded-
<script type="my-deffered-code" src="path-to-jquery.js" onload="window.jQuery.holdReady(true);"></script>
<script type="my-deffered-code" src="path-to-plugin2.js"></script>
<script type="my-deffered-code">alert("inline js");</script>
In the first line of the above code, where were are loading jQuery, the ‘onload’ event will hold firing the jQuery ready event till all files are loaded.
<script type="text/javascript">
window.addEventListener("load", function(e){
document.querySelectorAll('[type="my-deffered-code"]').forEach(element=>{
element.setAttribute("type", "text/javascript");
});
});
window.jQuery.holdReady(false);// release the hold
<script>
This is not a production-ready code but gives a fair idea of some key concepts involved in deferring all JS code including the heavy library we are focusing on.
While most of the JS optimization plugins available can help you defer loading all JS files except defer jQuery, Rabbit Loader has a sophisticatedly developed algorithm to take care of all JavaScript loading including the jQuery to minimize the performance penalty and boost page loading time. A free plugin is available for WordPress website owners which requires no technical knowledge or configuration to improve all Core Web Vitals matrices for your website and help you achieve the best PageSpeed Insights score. It makes your visitors and search engines love your page.
Along with defer jQuery, Rabbit Loader can defer the execution of other JavaScript plugins, CSS stylesheets, heavy font files, and images used in your WordPress website.