Web Page Performance Optimization Through Lighthouse

Introduction

Examines the essential strategies and techniques for enhancing website performance with Google Lighthouse, a potent tool. This article explores the skilled process of web page optimization, discussing issues like image and code optimization, utilizing browser caching, reducing render-blocking resources, and utilizing Lighthouse's thorough speed analyses. Learn how to maximize the potential of your website by putting tried-and-true optimization strategies to use and utilizing Lighthouse's insights to improve user experience, lower bounce rates, and boost overall website performance.

A website's performance and speed are essential factors in determining its success in the modern digital era. Regarding web browsing, users have higher standards than ever and demand quick page loads and seamless interactions. By lowering bounce rates, increasing user happiness, and minimizing load times, web page optimization seeks to improve a website's functionality. We will explore the many methods and best practices for optimizing web pages in this post, along with relevant examples from real-world situations.

Why Website Optimization is Important?

Additionally, search engine rankings are directly impacted by website optimization. Web page performance and page speed are crucial ranking factors for search engines like Google. In search results, a slow website may be penalized, resulting in reduced visibility and organic visitors. Businesses may boost their chances of ranking higher in search engine results pages (SERPs) and so increase visibility, organic traffic, and potential consumers by optimizing their websites for speed and performance.

Another important benefit of website optimization is a decrease in bounce rates. Users are more inclined to leave and look for alternatives when dealing with slow or unresponsive websites. High bounce rates can have a detrimental impact on search engine rankings in addition to being a sign of a bad user experience. Reducing bounce rates by optimizing a website's performance and making sure that pages load quickly will keep visitors interested and entice them to explore further.

What is Google Lighthouse?

Google Lighthouse an open-source, automated technique for raising the caliber of web pages is called Lighthouse. Any online page, whether one that requires authentication or is public, may be tested with it. It features audits for SEO, progressive web apps, performance, and more. Lighthouse can be used as a Node module, through the command line, or in Chrome DevTools. Lighthouse receives a URL to audit, does several audits on the page, and then produces a report on the page's performance. Use the failing audits as a guide to help you enhance the page from there. Each audit contains a reference document that explains why the audit is significant and offers suggestions for improvement.

There are two ways to use Google Lighthouse

 Using Google lighthouse chrome extension

The Lighthouse Chrome extension is an open-source, automated tool for improving the performance, quality, and correctness of your web apps

Lighthouse is available on the Chrome Inspect tab with the name Lighthouse

Among the many facets of web page optimization that Lighthouse addresses are performance, accessibility, best practices, SEO (Search Engine Optimizations), and PWA (Progressive Web App) audits. Lighthouse is a strong tool made available by Google. It compares web pages to a set of predetermined criteria and offers actionable insights and suggestions for each area that could be improved.

Performance: Lighthouse measures multiple metrics, including first contentful paint, time to interaction, and total blocking time, to evaluate how well a web page performs. It pinpoints the potential for speeding up resource delivery, lowering page load times, and utilizing caching, minification, and lazy loading methods.

Accessibility: Lighthouse assesses a web page's accessibility by looking at components such as appropriate semantic markup, keyboard support, and color contrast. It offers suggestions for improving accessibility for people with impairments, ensuring that the website is functional and welcoming for all users.

Best Practices: Lighthouse verifies compliance with best practices for web development, such as secure HTTPS usage, suitable HTML structure, appropriate use of headings and labels, and avoiding out-of-date or deprecated technology. It contributes to ensuring that the website complies with industry standards and recommendations for best compatibility and performance.

SEO: Lighthouse analyses a web page's SEO components, such as meta tags, headings, structured data, and mobile friendliness. SEO stands for search engine optimization. It offers recommendations to raise the page's exposure and standing in search engine results, which helps to increase organic traffic and enhance overall SEO performance.

PWA: Lighthouse assesses a web page's PWA (Progressive Web App) features, such as offline caching, responsive design, and app-like behaviors. It determines whether the website satisfies the requirements to be classified as a Progressive Web App and offers suggestions to improve the PWA experience, such as deploying service workers and turning on push notifications.

How to Optimize a Web Page?

Perform a Website Audit: To begin, thoroughly evaluate your website to find places to optimize. To evaluate the performance at the moment and spot any potential problems, make use of tools like Google Lighthouse, GTmetrix, or PageSpeed Insights.

Eliminate render-blocking resources

How to identify critical resources?

