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!
Image Optimization – Compress Images and Convert to WebP or AVIF
Image Optimization (formally known as Image Optimizer) is an easy-to-use WordPress plugin that reduces image size through various compression and resizing techniques – all of which preserve the highest possible image quality. Image Optimization supports many popular formats, including JPEG, PNG, WebP, AVIF, and GIF. Reduced file sizes for boosted performance Image Optimization ensures faster loading times, enhanced user experience, and overall boosted website performance. It reduces the size of your website’s images, improving Core Web Vitals and search engine rankings. With the Image Optimization’s exceptional capabilities and unique algorithms, you can fine tune images and reduce their file sizes while retaining quality with lossless or lossy compression. Features Image formats supported include JPEG, PNG, WebP, AVIF and GIF. Works in the background: The only plugin in the category that optimizes your images in the background, without you having to stay on the page during optimization. Resize large images: The user can set a maximum pixel width, after which images will automatically be resized. (default value set to 1920px) 2 compression levels: Lossless – highest quality with minimal compression; Lossy – maximum compression with somewhat reduced quality. Optimize on upload: Automatically optimizes images when you upload them. Bulk or individual optimization: Flexible image optimization options, whether it’s on-demand scaling and compression, or bulk optimization for your entire image library. EXIF Metadata: Select whether to clear image metadata to reduce size even further without impacting image quality. Backup original images: Ability to delete backups permanently to save space. (We recommend backing up your website beforehand.) Restore original images (all sizes) for selected media files if needed. Convert to WebP and AVIF: Get efficient and faster-loading formats with WebP and AVIF for even better web performance. Image thumbnails: Resize all image sizes by default. Allow the user to choose specific image sizes based on WordPress-registered thumbnail sizes. Bulk or single image optimization Image Optimization by Elementor lets you optimize all images in your library either one at a time, or in a batch according to your preferences and settings. Easily configure the plugin to scale or compress your images on-demand, or automatically have them triggered as they are being uploaded. Or, if you have a large number of images already uploaded, the bulk optimization feature allows you to resize and/or compress your entire library of existing images in just a few clicks. Two Compression Levels With Image Optimization’s advanced algorithms, you can compress images and reduce their file size at the level that makes the most sense for you. We offer 2 types of compression for processing images giving you the perfect balance of compression and quality. Lossless Compression: Lossless compression reduces image file sizes without sacrificing or diminishing the quality of your images. This type of compression reduces file sizes by removing unused or unnecessary data so that no image details are lost along the way. Hence, you are able to reduce the file size and still maintain the quality of your image. Lossy Compression: Lossy compression performs maximum compression resulting in lightweight images and smaller file sizes. It reduces image size by removing image data that is generally invisible to the human eye and minimizes any compromise in image quality. Convert to WebP and AVIF: Convert images to the slimmer WebP or AVIF formats for even better optimization with a 25-30% savings over JPEG and PNG. Most browsers support WebP, however if they don’t, you can have fallback versions of the image available in the same format as the original image. By tailoring compression to the level you need, your visitors will enjoy faster load times, improved responsiveness, and a seamless browsing experience. Our approach also enables your website to rank higher in search results. Since a search engine’s ranking is heavily influenced by speed, user experience, and Core Web Vitals, Elementor’s Image Optimization is an invaluable tool for any website, especially one that’s abundant with images. Get started today For more information about Image Optimization, visit our official website or Try It Now. If you have any questions or need support, feel free to contact us or visit our help center. This plugin requires a connection to an active Elementor account in order to identify the user and provide the purchased service. This connection is triggered manually by the user via the plugin’s settings panel. This plugin uses a 3rd party service operated by Elementor, which accepts a standard image in JPG, PNG, GIF or WEBP format and returns a web optimized image based on the selected settings. This flow is triggered by the user or automatically (based on the selected plugin settings) on a compatible image upload or by manually initiating optimize process. Related Plugins Email Deliverability: Effortlessly manage transactional emails. High deliverability, logs and statistics, and no SMTP plugins needed.
