Enhancing Web Performance: Input Delay, INP, and the viewport tag

At Pagecloud, we're dedicated to providing you with the best tools and insights to create and manage your websites effectively. Today, we want to share some valuable information about a technical issue recently encountered on our platform - Interaction to Next Paint (INP). Whether you're a seasoned web developer or just starting your journey in website creation, understanding INP is crucial for optimizing your website's performance.

Decoding Interaction to Next Paint (INP)

Interaction to Next Paint (INP) is a metric that assesses a page's overall responsiveness to user interactions by observing the latency of all click, tap, and keyboard interactions that occur throughout the lifespan of a user's visit to a page. This metric is crucial as it provides a comprehensive measure of a page's responsiveness, making it a more reliable indicator of overall responsiveness than other metrics like First Input Delay (FID). A high INP can make your site appear sluggish or unresponsive, leading to user frustration.

The Significance of Core Web Vitals and Lighthouse

Core Web Vitals, a subset of Google's Web Vitals, are crucial metrics that apply to all web pages. They are surfaced across all Google tools, including Lighthouse, and focus on three aspects of user experience: loading, interactivity, and visual stability. In addition to INP these metrics include Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). A page is considered to be performing well if it meets the recommended targets for these metrics at the 75th percentile of page loads, across both mobile and desktop devices.

Lighthouse is an open-source, automated tool provided by Google for improving the quality of web pages. It provides a set of metrics to help identify and fix common problems that affect your site's performance, accessibility, and user experience. Google uses 

A high Lighthouse score is a testament to a well-performing website, leading to improved user experience. It can also positively impact your site's SEO, as Google uses page experience signals, including Lighthouse metrics, in its search rankings. Moreover, a good Lighthouse score can increase your website's credibility and trustworthiness, leading to higher user engagement and conversion rates.

Our Encounter with INP

We recently noticed an INP issue on Pagecloud. Chrome's recommended Web Vitals tool reported an INP increase of about 200ms. This increase caused our INP score to be reported as "needs improvement" by the Web Vitals tool and negatively impacted our Lighthouse score.

The cause of this issue was a fixed viewport width set using the HTML meta tag: <meta name="viewport" content="width=468">. We could have tried to remove that viewport tag but as that would have meant updating thousands of customer websites it wasn't a realistic solution.

The Resolution and Its Impact

To address this issue, we added touch-action: manipulation; to the body of the page when the viewport tag was present. This CSS property specifies whether and how a user can manipulate the viewport, i.e., the user's visible area of a web page.

After implementing this CSS class, our INP numbers dropped to about 32ms, a significant improvement! This change also positively impacted our Lighthouse score, reaffirming the importance of continuous performance optimization.

The Possible Root Cause

We believe the root cause of this issue might be related to a tap delay that was once a part of mobile browsers, as explained in this Chrome Developers Blog. However, we're not entirely certain of this fact, and the blog article is quite old.

Interestingly, there doesn't seem to be much mention of how viewport settings relate to INP on the internet. It's a bit of a mystery, but our experience shows that they might be closely related.

Final Thoughts

Our experience with this INP issue underscores the importance of every line of code in impacting your site's performance and user experience. It also highlights the significance of improving your Lighthouse score, not just for boosting your SEO or enhancing your website's credibility, but also for providing your users with the best possible experience.

So, fellow website creators, keep an eye on your INP and other performance metrics. Use tools like Chrome's Web Vitals and Lighthouse to monitor your site's performance. And most importantly, never stop learning and experimenting. The world of web development is full of surprises, and sometimes, the solutions to our problems come from the most unexpected places.

Here at Pagecloud, we're committed to helping you navigate these challenges and create the best possible websites. Happy creating!