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!
Index WP MySQL For Speed
How do I use this plugin? After you install and activate this plugin, visit the Index MySQL Tool under the Tools menu. From there you can press the Add Keys Now button. If you have large tables, use it with WP-CLI instead to avoid timeouts. See the WP-CLI section to learn more. What does it do for my site? This plugin works to make your MySQL database work more efficiently by adding high-performance keys to the tables you choose. On request it monitors your site’s use of your MySQL database to detect which database operations are slowest. It is most useful for large sites: sites with many users, posts, pages, and / or products. You can use it to restore WordPress’s default keys if need be. What is this all about? Where does WordPress store all that stuff that makes your site great? Where are your pages, posts, products, media, users, custom fields, metadata, and all your valuable content? All that data is in the MySQL relational database management system. (Many hosting providers and servers use the MariaDB fork of the MySQL software; it works exactly the same way as MySQL itself.) As your site grows, your MySQL tables grow. Giant tables can make your page loads slow down, frustrate your users, and even hurt your search-engine rankings. And, bulk imports can take absurd amounts of time. What can you do about this? You can install and use a database cleaner plugin to get rid of old unwanted data and reorganize your tables. That makes them smaller, and therefore faster. That is a good and necessary task. That is not the task of this plugin. You can, if your hosting provider supports it, install and use a Persistent Object Cache plugin to reduce traffic to your database. That is not the task of this plugin either. This plugin adds database keys (also called indexes) to your MySQL tables to make it easier for WordPress to find the information it needs. All relational database management systems store your information in long-lived tables. For example, WordPress stores your posts and other content in a table called wp_posts, and custom post fields in another table called wp_postmeta. A successful site can have thousands of posts and hundreds of thousands of custom post fields. MySQL has two jobs: Keep all that data organized. Find the data it needs quickly. To do its second job, MySQL uses database keys. Each table has one or more keys. For example, wp_posts has a key to let it quickly find posts when you know the author. Without its post_author key MySQL would have to scan every one of your posts looking for matches to the author you want. Our users know what that looks like: slow. With the key, MySQL can jump right to the matching posts. In a new WordPress site with a couple of users and a dozen posts, the keys don’t matter very much. As the site grows the keys start to matter, a lot. Database management systems are designed to have their keys updated, adjusted, and tweaked as their tables grow. They’re designed to allow the keys to evolve without changing the content of the underlying tables. In organizations with large databases adding, dropping, or altering keys doesn’t change the underlying data. It is a routine maintenance task in many data centers. If changing keys caused databases to lose data, the MySQL and MariaDB developers would hear howling not just from you and me, but from many heavyweight users. (You should still back up your WordPress instance of course.) Better keys allow WordPress’s code to run faster without any code changes. Experience with large sites shows that many MySQL slowdowns can be improved by better keys. Code is poetry, data is treasure, and database keys are grease that makes code and data work together smoothly. Which tables does the plugin add keys to? This plugin adds and updates keys in these WordPress and WooCommerce tables. wp_comments wp_commentmeta wp_posts wp_postmeta wp_termmeta wp_users wp_usermeta wp_options wp_wc_orders_meta wp_woocommerce_order_itemmeta wp_automatewoo_log_meta You only need run this plugin once to get its benefits. How can I monitor my database’s operation? On the Index MySQL page (from your Tools menu on your dashboard), you will find the “Monitor Database Operations” tab. Use it to request monitoring for a number of minutes you choose. You can monitor either the site (your user-visible pages) or the dashboard, or both. all pageviews, or a random sample. (Random samples are useful on very busy sites to reduce monitoring overhead.) Once you have gathered monitoring information, you can view the captured queries, and sort them by how long they take. Or you can save the monitor information to a file and show it to somebody who knows about database operations. Or you can upload the monitor to the plugin’s servers so the authors can look at it. It’s a good idea to monitor for a five-minute interval at a time of day when your site is busy. Once you’ve completed a monitor, you can examine it to determine which database operations are slowing you down the most. Please consider uploading your saved monitors to the plugin’s servers. It’s how we learn from your experience to keep improving. Push the Upload button on the monitor’s tab. WP-CLI command line operation This plugin supports WP-CLI. When your tables are large this is the best way to add the high-performance keys: it doesn’t time out. Give the command wp help index-mysql for details. A few examples: wp index-mysql status shows the current status of high-performance keys. wp index-mysql enable --all adds the high-performance keys to all tables that don’t have them. wp index-mysql enable wp_postmeta adds the high-performance keys to the postmeta table. wp index-mysql disable --all removes the high-performance keys from all tables that have them, restoring WordPress’s default keys. wp index-mysql enable --all --dryrun writes out the SQL statements necessary to add the high-performance keys to all tables, but does not run them. wp index-mysql enable --all --dryrun | wp db query writes out the SQL statements and pipes them to wp db to run them. Note: avoid saving the –dryrun output statements to run later. The plugin generates them to match the current state of your tables. Why use this plugin? Three reasons (maybe four): to save carbon footprint. to save carbon footprint. to save carbon footprint. to save people time. Seriously, the microwatt hours of electricity saved by faster web site technologies add up fast, especially at WordPress’s global scale. 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. Credits Michael Uno for Admin Page Framework. Marco Cesarato for LiteSQLParser. Allan Jardine for Datatables.net. Leho Kraav and Sebastian Sommer for suggesting the WooCommerce tables. Japreet Sethi for advice, and for testing on his large installation. Rick James for everything. Jetbrains for their IDE tools, especially PhpStorm. It’s hard to imagine trying to navigate an epic code base without their tools.
