Better Resource Hints
Better Resource Hints will make your WordPress site or application faster and generally more performant by intelligently leveraging resource hints like prefetch, preload, preconnect, and server push. As it stands, WordPress isn’t that bad about providing a base level of these hints. In fact, a basic, dedicated API has been shipped since version 4.6.. However, this functionality only scratches the service, providing only dns-prefetch tags out of the box, and there’s growing opportunity to take advantage of different hints as they are introduced and gain more browser support. Specifically, this plugin focuses on the following types of hints for your styles and JavaScript assets: Preconnecting – This hint is similar to “dns-prefetch,” but a beefier version. Instead of just resolving the DNS, the preconnect hint handles TLS negotiations and TCP handshakes, resulting in reduced page latency. Preloading – Preloading occurs when the browser is told it can start downloading an asset in the background early during page load, instead of waiting until the asset is explicitly called to start the process. This hint is most beneficial for assets loaded later on in the page, but are nonetheless essential to the page’s functionality. More often than not, this is a JavaScript file. Enabling this results in an overall faster load time, and quicker time to interactive. Prefetching – Prefetching assets is similar to preloading, but the assets are downloaded in low priority for the purpose of caching them for later use. For example, if a user hits your home page and is likely to go to a page that uses a heavy JavaScript file, it’s wise to prefetch that asset on the home page, so it’s cached and ready to go on the next. Again, the result is a quicker subsequent page load, quicker time to interactive, and an improved overall user experience. This is different from DNS prefetching, which will only resolve the DNS of a resource’s host, and not actually download the resource itself. Server Push – If enabled, server push will tell your server to start delivering an asset before the browser even asks for it. This results in a much faster delivery of key assets, and be toggled on for both preloaded, prefetched, and preconnected assets. Note: This feature requires a server that supports server push, and is the most experimental strategy this plugin provides. As with any sort of performance-enhancing technique, just be aware that they should be used judiciously, and that the results you see will depend on the size the of resources your site loads, as well as how your server is configured. For additional reading, see some of the resources below: Preload, Prefetch, & Priorities in Chrome Preloading Key Requests Preload: What’s It Good For? Resource Hints – What is Preload, Prefetch, and Preconnect? What Makes This Plugin Stand Apart? There’s no shortage of plugins out there that aim to leverage resource hints for boosting performance. However, I’ve seen that several of them make the following mistakes: Inflexible Hint Management Many similar plugins only provide very limited flexibility in their options, and only allow setting hints globally for every page, regardless of whether the resources are actually needed on the page. This can often result in unecessarily bloaging your bandwidth, since hints on several pages are effectively useless. In some cases, this could actually lead to a less performant site. This plugin attempts to provide options to manage hints more flexibily and intelligently, meaning you won’t be unecessarily preloading assets in the background when they’re not even needed on the page. Misunderstanding What Different Hints Do I’ve come across some plugins that fail to understand and leverage different hints like they were designed. For example, promising that assets are being preloaded, when they’re actually being prefetched. These and other hints have very different purposes, and should not be interchangably used if you want them to impact your site in the most effective way. This plugin attempts to leverage these hints in way to maximize their effectiveness. For example, BHR won’t prefetch any assets that are enqueued on the page, because that’s just not how the prefetch hint is designed to be used. Is Better Resource Hints perfect? Absolutely not. That’s why I encourage any constructive feedback or bug reports to be sent my way immediately, so that I can’t improve this plugin as quickly as possible. A Note About Preloading CSS Because of their high placement on a page, if the option is enabled, your CSS files will be asyncronously preloaded, and then turned into a stylesheet once they’ve completely loaded. The advantage to doing this is that while the files are downloading, they won’t block the rest of the page from rendering, resulting an overall faster page load. However, this also means that there may be a flash of unstyled content on the page for a brief moment as the files download. To prevent this, it’s recommended to only preload CSS files that are not critical to the initial view of the page. This will allow you to gain some performance points without sacrificing use experience as the page loads. Filters The following filters are exposed for your use. /** * Modify the HTML link generated for preconnecting hosts. * * @param string $link (HTML tag) * @param string $url (URL of the host) * @return string */ add_filter('better_resource_hints_preconnect_tag', function ($link, $url) { return $url; }, 10, 2); /** * Modify the HTML link generated for prefetching hosts. * * @param string $link (HTML tag) * @param string $handle (WP handle of the resource * @param string $type (script or style) * @return string */ add_filter('better_resource_hints_prefetch_tag', function ($link, $handle, $type) { return $url; }, 10, 3); /** * Modify the HTML link generated for preloading hosts. * * @param string $link (HTML tag) * @param string $handle (WP handle of the resource * @param string $type (script or style) * @return string */ add_filter('better_resource_hints_preload_tag', function ($link, $handle, $type) { return $url; }, 10, 3); What Happens Out of the Box? Upon activation, Better Resource Hints will optimize your resource hints in a conservative, low-risk way by only doing two things out of the box: Preloading JavaScript assets enqueued in the footer. Setting preconnect hints for all third party hosts that already have dns-preconnect hints. Using the Plugin After activation, you are able to adjust settings to tweak optimization as seen fit. As a means of testing your optimizations, use a tool like Google Lighthouse to measure the impact of these changes on your site’s performance. As mentioned, the techniques used here are largely supported by modern browsers, but your results may vary depending on the amount of assets being loaded on your site, as well as your server configuration. Feedback You like it? Email or tweet me. You hate it? Email or tweet me. Regardless of how you feel, your review would be greatly appreciated!
Top keywords
- hints22×1.92%
- page18×1.57%
- resource14×1.22%
- assets11×0.96%
- string11×0.96%
- resource hints10×0.87%
- link9×0.78%
- param8×0.70%
- param string8×0.70%
- preloading8×0.70%
- server8×0.70%
- only7×0.61%
SQLite Object Cache
A persistent object cache helps your site perform well. This one uses the widely available SQLite3 extension, and optionally the igbinary and APCu extensions to php. Many hosting services offer those extensions, and they are easy to install on a server you control. What is this about? It’s about making your site’s web server perform better. An object cache does that by reducing the workload on your MariaDB or MySQL database. This is not a page cache; these persistent objects go into a different kind of cache. These objects aren’t chunks of web pages ready for people to view in their browsers, they are data objects for use by the WordPress software. Caches are ubiquitous in computing, and WordPress has its own caching subsystem. Caches contain short-term copies of the results of expensive database lookups or computations, and allow software to use the copy rather than repeating the expensive operation. This plugin (like other object-caching plugins) extends WordPress’s caching subsystem to save those short-term copies from page view to page view. WordPress’s cache happens to be a memoization cache. Without a persistent object cache, every WordPress page view must use your MariaDB or MySQL database server to retrieve everything about your site. When a user requests a page, WordPress starts from scratch and loads everything it needs from your database server. Only then can it deliver content to your user. With a persistent object cache, WordPress immediately loads much of the information it needs. This lightens the load on your database server and delivers content to your users faster. Who should use this? If your site runs on a single web server machine, and that server provides the SQLite3 and igbinary extensions to php, this plugin will almost certainly make your site work faster. And if that server provides the APCu extension, this plugin uses it too. Some hosting providers offer redis cache servers. If your provider offers redis, it may be a good choice. You can use it via the Redis Object Cache plugin. Sites using redis have one SQL database and another non-SQL storage server: redis. Other hosting providers offer memcached, which has the Memcached Object Cache plugin. And some large multipurpose cache plugins, such as the LiteSpeed Cache, also offer object caching based on one of those cache server software packages. The cache-server approach to object caching comes into its own when you have multiple load-balanced web server machines handling your site. SQLite doesn’t work correctly in a multiple-web-server environment. But, for single-server site configurations, SQLite, possibly assisted by APCu, performs well. And the vast majority of sites are single-server. APCu APCu is an in-memory storage medium. It lets php programs, like WordPress, store data in shared memory so it’s very fast to retrieve when needed. If APCu is available on your host server, you can configure this plugin to use it. It reduces the typical cache lookup time to one-fifth or less of the SQLite lookup time, which is itself a few tens of microseconds. Performance counts, especially on busy web sites. Please look at Installation to learn how to configure this plugin to use APCu. The plugin works fast without it, and faster with it. WP-CLI: Even if APCu is in use, caching with SQLite is necessary when your web site uses WP-CLI, because WP-CLI programs do not have access to the APCu cache. This plugin writes all cached data both to APCu and to SQLite and makes sure the two are synchronized. WP-CLI You can control this plugin via WP-CLI once you activate it. Please type this command into your shell for details. wp help sqlite-object-cache Credits Thanks to Till Krüss. His Redis Object Cache plugin serves as a model for this one. And thanks to Ari Stathopoulos and Jonny Harris for reviewing this. Props to Matt Jones for finding and fixing a bug that appeared on a heavily loaded system. Thanks to Massimo Villa for testing help, and to nickchomey for a comprehensive code review. All defects are, of course, entirely the author’s responsibility. And thanks to Jetbrains for the use of their software development tools, especially PhpStorm. It’s hard to imagine how a plugin like this one could be developed without PhpStorm’s tools for exploring epic code bases like WordPress’s. How can I learn more about making my WordPress site more efficient? We offer several plugins to help with your site’s database efficiency. You can read about them here.