Google URL inspection tool is not the same as Page Speed Insights
I already blogged about the importance of always inspecting your Single Page App with Google URL Inspection tool. Here is another interesting thing I recently discovered while troubleshooting SPA issues.
Unfortunately I have forgotten my own advice and stopped using the URL Inspection Tool after every release. Instead, I've been using another tool called Page Speed Insights, which also comes from Google developer tools and can be found here:
The tool is actually pretty cool -- shows you a lot of information about what's wrong with your SPA and gives you practical advice how to correct the issues. Thanks to this tool I was able to get the Page Load Score index of my app https://www.wisaw.com to 98, which is excellent and should have tremendous impact on SEO -- exactly what I wanted:
It even shows how your SPA is rendered by Google (see on the right side of the previous screenshot, it's kind of small, but you can get an idea). And this is what lulled me into believing that everything is OK with my App and that it looks perfectly fine to the Google crawler as well. Was I wrong? Yes.
After couple of weeks of optimization effort and countless releases, which, I thought, were improving my app, I tried to use Google URL Inspection tool again, and was shocked to see the following result:
As one can see -- the page looks broken. It took me couple of hours to figure it out. It looked fine in every type of browser I tried on desktop and mobile. But every time I ran it through the Google URL inspection tool, the result was consistent -- the page looked all messed up. Turns out I had explicitly specified a height value in the CSS style for a <div> that wraps the <img> tag. After removing it from my code, everything started to look as it should:
Why would Google use different rendering engines for the URL inspection and for the Page Speed Insights tools? I'm sure they have a good reason. In the meanwhile, I use both tools after every release -- this is the only way to make sure your page is fast to load and looks beautiful to your users, as well as to the web crawlers.