Determining what is essential and what is not is the first step in lessening the impact of render-blocking resources. In Chrome DevTools, use the Coverage tab to find non-critical CSS and JS. The tab shows you how much code was used against how much was loaded when you load or run a page

By simply providing the necessary code and styles, you may minimize the size of your pages. To view a file's details in the Sources tab, click on a URL. JavaScript files' code and styles both have two-color markings. A web page's rendering can be delayed by render-blocking resources like CSS and JavaScript files, which increases load times. We can make sure that the crucial information on the website loads and appears as quickly as possible by taking care of these problems. Think about the following methods

JavaScript files can be loaded asynchronously or after HTML parsing is complete by using the async and defers properties in script elements. This stops JavaScript files from impeding page rendering. Determine the essential CSS and inline it right into the HTML to render the above-the-fold content. In this manner, the crucial styles are constantly accessible, enabling the browser to render the page quickly.

Green (critical):  Styles necessary for first paint; code essential for the page's basic operation.

Red (non-critical): Code not used in the core functioning of the page; styles that apply to material not immediately apparent.

JavaScript files: If not optimized, JavaScript can cause a delay in page rendering while improving website functionality and interactivity. Large JavaScript files loaded synchronously, inline JavaScript, and awkwardly positioned JavaScript calls within the HTML structure are common offenders.

CSS Files: Cascading Style Sheets (CSS) are used to design and present web pages visually. External stylesheets that load synchronously or extremely big CSS files that take longer to download and parse are common examples of render-blocking CSS resources. if you want to learn more visit Improve site performance by inlining your CSS

How to eliminate render-blocking scripts?

Once the crucial code has been located, you should move it from the render-blocking URL to an inline script element in your HTML page. The page will have all it needs to handle its primary feature when it loads. You can leave non-essential code in a render-blocking URL and then designate the URL with async or defer attributes.

How to eliminate render-blocking stylesheets?

Similar to inserting code within an Inline crucial style needed for the first paint inside a "style" block at the top of the HTML page, similar to inlining code in a "script" tag. Utilize the preload link to asynchronously load the remaining styles (see Defer unneeded CSS). Utilizing the Critical tool, think about automating the extraction and inlining of "Above the Fold" CSS. Splitting up render-blocking styles into separate files and organizing them by media query is another way to get rid of them. Then give each stylesheet link a media attribute. To retrieve the stylesheets that are appropriate for the user's device, the browser only blocks the first paint when loading a page.

Minification of CSS and JavaScript

Minifying CSS and JavaScript reduce the size of the files by removing whitespace, comments, and line breaks. Use minification plugins like Autotomize or CSS Nano, or Uglify for platforms like WordPress. CSS and JavaScript files can often become bloated with unnecessary white spaces, comments, and redundant code. Minification involves removing these extreme elements, reducing file sizes, and improving load times.

CSS Minification: Tools like CSSNano and UglifyCSS remove unnecessary characters, white spaces, and comments from CSS files.

JavaScript Minification: Popular tools like UglifyJS and Closure Compiler minimize JavaScript files by eliminating whitespace, shortening variable names, and removing comments.

How minifying CSS files can improve performance?

To minimize code and shrink file size, comments, and excess spaces must be deleted from JS, CSS, and HTML files. Variable names must also be crunched. The functionality is the same, but the minified file version uses less network bandwidth. Some minifiers reduce bytes by using cunning techniques. For instance, the shorthand equivalent of the color value #000000 can be further simplified to #000. Based on the comments and whitespace characters it discovers in your CSS, Lighthouse offers an estimation of possible savings. This is a reasonable guess. As was already discussed, minifies can carry out sophisticated optimizations (such as changing #000000 to #000) to further minimize the size of your file. Therefore, you might save more money than Lighthouse estimates if you employ a minified.

Use a CSS minifier to minify your CSS code

You should be able to manually minify your files using an internet service for small sites that you don't update frequently. The service's user interface accepts your CSS and returns a minified version of the code. Before deploying your modified code, professional developers should usually put up an automated pipeline that automatically minifies their CSS. Typically, a build tool like Gulp or Webpack is used to achieve this.

body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}

Reduce unused JavaScript and CSS

All stylesheets containing unused CSS that have a potential saving of 2 KiB or more are listed in the Opportunities section of your Lighthouse report. To reduce the number of superfluous bytes needed by network activity, remove the unused CSS

