Load JS scripts only where they are needed

XMLWordPrintable

    • Type: Task
    • Resolution: Migrated
    • Priority: Should have
    • None

      Summary

      In order to improve websites' performance and the page load time, JS scripts must be loaded only where they're needed.

      Requirements

      Check the JS scripts loaded on every page and remove the unnecessary ones by enqueuing them correctly so that they are called only when they're needed. These are only some examples of JS scripts that are loaded on an empty page where they are not used:

      • rellax-js is only used by the Page Header template (but could be used by any other element with the is-style-parallax class).
      • lite-yt-embed.js  is loaded even when there's no YouTube embed.
      • load_more.js is part of app.js but only needed when an element with class setupLoadMore exists.
      • search.js is part of app.js but only needed when the element body.search exists
      • query_loop_carousel.js is part of app.js but only needed when an element with class [class*="is-custom-layout-"] exists.
      • setupLightboxForImages is part of the frontendIndex.js but only needed when a page contains an image.
      • setupParallax is part of the frontendIndex.js and is only used by the Page Header template (but could be used by any other element with the is-style-parallax class).

      Resources

            Assignee:
            Unassigned
            Reporter:
            Pedro Figueroa
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

              Created:
              Updated:
              Resolved: