如何修复审计灯塔建议以提高绩效

Question

I ran an audit in chrome for a web application I am developing for udacity mobile web specialist project and I am getting a score of 85 for performance. I need to get a score of 90 and above to pass the project.

Here are the diagnostics -

1. Uses inefficient cache policy on static assets 14 assets found

   A long cache lifetime can speed up repeat visits to your page.

2. Has significant main thread work 6,520 ms

   Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this.

3. JavaScript boot-up time is too high 3,810 ms

   Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this

Here is part of my service worker script. -

importScripts("/js/idb.js");
importScripts("/js/dbhelper.js");
const staticCacheName = 'restaurant-1';
const resourcesToCache = [
'/',
'index.html',
'restaurant.html',
'css/styles.css',
'js/idb.js',
'js/dbhelper.js',
'js/restaurant_info.js',
'js/main.js',
'sw.js',
'img/1_small.jpg',
'img/1_medium.jpg',
'img/1_large.jpg',
'img/2_small.jpg',
'img/2_medium.jpg',
'img/2_large.jpg',
'img/3_small.jpg',
'img/3_medium.jpg',
'img/3_large.jpg',
'img/4_small.jpg',
'img/4_medium.jpg',
'img/4_large.jpg',
'img/5_small.jpg',
'img/5_medium.jpg',
'img/5_large.jpg',
'img/6_small.jpg',
'img/6_medium.jpg',
'img/6_large.jpg',
'img/7_small.jpg',
'img/7_medium.jpg',
'img/7_large.jpg',
'img/8_small.jpg',
'img/8_medium.jpg',
'img/8_large.jpg',
'img/9_small.jpg',
'img/9_medium.jpg',
'img/9_large.jpg',
'img/10_small.jpg',
'img/10_medium.jpg',
'img/10_large.jpg',
'https://unpkg.com/leaflet@1.3.1/dist/images/marker-icon.png',
'https://unpkg.com/leaflet@1.3.1/dist/leaflet.css',
'https://unpkg.com/leaflet@1.3.1/dist/leaflet.js'
];

For 2 and 3. - Whenever I try to compress or minify my javascripts, I always get error like - Unexpected token:. I know for sure the js isn't having errors.

How can I fix these so I could get a perfomance score of 90 or above ?

Answer 1

Fixed. I had to change part of my service worker code (sw.js)

from

self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request, { ignoreSearch: true }).then(response => {
  return response || fetch(event.request).then(res => {
    return caches.open(staticCacheName).then(cache => {
      cache.put(event.request, res.clone());
      return res;
    })
  });
})
);
});

to

self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request, { ignoreSearch: true }).then(response => {
  return response || fetch(event.request).then(res => {
    if (!res || res.status !== 200 || res.type !== 'basic') {
      return res;
    }
    return caches.open(staticCacheName).then(cache => {
      cache.put(event.request, res.clone());
      return res;
    })
  });
})
);
});