An external stylesheet is a term for the main.css file that the browser downloads since it is kept apart from the HTML that it utilizes. By default, before a browser can show or render any content on a user's screen, it must download, analyze, and process any external stylesheet it comes across. The stylesheets may contain rules that affect how the page is styled, therefore it wouldn't make sense for a browser to try to show content before they have been processed. The creation of the render tree by a browser is also slowed down by unused CSS. Similar to the DOM tree, the render tree also contains the styles for each node. A browser must traverse the whole DOM tree and determine which CSS rules apply to each node to build the render tree. The more unused CSS there is, the longer it could take a browser to determine the styles for each node.

It is necessary to download each external stylesheet from the network. The amount of time users must wait before seeing any material on their screens might be greatly increased by these additional network trips.

View used and unused CSS with the Coverage tab

Press Command + Shift + P (Mac) or Control + Shift + P (Windows, Linux, ChromeOS) while DevTools is in focus to open the Command Menu.

Step 1: Start typing coverage.

Step 2: Select Show Coverage. The Coverage tab appears.

Step 3: Click Reload icon. The page reloads and the Coverage tab provides an overview of how much CSS (and JavaScript) is used from each file that the browser loads.

 

You can see that just approximately half of the scripts are being used in this example, and the first CSS file is the biggest. If you select that item from the list, the window above will display the lines of code with red highlighting next to any unused lines. As you can see, lines 55–57 as well as 65-67 in this CSS file are not used. If this were your website, you might want to carefully examine that code to see if you truly need it. Be cautious and make sure to test on your staging server before deploying to your production site because there might be interactions that later call for this code.

Caching Mechanisms

Web browsers can save static resources locally via caching, which eliminates the need to repeatedly request the server. Websites can improve performance and reduce load times for repeat users by utilizing browser caching. Take into account the following caching strategies:

Browser Caching: Setting up server headers to tell browsers to cache static resources like CSS, JavaScript, and pictures is known as "browser caching." This will result in fewer server requests during subsequent website visits, which will speed up page loading.

Content Delivery Network (CDN): Use a content delivery network (CDN) to cache website content across numerous servers located all over the world. This lowers latency and speeds up load times by allowing users to retrieve cached content from the server that is nearest to them. Page load times can be impacted by the user's location on the server. By keeping duplicates of the website's static assets on numerous servers across the world, content delivery networks (CDNs) aid in the optimization of content delivery. Users will be able to view the material from a server that is closer to their location as a result, lowering latency and enhancing performance.

Example: Cloudflare, a widely-used CDN provider, offers various caching features, including browser caching and content caching at the edge servers. By integrating Cloudflare into their websites, developers can optimize caching and enhance performance.

Responsive Design and Mobile Optimization

Websites must be optimized for various screen sizes and resolutions due to the growing use of mobile devices for browsing. By ensuring that websites adjust and show properly on different devices, responsive design offers the best user experience possible across all platforms. Think about the following methods:

Media Queries: Use CSS media queries to modify website layouts, text sizes, and images by the user's screen size. This guarantees that the material will appear correctly across various devices.

Accelerated Mobile Pages (AMP): Use the AMP framework to build mobile pages that are small and load quickly. Through the use of reduced HTML and CSS, AMP improves performance on mobile devices.
Example: The Guardian, a renowned news publication, implemented a responsive design on its website to cater to a diverse range of devices. Their website seamlessly adapts to different screen sizes, providing an optimal browsing experience for both desktop and mobile users.

Minimizing HTTP Requests

The performance of a web page is significantly influenced by HTTP requests. An individual HTTP request is needed for each component of a webpage, including images, CSS files, and JavaScript files. Performance can be greatly improved by reducing these requests. Think about the following methods:

File Combination: Combine various CSS and JavaScript files into a single file for each language. As a result, load times are improved because fewer HTTP requests are needed to fetch the resources.

Sprites: To combine several little images into one larger image, use CSS sprites. Instead of loading numerous distinct images, we can load a single one, which will decrease HTTP requests and boost performance.

Example: The social media platform, Pinterest, uses CSS sprites to optimize the loading multiple small icons and images on their website. Combining these elements into a single sprite image reduces the number of HTTP requests, resulting in faster load times.

Image elements do not have explicit width and height

Image Optimization: Image file sizes can be decreased without sacrificing quality by compressing and resizing the photos. Utilise plugins like Smush or image-optimization programs like Photoshop, Squoosh, or Squoosh for platforms like WordPress. For faster download and greater compression, take into account employing next-generation picture formats like WebP.
Although images are a crucial component of online design, they may also significantly slow down page load times. We can balance visual quality and file size by optimizing photos, which will result in quicker load times. Several image optimization methods are listed below

Image Compression: Utilize image compression techniques to reduce file sizes without compromising visual quality. Tools like Kraken.io and TinyPNG can help achieve significant reductions in file size.

Lazy Loading: Implement lazy loading to defer the loading of images not initially visible on the screen. This technique improves initial page load times by only loading images as the user scrolls down the page.

Example: Cloudinary, a well-known tool for image optimization, provides an automatic picture optimization capability that compresses and resizes photos instantly. By employing their service, websites can significantly reduce the size of the image files, which will increase performance.

Early web developers would include width and height properties in their <img> elements to make sure there was enough room on the page before the browser began requesting images. Reflow and re-layout would be reduced as a result. If we could include the image's height and width in this type of suggestion, it might be resolved.

<img src="profile.png" height="20px" weight="20px"/>

Image elements do not have [alt] attributes

Ensure that all decorative <img> elements have empty alt attributes (e.g. alt="") and that all informative <img> elements have brief, descriptive alternate text. When creating alt text, keep in mind that it should convey to blind users information about the contents and intended use of the image. Blind people should be able to learn just as much from alt text as a sighted user does from the image itself. The image's objective, purpose, and significance should be described in the alt text. If we could include the image's alt or aria-label attributes in this type of suggestion, it might be resolved.

Make sure the attribute's entire text is relevant. Using terms like "chart," "image," "diagram," or image file names in the alt text is generally not a good idea because they are not particularly helpful.

<img src="profile.png" height="20px" weight="20px" alt="Profile image"/>

[id] attributes on active, focusable elements are not unique

Change the duplicate ID value to make sure that each ID is unique to solve the issue. Each focusable element must have a unique ID value to distinguish it from other focusable elements and to prevent erroneous markup when client-side scripting affects the active ID instance or when assistive technologies normally only refer to the active ID of repeated elements.

<textarea type="text" id="address" placeholder="Address" aria-label="address" ></textarea>
<textarea type="text" id="comment" placeholder="Comment" aria-label="comments"></textarea>

Similar Suggestions - [accesskey] values are unique

Ensure all access key values in the document are unique. Look for and change the duplicate access key values.

<a href="google.com" accesskey="g">Link to Google</a>
<a href="github.com" accesskey="g">Link to GitHub</a>

When a document's accesskey property value is supplied, users can quickly activate or switch the focus to a particular element by pressing the designated key (often in tandem with the alt key). Duplicating accesskey values has unforeseen results that ultimately reduce the accessibility of the page. Make that the value for each defined access key is distinct and does not interfere with any screen reader or default browser shortcut keys. Users who must use alternate keyboards or input devices serving as keyboard emulators, users who have problems tracking a pointer, or users who are blind or have low eyesight and cannot utilize eye-hand coordination-required devices like mice, cannot operate the content.

Links have a discernible name

Make sure the link names are all clickable. The inner link content might not be visible to a screen reader, there might be duplicate link labels, or the link might not be focusable.

Make sure all links may be focused programmatically; for instance, stay away from device-specific events (like onmouseover).

The link text cannot be hidden (e.g., with display: none or aria-hidden="true") so that screen readers can see it fully.

Avoid device-specific Javascript events like onmouseover(), mouseover(), hover(), onmouseout(), and onmouseout () to ensure that all links can receive programmed focus. Substitute device-independent events like onfocus(), focus(), onblur(), or blur() for these.

<h4>Neighborhood News</h4>
 <p>Seminole tax hike: Seminole city managers are proposing a 75% increase in 
 property taxes for the coming fiscal year.
 <a href="taxhike.html" aria-label="Read more about Seminole tax hike">[Read more...]</a>
 </p> 
 <p>Baby Mayor: Seminole voters elect the city's youngest mayor ever by voting in 3 year
 old Willy "Dusty" Williams in yesterday's mayoral election.
 <a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">[Read more...]</a>
 </p>

Background and foreground colors do not have a sufficient contrast ratio.

 

Make sure there is enough color contrast between the text in the foreground and the backdrop color behind it in all text elements. Even if the text is a component of an image, the color contrast must be at least 4.5:1 for tiny text and 3:1 for large text. The criteria describe the large text as either 18 pt (24 CSS pixels) or 14 pt bold (19 CSS pixels). It should be noted that elements with a 1:1 ratio are deemed "incomplete" and demand a manual assessment.

