In our first article in this series we introduced Lighthouse from Google and showed users what is does and why it is important to your business success. In case you missed it, you can find that article here: Illuminating Google Lighthouse
Google Lighthouse provides a robust set of tools to score your site’s performance and returns an overall performance score from 1 to 100 with a higher score representing better performance. Many tools exist to detect performance & usability issues. However, Google Lighthouse is the most extreme. This article will dig deeper into performance and how Lighthouse can help you identify bottlenecks in order to remove them, increase your lighthouse score and boost speed and SEO performance!
If you build your site to be Lighthouse ready it will perform and behave well for mobile device users as well!
Performance
Google Lighthouse measures numerous metrics that determine how fast your website will be perceived when accessed from mobile devices which typically have slower connection speeds and screen real estate than desktop users. The top six measurements that comprise performance are listed below in priority order.
1. Time to Interactive
This is the amount of time it takes for the page to become fully interactive. “Interactive” is defined as point where the user is able to view and actually use the site. As of writing this article, even though it is listed third in the performance audit, this is the single most important factor when measuring a pages perceived speed and is weighted the highest. Roughly under 3000 milliseconds in this category results in upper 90s for the Lighthouse Performance score.
2. First Meaningful Paint
Measures when the primary content of the page is visible. This is a subjective measurement of what the users feel is displayed regarding information that appears on the main screen without the need to scroll down, also known as “above the fold.”
3. First Contentful Paint
Marks the time that the first text or image is painted “displayed” on the screen. This is an important milestone for users because it provides feedback that the page is, in fact, loading.
4. Speed Index
Shows how quickly the contents of the page are visibly populated. The lower the score, the better. This score is very similar to First Meaningful Paint and First Contentful Paint and typically good scores in those categories equates to lower speed index.
5. First CPU idle
Marks the first time at which the page’s main thread is quiet enough to handle input. This is referring to the fact that most JavaScript is blocking and until it completely loads on the user’s device it will block user input.
6. Estimated Input Latency
Estimate of how long your app takes to respond to user input, in milliseconds, during the busiest 5 second window of page load. If your latency is higher than 50 milliseconds, users may perceive your app as “laggy.” The quicker your app or website is at handling user input the faster the application will feel to users.
With today’s content management systems, content authors can update websites instantly and content that inadvertently affects performance can be just as harmful to lighthouse scores as the actual html code. Therefore, you must take regular measurements (daily) of Lighthouse scores in order to ensure your websites continue to perform well.
If you have high scores in Lighthouse (90 or above) then your other measurement tools are virtually guaranteed to have high scores as well. We recommend using multiple tools all setup in a test harness to continually monitor your sites on a continual basis.
Best Practices for Improving Performance
CSS and JavaScript Framework Matter
There are many CSS and JavaScript frameworks available and more arriving every day. We recommend you pick one of the newer frameworks that are pure CSS for visual and pure JavaScript for behavior. Some of the more popular older frameworks are large (like Bootstrap) and can lower scores if not properly implemented. Tailwind is currently a strictly CSS based visual framework and performs very well in Google Lighthouse scores. Visual frameworks that require both CSS and JavaScript should be avoided as JavaScript can be the worst offender for lowering performance of your website.
Inline Style okay, but no inline JavaScript
Inline CSS actually has a positive impact on Lighthouse scores. It may appear anywhere in the HTML with little performance loss. This makes the page larger but improves performance as it reduces the number of network hits from the client. Linking to CSS should be done in the head tag but ideally minified and pulled in as inline CSS. Since CSS is visual, the page will typically render quicker and more stable to the end user. Sites that require large and custom CSS and the pages render and then change and jump right before your eyes. That is a poor user experience and inline CSS helps reduce that type of behavior. JavaScript is horrible for performance and should only be placed in the bottom of the page right before the closing body tag. While some can be run asynchronously from the head or body, we have found performance is still better when all JavaScript is in the bottom.
Choose Third-Party JavaScript Carefully
Any JavaScript on your webpage will cause some slowdown because the browser needs time to render and run it. Even Google Tag Manager (GTM) is bad for lighthouse performance. GTM is recommends that it be placed in the head of your HTML which blocks the loading of the page and thus lowers performance. We have seen as much as a 10-point drop in performance using GTM and other third-party JavaScript libraries. If you must use third-party JavaScript libraries, then we recommend putting all of those in the bottom of the page before the closing body tag. If that is not possible, like in the case of Monetate, we recommend contacting vendors directly to ask for a more Lighthouse friendly version of their JavaScript.
If it is an Icon, make it inline SVG
Any image that is an icon should be converted to SVG as it is a vector graphic and the user’s web browser, or mobile device will render those virtually instantly. There is much less data needed to render SVG icons. As a result performance will increase if all icons and logs are in the SVG format. We have also discovered adding the SVG code directly to the HTML is faster than linking to it. This is due to the fact the client browser will not need to make multiple calls to render the page properly. The page size will increase but it is still faster for end users.
No such thing as Next Gen Image Format
Google Lighthouse recommends converting pictures into “Next Gen” images. Sadly, there is no universally accepted “Next Gen” image that renders correctly on all browsers. Google recommends WebP and Safari recommends JPEG 2000. If you have a next gen image format it will likely display as a broken image for some people. The best is to save images in today’s current formats but make sure they are highly optimized for the web. Screen resolutions for even mobile devices is extraordinarily high (4K and above) so your image will need great resolution but with highest compression. The good news is most modern image software can save images as “web optimized” with the click of a button. Pro Tip: Download Google’s WebP conversion tool and if the size of the image in WebP format is within 20% of the standard format (JPEG, PNG, Gif) then Google Lighthouse will stop complaining about next generation images. We automated this process in our content management system so that it will automatically convert, compress and check that images are within 20% compression as that of WebP.
Content can Negatively Impact Scores
So you have optimized your HTML, picked the lightest weight CSS and JS framework available. Your test page is scoring a perfect 100 with two paragraphs of Lorem Ipsum. Now what? Well now it is time to setup a test harness that measures your Lighthouse scores daily as your content editors are going to create content that can drastically lower your Lighthouse scores. Content is just CSS, JS and HTML and with the ability to link to anything (like YouTube) people will enter content that is going to lower your scores. With a solid monitoring system in place that automates running Lighthouse daily, you can catch problems quickly and train content editors on the spot. We even have our monitor system email the content editors directly when scores drop more than a few points from our agreed upon baseline. In order to avoid the nag emails, our content authors check the Lighthouse scores immediately and correct it before it becomes a problem.
Our experts can work with you to optimize your performance even further to ensure that you are getting the most value from your precious investments in these critical digital assets. However, by adopting these tried and true best practices, you can be certain your Lighthouse and SEO scores will improve dramatically! We want you to be successful and there is no “one and done” solution. The key to sustained, excellent SEO performance is continued vigilance to ensure you are up to date on the content changes to your site content and latest updates from Google. If you’d like to learn more, CyberLancers can perform a free performance check to help you understand how you are really performing. To learn more go here: Free Performance Check!
And stay tuned for the next in our series of illuminating articles about Lighthouse as we talk about SECURITY and explore where you may be exposed and how to fix it!