PageSpeed Quirks & Google Plus Sign In
For the back-end of my blog I wanted to use Google+ sign-in so that I didn’t have to bother writing any user management logic.
Once it was up and running, I ran PageSpeed and got 85/100.
The oddity here was the error message.
Prioritize visible content
Your page requires additional network round trips to render the above-the-fold content. For best performance, reduce the amount of HTML needed to render above-the-fold content. The entire HTML response was not sufficient to render the above-the-fold content. This usually indicates that additional resources, loaded after HTML parsing, were required to render above-the-fold content. Prioritize visible content that is needed for rendering above-the-fold by including it directly in the HTML response.
The reason I’m getting this error is due to my site changing UI quite heavily from it’s initial state to ‘Sign In’ step.
Start with Loading Animation…..
….If We Aren’t Signed In….
….If We Are Signed In Redirect
If I drop the initial loading animation, we see a different score:
The Moral of the Story
Take PageSpeed with a pinch of salt if you run into this kind of issue with G+ (or any other library with comparable problems). The solution is to be predictable to your users. For me the time from loading to discovering whether or not the user needs to interact is long enough that I wanted to keep the loading animation in and I don’t see it as a detriment to the user experience.
Side note: This is a niche use case, most sites can auto-sign in a user and display some content until the user wishes to invest further (i.e. browse as a guest for a bit and sign-in after exploring).
Orig. Photo: https://flic.kr/p/a28KUS