Polymer / pwa-starter-kit

Starter templates for building full-featured Progressive Web Apps from web components.
https://pwa-starter-kit.polymer-project.org
2.37k stars 431 forks source link

Google Page Speed Insights on demo apps #227

Closed casertap closed 4 years ago

casertap commented 6 years ago

Hi, I ran page speed insight on the PWA demo apps. The results are kind of good for desktop and kind of average/low for mobile. The statement: Eliminate render-blocking JavaScript and CSS in above-the-fold content is coming often and Prioritize visible content as well. Do you think it is possible to solve those issue to get a better score on page speed insight?

Another question: None of the apps implement SSR (server-side rendering) while the PWA checklist state that the content of the website should be seen by Google (you can test using Fetch as Google tool). I am not sure that the page speed insight tool will give me the same results as the Fetch as Google tool and because you need to own the domain name to use the Fetch as Google tool, my question is: Does Google is seeing the content of those pages (e.g. https://books-pwakit.appspot.com/explore?q=test )?

Thanks

logicalphase commented 6 years ago

I'd recommend Lighthouse to test build version of the app, which gives a more robust set of scores on PWAs.

The answer of the second part of your question is no. Fetch as Google will not fully read and render the app because Google search relies on Googlebot technology based on Chrome 41, which won't render most es2015/ES6, which is shameful to me because Google pushes PWA knowing search discovery is significantly degraded.

The best solution we've found is Puppeteer with headless Chrome: https://github.com/GoogleChrome/puppeteer/blob/master/README.md, which is fantastic at creating SPA PWA prerendered content for serving to Googlebot, and cached for ultra fast page loads. And we tested everything we could find to get that conclusion

frankiefu commented 6 years ago

I also recommend Lighthouse for testing PWA which takes a much more practical approach and puts user experience front and center. Try Google search PageSpeed vs Lighthouse and you can find more info.

Regarding Rendering on Google Search, @hyperpress is correct that Googlebot is based on Chrome 41. In pwa-starter-kit we recommend prpl-server for serving your app content. This allows delivering the optimal response for each browser, including es5-bundled build to Googlebot. This way Googlebot can crawl your app and you don't have to worry about your app is written in ES modules/ES6/2015 code. If you don't want to use prpl-server then just have your static web server serves es5-bundled build to all browsers. For example, Books demo app is deployed on prpl-server and you can see site:books-pwakit.appspot.com all the pages/views are indexed.

logicalphase commented 6 years ago

I should've noted that the Chrome 41 issue is certainly not the fault of this Polymer, et al, and their may be sensible reasons why Googlebot remains on 41 (browser coverage?), but it's a conundrum I hope passes soon. We've not tried the most recent version of prpl, which may work fine. Would be interesting to test across demos.

logicalphase commented 4 years ago

I think it's safe to close this as Googlebot is based on Evergreen browsers, and our testing confirms GB can fully render the latest PWA Starter Kit.

stale[bot] commented 4 years ago

This project is no longer under development and will be transitioning to a read-only repo. Thank you for your contributions.