No `<meta name="viewport">` tag found 

similar suggestions - [user-scalable="no"] is not used in the <meta name="viewport"> element and the [maximum-scale] attribute is not less than 5.

This generally is a best practice for sites that have been optimized for mobile use and sets the viewport width to the same as the device. With this tag, browsers will presume that you have optimized text for mobile viewing, and the double-tap to-zoom feature will be replaced with quick clicks.

If you are unable to perform this adjustment for some reason, you can use touch-action: manipulation to apply the same effect to certain page elements or across the entire page:

<meta name="viewport" content="width=device-width maximum-scale=10">

To enable zooming and guarantee the maximum-scale parameter is greater than 2, remove the user-scalable="no" parameter from the content property of the meta name="viewport"> element. The use of a meta viewport element instructs the browser on how to scale and regulate the dimensions of the page, but it also has the potential to prevent zooming.

Make sure the zooming on a page is disabled using the user-scalable="no" argument inside the content property of the meta name="viewport"> element. The user's zooming options are limited by the maximum-scale setting. This presents a challenge for those with low vision who rely on screen magnifiers to see web page content.

[aria-*] attributes match their roles

ARIA clearly states which characteristics are permitted for each role as well as when and when each property may be utilized. You can find more specific information about each attribute by reading the documentation for that role or attribute. Particular Reference See ARIA in HTML - Document conformance requirements for usage of ARIA attributes in HTML opens in a new window for more details on which ARIA attributes may or may not be used by HTML elements.

Broad Reference: The following external sources of information provide broad information regarding what ARIA is capable of. Because implementing ARIA frequently necessitates knowledge of JavaScript, ARIA is primarily intended for use by web developers and programmers. Due to the complexity of the programming logic and the subtleties involved in making sure that ARIA role-attribute combinations are legitimate, learning ARIA can also take some time.

button, link, and menuitem elements have accessible names

Ensure that each element with role="link", role="button", or role="menuitem" has one of the following characteristics:

Inner text that is discernible to screen reader users.

Non-empty aria-label attribute.

aria-labelledby pointing to elements with text which are discernible to screen reader users.

<div role="link" id="al" aria-label="Name"></div>
<div role="button" id="alb" aria-labelledby="labeldiv"></div>
<div role="menuitem" id="combo" aria-label="Aria Name">Name</div>
<div role="link" id="title" title="Title"></div>

<HTML> element has an [lang] attribute

Add the HTML element a lang attribute with a value of "en" (for example, HTML lang="en">) to indicate the document's primary language.

Make sure to spell the attribute correctly and specify a language in the opening html> element. For instance, if English is a document's primary language, you may indicate it as follows.

<html lang="en">
  <!--document head and body-->
</html>  

You can also specify certain dialects using codes, such as "en-US" for American English or "fr-CA" for Canadian French if you'd like. On the internet, you can discover a list of language and dialect codes. If the language changes within a document, you can specify this as follows

<p>Text in one language <span lang="es">text in another language</span></p>

List contain only <li> elements and script supporting elements(<script> and <template>)

Lists are announced in a specific fashion by screen readers. Lists are easier to grasp because of this feature, but it only functions if the lists are correctly organized. Screen readers cannot alert the listener that they are hearing list items when they are contained within a group of content elements other than list items.

Any other content components are invalid; a list must include both parent elements (a set of ul or ol elements) and child elements (specified inside of these tags using the li element).

Lists may contain some non-content elements, such as script, template, style, meta, link, map, area, and data list, but only li are allowed as content.

<p> These are a few of my favorite things</p>
<ul>
     <li>Raindrops on roses</li>
     <li>Whiskers on kittens</li>
     <li>Bright copper kettles</li>
 </ul>

The page lacks the HTML doctype, thus triggering quirks mode

The DOCTYPE displayed in the example,!DOCTYPE html> is the most straightforward one that is also the one that is advised by current HTML standards. All current browsers, even the dated Internet Explorer 6, will use full standards mode for this DOCTYPE, despite earlier versions of the HTML standard recommending different options. The use of a DOCTYPE that is more complex cannot be justified for any purpose. If you choose to use a different DOCTYPE, you run the danger of selecting one that activates quirks mode or virtually standards mode.

Ensure that the DOCTYPE is placed at the very top of your HTML document. In Internet Explorer 9 and earlier, anything that comes before the DOCTYPE, such as a remark or an XML declaration, will activate quirks mode.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body></body>
</html>

Browser errors were logged to the console

The majority of browsers come equipped with developer tools. A console is typically included with these developer tools. You can find out details about the active page in the console. The web developers who created the page or the browser itself are both responsible for logging messages in the console. There are four severity levels for console messages: Verbose, Info, Warning, and Error. An error message indicates that there is an issue with your page that needs to be fixed.

The first mistake in the aforementioned example is caused by a request to the console made by a web developer.error(). The second error is a browser-generated warning that a variable that is required by one of the page's scripts doesn't exist. The DevTools Console displays the call stack in which each error occurred beneath the error's text. For instance, the Console reveals that the first error was caused by a (anonymous) function called init, which in turn invoked the doStuff function. The pertinent code is displayed when you click the pen.js:9 link in the top-right corner of that error.

This method of looking at the pertinent code for each error can assist you in finding and fixing potential issues. Try typing the error text into a search engine if you're having trouble identifying an error's root cause. Try posing a query on Stack Overflow if you can't find answers to your issues. Consider enclosing an error in a try if you can't solve it. To explicitly express in the code that you are aware of the problem, use a catch statement. The catch block can also be used to more graciously handle the mistake.

Displays images with an incorrect aspect ratio

Automating the process of producing various-sized versions of your photographs can be made simpler with the use of an image CDN. Take a look For a general overview, use image CDNs to optimize images, and for a practical code lab, learn how to install the Thumbor image CDN.

 

Verify the width and height of the image in the HTML. It's best practice to include the width and height of each image in your HTML so that the browser can set aside space for it. This method aids in preventing material underneath the image from shifting after the image has loaded. However, if you're using responsive pictures, it can be challenging to define the image dimensions in HTML because you can't determine the width and height without first knowing the viewport dimensions. To help maintain aspect ratios for responsive pictures, think about using the CSS Aspect Ratio library or aspect ratio boxes.

Why use a CDN for images? 

Image content delivery networks excel in image optimization. A 40–80% reduction in picture file size can be achieved by switching to an image CDN. While it is theoretically possible to accomplish the same goals by relying solely on build scripts, this rarely happens in reality. The produced image may appear distorted if the aspect ratio is significantly different from the aspect ratio in the source file (the natural aspect ratio), which could lead to a bad user experience. An image CDN can live on your domain or the domain of your image CDN. Third-party image CDNs typically offer the option of using a custom domain for a fee. Using your domain makes it easier to switch image CDNs at a later date because no URL changes will be needed.

Avoid an excessive DOM size

Your page's performance may be slowed by a huge DOM tree in several ways

Network efficiency and load performance: When a visitor initially opens a page, a huge DOM tree frequently includes a lot of nodes that aren't visible, which unnecessarily increases data costs for your users and slows down load time.

Runtime performance: The position and styling of nodes must be regularly recalculated by the browser as users and scripts interact with your page. When sophisticated style rules are combined with a huge DOM tree, rendering can be significantly slowed down.

Memory performance: JavaScript may accidentally save references to a huge number of nodes if you use general query selectors like document.querySelectorAll('li'), which can exceed the RAM capacity of your users' devices.

How to optimize the DOM size?

Generally speaking, try to find techniques to just build DOM nodes when necessary and destroy them when they are no longer required. You may try loading your website and manually noting which nodes are displayed if you're currently shipping a big DOM tree. Maybe you can delete the hidden nodes from the originally loaded content and just add them when the user does a specific action, like scrolling or clicking a button. Subtree Modification DOM Change Breakpoints can assist you in determining when nodes are formed if you create DOM nodes at runtime.

Simplifying your CSS selectors is an alternative strategy for enhancing rendering performance if you are unable to avoid using a big DOM tree. For more details, see Google's Reduce the Scope and Complexity of Style Calculations.

Links do not have descriptive text

A hyperlink's clickable word or phrase is known as the link text. Users and search engines can more quickly grasp your content and how it relates to other sites when link language effectively communicates a hyperlink's target.

The words "click here" and "learn more" should be changed to more precise descriptions. In general, make sure your link wording makes it clear what kind of content users will find if they click the link.

Lighthouse flags the following generic link text is - click here, click this, go, here, this, start, right here, more, learn more

<p>Check out all of our <a href="videos.html">basketball videos</a>.</p>

The document doesn't have a valid hreflang

Many websites offer many page versions based on a user's language or location. Search engines can display the appropriate version for each language or area by using hreflang links, which provide the URLs for all available versions of a page. Then, Lighthouse verifies that the hreflanglinks include valid language codes. Any hreflang links with improper language codes are reported by Lighthouse.

<link rel="alternate" hreflang="en" href="https://example.com" />
<link rel="alternate" hreflang="es" href="https://es.example.com" />
<link rel="alternate" hreflang="de" href="https://de.example.com" />

The document does not have a valid rel=canonical

Search engines view several pages that have the same content as duplicates of one another. For instance, a product page's desktop and mobile versions are frequently seen as duplicates. The canonical, or primary, version of one of the pages is chosen by search engines, who then crawl that page more often. You may inform search engines which version of a page to crawl and show to users in search results by using valid canonical links.

A page fails this audit if any of the following conditions are met:

• There is more than one canonical link.
• The canonical link is not a valid URL.
• The canonical link points to a page for a different region or language.
• The canonical link points to a different domain.
• The canonical link points to the site root. Note that this scenario may be valid in some scenarios, such as for AMP or mobile page variations, but Lighthouse nonetheless treats it as a failure.

<link rel="canonical" href="https://example.com"/>

The document does not have a meta description

Search engines use the meta name="description"> element to summarise a page's content in search results. Your page appears more relevant when it has a solid, distinctive meta description, which helps boost search traffic.

<meta name="description" content="Put your description here.">

Conclusion

For websites to deliver a quick, fluid, and user-friendly experience to visitors, web page optimization is essential. Websites can greatly improve their speed by putting into practice strategies like image optimization, minification of CSS and JavaScript, caching systems, responsive design, reducing HTTP requests, content delivery optimization, and removing render-blocking resources. Keep in mind that optimizing web pages is a continuous effort. As technology advances and user expectations rise, regular monitoring, testing, and optimization are required to guarantee that websites continue to perform at their peak levels. Businesses may increase visitor retention and attraction, boost conversion rates, and ultimately accomplish their online objectives by giving web page optimization priority.

FAQs

1. What is web page optimization?

Web page optimization refers to the process of improving the performance, speed, and user experience of a website by optimizing various elements such as images, code, and server response times, and implementing best practices.

2. Why is website optimization important?

Website optimization is important because it improves page load times, enhances user experience, reduces bounce rates, boosts search engine rankings, increases conversion rates, caters to mobile users, and can lead to cost savings.

3. How can I optimize images on my web page?

You can optimize images by compressing and resizing them, utilizing image optimization tools, and leveraging next-generation image formats like WebP. Additionally, lazy loading can be implemented to defer the loading of non-visible images.

4. What is minification, and why is it important for CSS and JavaScript files?

Minification involves removing unnecessary characters, white spaces, and comments from CSS and JavaScript files. It is important because it reduces file sizes, improves load times, and enhances overall website performance.

5. How can I leverage browser caching for my web page?

You can leverage browser caching by configuring server headers to instruct browsers to cache static resources like CSS, JavaScript, and images. This reduces the need for repeated server requests and improves load times for returning visitors.

6. What are render-blocking resources, and how can I minimize their impact?

Render-blocking resources, such as CSS and JavaScript files, delay the rendering of a web page. You can minimize their impact by using techniques like asynchronous and deferred loading, inlining critical CSS, and code splitting.

7. How can I optimize my web page for mobile devices?

You can optimize your web page for mobile devices by implementing responsive design, using CSS media queries, optimizing font sizes and touch targets, and prioritizing mobile performance. This ensures a seamless user experience across different screen sizes.

8. What role does website performance play in search engine rankings?

Website performance, including factors like page speed and load times, is considered an important ranking factor by search engines like Google. Faster-loading websites tend to rank higher in search engine results, leading to increased visibility and organic traffic.

9. What is the role of Lighthouse in web page optimization?

Lighthouse is a powerful tool provided by Google that evaluates web pages based on performance, accessibility, best practices, SEO, and PWA criteria. It provides actionable insights and recommendations to optimize various aspects of a web page.

10. Is web page optimization a one-time process?

No, web page optimization is an ongoing process. Technology evolves, user expectations change and new optimization techniques emerge. Regular monitoring, testing, and optimization are necessary to ensure that a website continues to deliver optimal performance and user experience.