Uploaded image for project: 'Planet4'
  1. Planet4
  2. PLANET-4534

Perf: Split frontend JS into critical and deferrable

XMLWordPrintable

    • Icon: Task Task
    • Resolution: Unresolved
    • Icon: Should have Should have
    • None
    • None

        • This ticket is about the master theme only.*

      The frontend side does not currently require too much javascript, but maybe we can separate a few things and make sure to minify everything.

      Determine which parts are required on the "critical path", any JS that is required for rendering or styling on first load (e.g.: the "blocks_wide" script).

      Defer the loading of any parts that are not critical to the first render, for example the "load_more" script is not required for the "Load More" button to render correctly, so it can be loaded after render.

      Create two entry points (I couldn't think of better names, sorry):

      • criticalIndex
      • deferrableIndex

      If there is something very specific to a page (for example, the JS for the search results), create another entry point for that chunk only:

      • searchResultsIndex?
      • other?

      Consider loading the non-critical resources by enqueueing the scripts with extra attributes as shown here:
      https://wp-mix.com/defer-async-wordpress-enqueued-scripts/

       

       

       

            Unassigned Unassigned
            pcuadrad Pablo Cuadrado (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated: