bundle-common.js and page specific bundle-*.js is loaded 2 times on the page load

salmanazeez786 commented 1 year ago

I see that the bundle-* files are loading twice on the Homepage, PLP and PDP pages for which I have created the magepack bundles

Further looking in the code , I see the layout xmls are adding the bundle-common.js & page specfic bundle-*.js in the head section,

cms_page_view.xml
<body>
        <referenceBlock name="magepack.bundles">
            <arguments>
                <argument name="page_bundles" xsi:type="array">
                    <item name="cms" xsi:type="array">
                        <item name="config_path" xsi:type="string">magepack/requirejs-config-cms.js</item>
                        <item name="bundle_path" xsi:type="string">magepack/bundle-cms.js</item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>

But the same bundle-common.js and page specfic bundle-*.js is also added as a prefetch link in phtml templated which loads in all pages

MageSuite_Magepack::bundles-loader.phtml

<?php if ($commonBundleUrl): ?>
<link rel="prefetch" as="script" href="<?= $commonBundleUrl; ?>"/>
<?php endif; ?>

<?php foreach($pageBundlesUrls as $pageBundleUrl): ?>
<link rel="prefetch" as="script" href="<?= $pageBundleUrl; ?>"/>
<?php endforeach; ?>

Is this expected ? or can we remove the prefetched ones ?

fredden commented 1 year ago

The "prefetched ones" are intentional, and desired. More details about what these mean can be seen here:

In your screen-shot, I can see that you have enabled the "disable cache" feature, which instructs the browser to disregard all its internal caches where possible. That's why you have duplicate fetches of the same asset(s). I recommend you untick that box and then review the "size" column, which should show that one of the "duplicates" is a fetch (probably from disk, but possibly from the network), and the other is loaded from the prefetch cache.

Screenshot_2023-03-08_15-54-31

salmanazeez786 commented 1 year ago

@fredden I disabled cache to check the hits on server. And I see 2 hits on the server. For any new user who accesses the site, it adds 1 additional request on server along the original one, but the successive calls are prefetched cached and we are good on that. The issue is with reports showing these additional requests and are adding up load times to the web vitals. On GTmetrix we see decrease in percent of performance comparing before and after changes.

Il go through the documents you have shared, but also want to know if there will be any issue if we ignore the prefetch scripts on the phtml? I didnt see any though, but would like to hear from you

fredden commented 1 year ago

That's curious; I'm only seeing a single request for each asset in the web server logs that I reviewed just now. Are the cache-related headers that the browser receives sensible? Is there a public URL that you can share of a website you're having trouble with?

Yes, you can remove the <link rel="prefetch" /> HTML elements without impacting the functionality of the website. This is likely to have a negative impact on the performance of the website. I recommend against optimising for a particular tool/score, and instead optimise for human experience. Keeping the browser hint will give best results for humans.

salmanazeez786 commented 1 year ago

@fredden I don't have a public URL to share for now, but I checked on the access logs and I can confirm we do see 2 requests for the first hit on server. For now I have added the below patch to enable/disable Prefetch

Config-to-disable-prefetch.patch

onlinebizsoft commented 1 year ago

@fredden @salmanazeez786 I guess the author have tested with devtools opening and enable Disable cache option so the prefetch and the include will be 2 load times. This is not an issue.

magesuite / magepack

bundle-common.js and page specific bundle-*.js is loaded 2 times on the page load #177