12/16/2023 0 Comments Wp enqueue style preload![]() ![]() ![]() wp-includes/css/dist/block-library/?ver=5.8.1Įach properly enqueued WordPress script or stylesheet has a handle attached to it, which you can view in the Script Manager. It gets the current version of WordPress core automatically appended to it. And this saves you from having to update them manually.įor example, take the WordPress Block Library stylesheet. This means the query string on the end will automatically get updated as the version changes, or as you update WordPress core, etc. So if you have resources (CSS, JavaScript) with query strings on them, it can be helpful to preload them dynamically using their handle. Dynamic preloadsīrowsers require the exact URL for preloads to work. ![]() Note: If you are having problems seeing your changes show up in a performance testing tool, make sure to clear your URL or site’s cache before testing it. Note: If you have two different physical pages in WordPress that switch based on desktop or mobile, you’ll most likely need to use the post ID of your desktop homepage but then select “mobile” for the device. You can add multiple locations, comma-separated. Use blog if your homepage is a blog feed. Remember, preload will forcefully load the resource regardless, so you don’t want to preload something that isn’t needed. Perhaps you need to preload an image just on your homepage, but nowhere else. If you’re using a caching plugin like WP Rocket or Cache Enabler, many have a separate mobile cache option.If you’re using edge cache from a hosting provider, they will sometimes have a separate mobile cache option.If you’re using Cloudflare APO, you can enable cache by device type.Most hosting providers with server-level cache already have separate caching buckets for devices in place, which means you don’t need to do anything.To use mobile preloads, you’ll need to ensure you have separate mobile caching enabled: However, you can choose desktop or mobile if needed. Preload resource in WordPress Preloading by deviceīy default, it will preload the resource on all devices. Note: Web fonts and font icons should use the CrossOrigin option. Then select the type of resource it is ( as='type') and whether or not it needs to use crossorigin. Under “Preload” enter in the location of your resource (font, image, CSS, JavaScript, etc.) This should be the full URL. Perfmatters plugin settings Step 2Ĭlick on the “Preloading” submenu. Step 1Ĭlick into the Perfmatters plugin settings. To preload a resource, follow the steps below. Note: Preload was added to Firefox in version 85. Preload is supported by all modern browsers, with the exception of Internet Explorer (Microsoft Edge supports it) and Opera Mini. However, browsers automatically optimize MP4/WebM files. worker: A JavaScript web worker or shared worker.object: A resource to be embedded inside an element.fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.embed: A resource to be embedded inside an element.document: An HTML document intended to be embedded by a or.Below are the formats that are supported in the Perfmatters plugin: Common resources There are many different resources that can be preloaded. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |