• Resolved wpcheetah

    (@wpcheetah)


    When Preload resources is activated, it seems 10 files are preloaded randomly.

    Would it be possible to make the preloads selective?

    I use perfmatters to select which files to preload.

    Perhaps it could be possible to only preload the files that are already tagged with preload in the source?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter wpcheetah

    (@wpcheetah)

    If I deactivate “preload resources”, early hints stops working. It seems like CF strips the link headers that perfmatters set.

    Plugin Author digitalpoint

    (@digitalpoint)

    The “up to 10” items that get preloaded aren’t sorted or picked randomly, rather it’s taking the first 10 items that were loaded into the preload queue. Specifically, it’s the first 10 items that WordPress called wp_enqueue_script() or wp_enqueue_style() for, which usually works to the items that used higher up the page DOM.

    For random(ish) preload resource order, are resources being preloaded are in a random order within the page source? For the most part they should be the same order that they show up in the page source (at least the scripts should be and the CSS should be if you were to group them separately).

    Early Hints is an extension of preloading (if nothing is being preloaded, there will never be Early Hints that Cloudflare can send). There’s no headers that this plugin strips, but it’s possible something is happening on the Cloudflare side (ourside of the plugin). What header specifically are you seeing stripped?

    Thread Starter wpcheetah

    (@wpcheetah)

    For example, I see these preloaded in the early hints header. I don’t want all those preloaded or sent as early links, plenty of them are not needed at the beginning of the page. Are you saying they are set to preload by WP or the plugins (e.g. fluent forms)?

    <https://ieltsisetvietnam.com/wp-content/uploads/blocksy/css/global.css?ver=97606>; as=style; rel=preload
    <https://ieltsisetvietnam.com/wp-content/plugins/fluentform/assets/css/fluent-forms-public.css?ver=6.0.4>; as=style; rel=preload
    <https://ieltsisetvietnam.com/wp-content/plugins/fluentform/assets/css/fluentform-public-default.css?ver=6.0.4>; as=style; rel=preload
    <https://ieltsisetvietnam.com/wp-content/plugins/stackable-ultimate-gutenberg-blocks/dist/frontend_blocks.css?ver=3.18.0>; as=style; rel=preload
    <https://ieltsisetvietnam.com/wp-content/plugins/hotline-va-zalo//css/hotline.css?ver=1.0.0>; as=style; rel=preload
    <https://ieltsisetvietnam.com/wp-content/themes/blocksy/style.css?ver=6.8.2>; as=style; rel=preload
    <https://ieltsisetvietnam.com/wp-content/themes/blocksy/static/bundle/main.min.css?ver=2.1.8>; as=style; rel=preload
    <https://ieltsisetvietnam.com/wp-content/themes/blocksy/static/bundle/stackable.min.css?ver=2.1.8>; as=style; rel=preload
    <https://ieltsisetvietnam.com/wp-content/plugins/blocksy-companion-pro/static/bundle/header-account.min.css?ver=2.1.8>; as=style; rel=preload
    <https://ieltsisetvietnam.com/wp-content/plugins/blocksy-companion-pro/framework/premium/static/bundle/popups.min.css?ver=2.1.8>; as=style; rel=preload
    <https://ieltsisetvietnam.com/wp-content/uploads/iset-hero-slider-1.webp>; as=image; fetchpriority=high; rel=preload
    <https://ieltsisetvietnam.com/wp-content/uploads/blocksy/css/global.css?ver=97606>; as=style; rel=preload
    <https://ieltsisetvietnam.com/wp-content/themes/blocksy/static/bundle/main.min.css?ver=2.1.8>; as=style; rel=preload

    But in the HTML source, only the following are preloaded. These I have manually set in perfmatters. And the only ones I want to preload/early hint.

    link rel="preload" href="https://ieltsisetvietnam.com/wp-content/uploads/iset-hero-slider-1.webp" as="image" fetchpriority="high"><link rel="preload" href="https://ieltsisetvietnam.com/wp-content/uploads/blocksy/css/global.css?ver=97606" as="style" onload="this.rel='stylesheet';this.removeAttribute('onload');"><link rel="preload" href="https://ieltsisetvietnam.com/wp-content/themes/blocksy/static/bundle/main.min.css?ver=2.1.8"

    If I turn off “preload resources” the early hints header is gone in dev tools. If I turn off html caching in CF, the early hints headers are back, with only the ones I have set in perfmatters.

    • This reply was modified 6 months, 4 weeks ago by wpcheetah.
    • This reply was modified 6 months, 4 weeks ago by wpcheetah.
    • This reply was modified 6 months, 4 weeks ago by wpcheetah.
    Plugin Author digitalpoint

    (@digitalpoint)

    Early Hints more or less utilizes what is being preloaded. You can see the specifics of how Cloudflare Early Hints work here:

    https://developers.cloudflare.com/cache/advanced-configuration/early-hints/

    I think there’s some confusion between setting the rel=preload attribute within the HTML source (this plugin does not do that, nor should it prevent anything from doing it. What the plugin *does* do is look at the first 10 resources being loaded (scripts or CSS), and it has the option to set the preload (link) HTTP header to include those (again, nothing to do with things having the rel=preload attribute in the HTML source. Early Hints will add secondary items that it picks up in the HTML source in addition to the ones specifically called out in the HTTP headers (the HTTP headers part is what this plugin does).

    If you are making changes to Early Hints and/or preloading and using guest page caching, you’ll want to purge the cache in order to see those changes. Early Hints are cached with the page itself, so making changes to those settings would need a cache purge to fully reflect that (otherwise you are serving Early Hints from the previously cached version).

    Thread Starter wpcheetah

    (@wpcheetah)

    Okay thanks. I am only interested in preloading the items set in HTML, so I will disable “preload resources” in the plugin.

    When guest caching is turned on, the early hints headers are gone, purging doesn’t help this.

    Plugin Author digitalpoint

    (@digitalpoint)

    Early Hints won’t reliably work without the HTTP response header for preloading. The response header (what this plugin adds) will usually make Early Hints work, having preload attributes in the HTML source will only *sometimes* (rarely) make Early Hints work. The specific details of the logic for Early Hints is at the previous URL I posted (there are other considerations too, like some user agents don’t get Early Hints, needs to be HTTP/2 ot HTTP/3, etc.)

    That being said, it does make sense to have better logic within this plugin to decide which resources to preload when possible. It looks like WordPress added the ability to specify resources to preload about a year ago (introduced in WordPress 6.6), so it looks like we could hook into that to see if a plugin or theme is leveraging that to flag stuff for preloading. Not sure if Perfmatters is using that or not though (I don’t have access to their source to see).

    Plugin Author digitalpoint

    (@digitalpoint)

    For the next version, I added support for WordPress’s wp_preload_resources hook. When third-party plugins use it, it will prioritize preloading the resources that were specifically called out with it, and also order them based on the fetchpriority attribute (if a plugin is calling out a specific resource to have a high priority it will be prioritized when building the preloading HTTP header).

    As I mentioned before, I don’t have access to Perfmatter, so I’m not sure if they are leveraging that particular hook (although I would think they *should* be since it’s a mechanism that WordPress core gives them). Either way, the next version has support for better prioritization logic for sites that have plugins that use that hook.

    Thread Starter wpcheetah

    (@wpcheetah)

    Okay, but I think perfmatter simply adds the link headers to the source code.

    Anyway, CF html cache does not include those early links headers, so if I disable “preload resources” they are gone.

    From ChatGPT:

    • WordPress (Perfmatters in your case) generates <link rel="preload"> in the HTML output and/or sends them as Link: HTTP headers.
    • Cloudflare’s Cache Everything / HTML cache only stores the HTML response body — it strips dynamic headers like Link unless they are explicitly transformed/preserved.
    • Result: when HTML comes from CF’s cache, your Link headers (needed for 103 Early Hints) are missing.

    So I had ChatGPT write a worker that reads the links headers and add them back, it seems to work.

    • This reply was modified 6 months, 3 weeks ago by wpcheetah.
    • This reply was modified 6 months, 3 weeks ago by wpcheetah.
    Plugin Author digitalpoint

    (@digitalpoint)

    Ya, I can’t control what Perfmatters does or doesn’t do. If Perfmatters isn’t leveraging WordPress’ wp_preload_resources hook to add it’s HTML-based preloading, then other things (for example this plugin) can’t extend that further to do things like feed them into the HTTP response headers. The next version will do that for anything using that hook, but I don’t have any control over if third-party plugins are doing it with the standard hooks WordPress gives them, or doing it their own (different) way.

    Cloudflare intentionally does not use Early Hints when serving the page from cache because the HTTP response headers that build the Early Hints is in the response itself. Early Hints is most useful when you want to preload things, but you don’t have the ability to set what those are in the HTTP response headers. Doing Early Hints and then also a preload header would actually slow things down. For example, let’s say an HTML document is being served from Cloudflare’s cache (which includes the preload header). Doing early hints in that case is a waste of time and bandwidth because the preload header in the cached response is what Early Hints is trying to give the browser… so no need to do the first 103 Early Hints response because the info that’s giving you (what to preload) is already in the HTTP response headers for the normal cached request. Basically no need to ask what to preload before making the request because we already know the cached request is telling the browser what to preload before the first byte of the HTML is sent to the browser. That’s why Cloudflare doesn’t bother with Early Hints on a cached HTML page that has preload headers set (there’s no need to get that info twice before the first byte of the HTML is sent).

    Being able to do preload info within HTTP response headers is always going to be better than doing them in the HTML source because the browser can start preloading them before it even starts to receive the HTML.

    As far as ChatGPT stuff, I guess if it works for you, then great… but from the looks of it, ChatGPT is mistaken about some things… for example if you are using Cloudflare’s Cache Everything directive, you might want to revisit why you are doing that. That ends up causing more problems than it solves (for example serving cached content to logged in users). Additionally, inserting a Worker adds overhead and extra backend API requests to the underlying HTTP request. I’d definitely do some benchmarking with and without the inline Worker.

    Again… Cloudflare intentionally does not do an Early Hint if it already knows the cached result *has* the same info that the Early Hint would yield within the HTTP response header. There simply isn’t a point because if the preload info is in the HTTP response header, the browser doesn’t need to receive that info twice (again, before the first byte of the HTML is received).

    From the earlier page about Early Hints (basically it’s faster to not send Early Hints when it’s cached):

    Early Hints may be emitted less frequently on requests where the content is cacheable. Cloudflare CDN is more likely to retrieve a response header before the asynchronous Early Hints lookup finishes if the response has been cached. Cloudflare will not send a 103 response if the main response header is already available.

    https://developers.cloudflare.com/cache/advanced-configuration/early-hints/
    • This reply was modified 6 months, 3 weeks ago by digitalpoint.
    Thread Starter wpcheetah

    (@wpcheetah)

    Okay, got it. Thanks.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Selective preload/early hints option’ is closed to new replies.