Google PageSpeed Insights showing unused javascript but it is used - Stack Overflow

admin管理员组

文章数量:1314216

Javascripts which are used but google page speed insights shows it is not used. Is there anyway the i can remove it. Here i am sharing the screen shot of PageSpeedInsight report.

In the above screenshot u can see 8 js files were unused. But it is getting used on my app.

Javascripts which are used but google page speed insights shows it is not used. Is there anyway the i can remove it. Here i am sharing the screen shot of PageSpeedInsight report.

In the above screenshot u can see 8 js files were unused. But it is getting used on my app.

• javascript
• google-pagespeed
• google-pagespeed-insights-api

Share Improve this question Follow edited Aug 18, 2020 at 8:01 SDK asked Aug 18, 2020 at 5:44 SDKSDK 1,51833 gold badges2828 silver badges5555 bronze badges 6

• 1 I guess Google is telling you it's not needed for the start of the page? So you could decide to load it in only when it is used the first time. It's not saying it's pletely unused, it's saying some code in those files are unused. – Joel Harkes Commented Aug 18, 2020 at 5:48
• 2 i think its also telling you that you only use parts of the files. It suggests you to split the files and only import the chunks you actually need. – The Fool Commented Aug 18, 2020 at 5:49
• you can dynamically load javascript files. load the files on scroll. and after you append them to the head tag remove your event listener – Ilijanovic Commented Aug 18, 2020 at 6:14
• "Is there anyway the i can remove it" - yes, simply edit your markup and remove the <script> tag that loads this file. Otherwise, if this is needed, just ignore the warnings. The main problem could be that you are loading multiple files from multiple domains – Nico Haase Commented Aug 18, 2020 at 6:23
• @DhanushKumarS Can you share more details on how you are loading the script files? So that the answers can be more specific. – Ashish Yadav Commented Aug 18, 2020 at 6:36

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

NOTE: This answer is due to confusion. The OP is not using React but the report includes the React example. This might be helpful to others anyways.

If your ponents are loaded dynamically ( only after a user request for it ).

You can use React.lazy() as suggested in the report for code splitting so that you don't load the large bundle when not necessary.

This solution is for non SSR.

BEFORE:

import ComponentB from './ComponentB';

function ComponentA() {
  return (
    <>
        {/* After certain action probably like routes switch or any? */}
        <ComponentB />
    </>
  );
}

AFTER:

import React, { lazy } from 'react';
const ComponentB = lazy(() => import("./ComponentB.js"));

function ComponentA() {
  return (
    <>
        {/* After certain action probably like routes switch or any? */}
        <ComponentB />
    </>
  );
}

Reference: https://reactjs/docs/code-splitting.html

You could load your script files on scroll. When the user starts to scroll down you append the script tag to your head and remove the event listener again.

Only add scripts that arent in the viewport at the beginning like recaptchas. The are usually somehwere at the bottom.

function dynamicLoad(url) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}
window.addEventListener("scroll", loadScripts);

function loadScripts() {
  //load here as many dynamic scripts as you want
  dynamicLoad("recaptcha url");
  dynamicLoad("facebook url");
  //end ------
  window.removeEventListener("scroll", loadScripts);
}

本文标签： Google PageSpeed Insights showing unused javascript but it is usedStack Overflow