4

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.

GPSI

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

SDK
  • 1,356
  • 3
  • 19
  • 44
  • 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 completely unused, it's saying some code in those files are unused. – Joel Harkes Aug 18 '20 at 05: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 Aug 18 '20 at 05: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 – bill.gates Aug 18 '20 at 06:14
  • "Is there anyway the i can remove it" - yes, simply edit your markup and remove the ` – Nico Haase Aug 18 '20 at 06: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 Aug 18 '20 at 06:36
  • Just i am adding it in the head of the HTML document – SDK Aug 18 '20 at 06:38

2 Answers2

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 components 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.org/docs/code-splitting.html

Ashish Yadav
  • 1,901
  • 2
  • 17
  • 23
  • Thanks for the answer. The app is developed using Django BTW. Definitely ur answer helps for react. – SDK Aug 18 '20 at 06:07
  • 1
    I thought you might have used React for front-end because of the suggestion from the report. Anyways, are you using the default Django templating? What you can do is, defer load the script that is not necessary to render the pages. – Ashish Yadav Aug 18 '20 at 06:11
4

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.net url");
  //end ------
  window.removeEventListener("scroll", loadScripts);
}
bill.gates
  • 14,145
  • 3
  • 19
  • 47
  • I think rather than the scroll event, we can load the rest of the script after the DOM is done loading. – Ashish Yadav Aug 18 '20 at 06:32
  • @ashiish.me if you do it like this then you can put `defer` on the script attribute, its almost the same behaviour. this wont fix his problem it will still be countet as unused js script – bill.gates Aug 18 '20 at 06:36
  • i could try this way – SDK Aug 18 '20 at 06:38
  • Got it, this makes sense. I was wondering about if I need a specific feature from JS which is not out of the viewport but it doesn't have to be loaded at the time of rendering. – Ashish Yadav Aug 18 '20 at 06:40
  • @ashiish.me yea, things like recaptchas are usually somehwere at the bottom of an form – bill.gates Aug 18 '20 at 06:41
  • Yes, totally fine for such cases. Nice one :) – Ashish Yadav Aug 18 '20 at 06:46
  • @ifaruki but this script is getting added every time onScroll right ? – SDK Aug 18 '20 at 07:05
  • no, i have said `...and remove the event listener again...` i have added `window.removeEventListener()` at the bottom after everything is added to the head tag – bill.gates Aug 18 '20 at 07:06