Better Resource Hints vs SpinupWP

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!

This plugin ensures that the SpinupWP page cache is cleared when your site’s content changes. Not using SpinupWP yet? Sign up here. SpinupWP is a modern server control panel that’s here to help you implement best practices for every server you spin up. Designed for WordPress. This companion plugin should be installed on sites created using SpinupWP to allow the page cache to be cleared when your site’s content changes. Not using SpinupWP yet? Sign up here. Any Provider We support DigitalOcean, Linode, AWS, and any other provider. If your server has an IP address, you can connect SpinupWP. It does need to be a fresh install of Ubuntu though. Latest & Greatest Software SpinupWP will install the latest stable versions of Nginx, PHP, MySQL/MariaDB, and Redis from the standard apt-get repos. No who-knows-what-they-did custom builds of packages. Disconnect from SpinupWP in the future and you can still keep your packages up-to-date with apt-get upgrade. Automatic Security Updates SpinupWP will configure your server to install security updates as soon as they are available to reduce the likelihood of a software vulnerability putting your server at risk. Free SSL/TLS Certificates Serving your site over HTTPS is essential these days, not only for security, but to take advantage of the performance improvements of HTTP/2 as well. When you add a site to SpinupWP, a free Let’s Encrypt SSL/TLS certificate will be acquired, installed, and configured for your site. And SpinupWP will handle certificate renewals as well, so you hardly need to think about certificates. Cache All the Things One of the keys to a great performing WordPress site is caching. All sites are set up with Redis object caching to greatly reduce database requests. And with the check of a box you can enable full-page caching to serve pages lightning fast without even hitting PHP. Git Push-to-Deploy Developers! Developers! Developers! Add a git repository to your SpinupWP site and simply push to master to deploy your code. GitHub, Bitbucket, or a custom git repo will work. You can also configure a build script to run some tasks on the server after deployment is complete. Error Logs WordPress doesn’t enable error logging by default. Probably because the log is saved to a publicly accessible directory and can quickly balloon to take up a lot of hard drive space. SpinupWP enables error logs by default but stores them in a safe place and makes sure they’re rotated regularly like other server logs. Security Security Security Each server provisioned by SpinupWP is security-hardened from the word go. SSH login is disabled for the root user (you login with your user and use sudo instead). The firewall only allows connections to Nginx and SSH and failed attempts are monitored and blocked when the reach a threshold. Nginx is configured to defend against XSS, clickjacking, MIME sniffing, and other attacks. Software security updates are installed automatically. Scheduled Posts Published on Schedule For every site you add via SpinupWP, a server-side cron job will be configured to make sure that your WordPress site’s cron is executed every minute, as it should be. WP-CLI Preloaded If you love WP-CLI (we do! ❤) you’ll be very pleased to find it available on the command line the first time you login to your server. Security Isolation for Sites For each site that you add to your server via SpinupWP, a new system user is created for that site. All site files are owned by the site user and a PHP-FPM pool is configured to run as that user as well. Each site only has access to its files and so if only one site has a security vulnerability and gets infected with malware for example, only the files for that one site can be infected. SFTP Access for Your Clients If you’re hosting a site for someone else, you can easily give them SFTP/SSH access to just that site. And because of the security isolation between sites, they will only have access to files for that site. Professional Guidance & Best Practices SpinupWP will actively point you in the right direction and offer suggestions for maintaining your server. And because it provides detailed feedback about the operations it runs on your server, you can learn what is happening with your server. New release of Ubuntu just came out, should I upgrade? We’ll add a notice to the app about that, why we don’t recommend upgrading your existing servers, and how you can spin up a new server with the new release of Ubuntu and migrate your sites to that server instead. Should I install Varnish to improve page caching performance? We’ve benchmarked Varnish and Nginx FastCGI Cache performed better. Varnish would add complexity too, so one less moving part is another reason. Much of the time SpinupWP will suggest things that you may not have even thought of. Email deliverability for example. SpinupWP will strongly encourage you to configure an email sending plugin for the best email deliverability. SpinupWP’s guidance is especially helpful for those new to managing a server, but can also help those who’ve been at it a while, providing transparency to our decisions. Scheduled Backups of Site Files & Database All server providers (DigitalOcean, Linode, etc) offer automated backups of your entire server for a fee. These services are great and we highly recommend having backups of your whole server. But what happens if some media or data was deleted by accident from your WordPress site? You’re not going to restore your entire server just to get that data back. That’s where site backups come in. Site backups are full backups of your site files (media, themes, and plugins) and database. They allow you to easily restore a single site or just some files or data from a single site. With SpinupWP’s site backups, you choose your preferred provider to stash your backups whether that’s Amazon S3, DigitalOcean Spaces, or Google Cloud Storage. You plug in your account details and SpinupWP will send your site backups there in an easy-to-see format. Teamwork Makes the Dream Work Create a new team account, invite a member of your team, and allow them to spin up their own servers. Or just only allow them to add sites, the permissions you give them is up to you. Features Page cache purging Persistent object caching Ensures debug.log files aren’t saved in a publicly-accessible location