UNPKG affect page load time vey badly on end website and author | Community
Skip to main content
N
neo-silicon
Level 3
March 15, 2025
Solved

UNPKG affect page load time vey badly on end website and author

  • March 15, 2025
  • 3 replies
  • 1008 views

Hi Team,

We are using  the below unpkg at customheaderlibs.html 

<script src="//unpkg.com/@ungap/custom-elements"></script>

 

Problem Statement: The dependency is being delivered via UNPKG, a public CDN for npm packages. When it attempts to load and takes longer than expected, it affects the page load time for authors and publishers on the end website. However, if it fails to load, it does not impact the page load time.

 Any one faced this issue and how we can overcome and what is best way to deal this type of issue. Kindly suggest

 

Thanks

 

Best answer by narendragandhi

Hi Narendra,

true we are using the below one from that repo code. We dont know why they added in our code 

<!-- this should be on top of your HTML <head> scripts -->
<script src="//unpkg.com/@ungap/custom-elements"></script>


The GitHub repo link shared above, points to an API - https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-api likely your code might be using CustomElements somewhere.

 

Thanks

Narendra

3 replies

PRATHYUSHA_VP
Community Advisor
PRATHYUSHA_VPCommunity Advisor
Community Advisor
March 17, 2025

Hi @neo-silicon 

 

Embedding third-party scripts often cause performance slowdowns in webpages often caused by resources outside the site owner's control. Below are the ways to mitigate the issue - 

 

  • Load the script using the async or defer attribute to avoid blocking document parsing
<script src="//unpkg.com/@ungap/custom-elements" async>
<script src="//unpkg.com/@ungap/custom-elements" defer>
  • Use pre-connect for the third party dependencies, like below 
<link rel="preconnect" href="//unpkg.com/@ungap/custom-elements"> // verify the browser-support for pre-connect
  • Implement lazy-loading for these type of scripts, this way users get page content faster and improve LCP and speed metrics

Hope this helps

 

Thanks

    N
    neo-siliconAuthor
    Level 3
    March 17, 2025

    Thank you for your reply . custom-elements we are not using in our code repo so we are trying comment this line 

    narendragandhi
    Community Advisor
    narendragandhiCommunity Advisor
    Community Advisor
    March 17, 2025

    Hi @neo-silicon , it seems you are using https://github.com/ungap/custom-elements this library in your code for custom elements. Once you verify that all the references have been removed from the code, you would be able to remove this reference as well.

     

    Thanks

    Narendra 

      giuseppebaglio
      giuseppebaglio
      Level 10
      March 17, 2025

      While CDNs can offer benefits, they introduce dependencies outside your control. If the script isn't critical, consider whether it can be loaded asynchronously or deferred.

      To improve the loading of your script and reduce reliance on external CDNs, you can evaluate to utilize AEM's sling-resource approach where you create a dedicated client library for external vendors.

      After implementing these changes, you should test the page load time to ensure the script loads efficiently and check for any unintended side effects and make adjustments as necessary.

        kautuk_sahni
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        April 1, 2025

        @neo-silicon Did you find the suggestions helpful? Please let us know if you need more information. If a response worked, kindly mark it as correct for posterity; alternatively, if you found a solution yourself, we’d appreciate it if you could share it with the community. Thank you!

        Kautuk Sahni
        Terms & ConditionsAccessibility statement

        Loading footer...