It would be shame if a performance tester’s blog’s response time is poor. That is why I always keep an eye on how to improve my page’s response time and try to keep within couple seconds. Recently I stumbled upon a WordPress plugin called Flying Pages which helps to preload the pages before the user clicks.
Table of Contents
What is Preload?
Preload tells the browser to download the content (e.g. image, script, css etc) regardless whether it is required or not. E.g. check the below code which has the attribute called rel with the value preload and href with the value myimage.png.
<link rel="preload" href="myimage.png" as="image"/>
When the browser renders the page, if the attribute value has preload, then the respective element will be get stored temporarily in the browser.
Once the user needs it, it will fetch it quickly and displays it in the browser.
Why Flying Pages?
There are multiple ways you can implement preload in your application. My blog is built on WordPress Content Management System. It would be easy and quick if I leverage a plugin to implement the preload.
Flying Pages is relatively new in the game. But it stands out from the other plugins such as Instant Page or Quick Link. We will see it in a moment in details.
How it works?
If you a WordPress website, you can install the plugin from https://wordpress.org/plugins/flying-pages/
After you installed and activated (I prefer staging environment), you can go to its settings under Settings > Flying Pages in your WordPress admin.
It will inject gzipped tiny JavaScript code after the browsers is idle, then it will detects the pages in the view port (i.e. visible section of the web page), and on mouse-hover, then preloads them.
You can configure the settings for: when to preload and max requests per second as shown below.
It is recommended to set 0 delay to start preloading in the view port, so that it preloads the resources in the view port immediately.
To avoid server loading, you can customize the Max requests per second. This feature is helpful to avoid server crashes. If the server is busy, it will stop preloading.
Also, you can set the delay for the mouse hover and you can black list certain keywords to avoid the preloading.
Conclusion
It is best to preload the resources for the users’ best experience. It will help the browser to load the pages instantly and navigation will be smooth and quick.