rylanharper
commented
4 years ago @renardsas I know your comment has been here a while, but here are the things I do to get a perfect 100 PWA with Nuxt and Prismic:
- Nuxt now supports static deployment. This can be done in your nuxt.config.js file by setting
target:'static'. This will speed up performance more than anything. - As you mentioned, you'll want to ensure sure all images are lazyloaded or use a vue-hydration plugin. With Prismic, all images are automatically compressed with the support of imgix, which is cool. Personally, I use a custom vue-directive plugin that hooks up to Vanilla Lazyload, you can see my post here on that. I read your post, which is great!
- Purge any additional css, especially if your using a sass library.
- SEO can get a 100 with the Nuxt PWA plugin as well as filling in meta data in the nuxt.config file. You'll want to include the PWA options such as lang, name, short_name, and theme_color
- Finally for Accessibility, you'll want to check lighthouse that your site is meeting the WCAG standards (basically no super small text, and clear color differentiation). Also make sure your images all have some type of alt text which can be done within Prismic when adding an image.
Hope this helps!:)
Hi, I generated a report using Lighthouse for nuxt-prismic-showcase Here result :
I generated another report for a site I did with nuxt and nuxt-prismic. I get close results:
I set up lazy loading for images, cut to the right size, use next-gen formats, fix ensure test remains visible during webfont load by adding font-display: swap.
I read this article and set up vue-lazy-hydration to try to get better performance : https://markus.oberlehner.net/blog/how-to-drastically-reduce-estimated-input-latency-and-time-to-interactive-of-ssr-vue-applications/
But this did not bring a significant drop. What can be done to improve the result for Time to Interactive, First CPU Idle and Max Potential First Input Delay ?
Thank you