1. Summary
I couldn’t find, how I can make that Wildfire comments plugin was load lazy.
2. Limitations
Solution must work for any static (HTML/CSS/JavaScript solely) site.
3. Problems
For preventing XY problem.
- I place Wildfire comments to the end of my articles on my site. I want that Wildfire was load, when a visitor of my site read my articles to the end. No need to Wildfire to load immediately when the page loads.
- Wildfire makes some requests that sometimes they can significantly slow down the page loading. It’s bad. For example, 53% of mobile website visitors will leave if a webpage doesn’t load within three seconds.
4. MCVE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wildfire lazy loading</title>
<script src="KiraWildfire.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/wildfire/dist/wildfire.auto.js" defer></script>
<style>
body {
background: sienna;
font-size: 7rem;
}
.wildfire_thread {
padding-top: 500rem;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Tempora accusamus officia aspernatur iusto numquam facilis quia dolorum, temporibus, nemo fugiat sunt illum veniam reprehenderit laudantium libero quas repellat mollitia eligendi.
Modi veniam, vero facilis esse totam aut, praesentium voluptatum maxime, nulla sunt repudiandae voluptatibus, sed deleniti consequuntur obcaecati dolorem nostrum quo? Molestias eligendi iusto ut aliquid! Obcaecati suscipit dolorum iste.
Distinctio iusto delectus excepturi impedit vel at fugiat, tempore ratione qui nostrum perspiciatis mollitia. Vero, labore rerum ipsa aspernatur quos repellendus porro quo repellat, libero itaque maiores ut, eligendi impedit.
Dolore, eos maiores nesciunt, voluptatem est reprehenderit doloremque earum laudantium. Facilis architecto accusantium iste repudiandae debitis officia corrupti, necessitatibus nobis? Ut in accusantium inventore obcaecati aperiam delectus cupiditate tempora magnam?
Corrupti molestiae possimus quidem non nihil earum quaerat, accusantium vero sed fuga alias error ducimus dignissimos. Numquam consequatur fugit ipsum saepe laboriosam voluptate repellat, praesentium tenetur magni hic optio cum.
Amet cupiditate deserunt fugit veritatis, vitae itaque deleniti natus et hic error vero, eligendi perferendis consectetur quasi ducimus exercitationem alias molestias, magni quod ea, blanditiis. Voluptas culpa reiciendis obcaecati exercitationem.
Corrupti aliquid dolores cupiditate accusantium voluptatum, fugit quae beatae, illum incidunt impedit nisi? A, modi. Veritatis officia amet doloribus eius itaque numquam aspernatur adipisci ex perferendis distinctio neque incidunt, veniam?</div>
<div class="wildfire_thread"></div>
</body>
</html>
KiraWildfire.js:
var wildfireConfig;
wildfireConfig = function() {
return {
databaseProvider: "firebase",
databaseConfig: {
apiKey: "my real API key here",
authDomain: "kirawildfirefirebase.firebaseapp.com",
databaseURL: "https://kirawildfirefirebase.firebaseio.com",
projectId: "kirawildfirefirebase",
storageBucket: "kirawildfirefirebase.appspot.com",
messagingSenderId: "my real sender ID here"
},
theme: "dark",
locale: "en"
};
};
Wildfire successfully works for me, but it loads immediately when the page loads. It would be nice if Wildfire loaded when the page user scrolls to the end of the page.
5. Not helped
5.1. JQuery Lazy
I tried JS/Script loader from JQuery Lazy plugin for lazy loading.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wildfire lazy loading</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/latest/jquery.lazy.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/latest/jquery.lazy.plugins.min.js" defer></script>
<script src="KiraLazy.js" defer></script>
<style>
body {
background: sienna;
font-size: 7rem;
}
.wildfire_thread {
padding-top: 500rem;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Tempora accusamus officia aspernatur iusto numquam facilis quia dolorum, temporibus, nemo fugiat sunt illum veniam reprehenderit laudantium libero quas repellat mollitia eligendi.
Modi veniam, vero facilis esse totam aut, praesentium voluptatum maxime, nulla sunt repudiandae voluptatibus, sed deleniti consequuntur obcaecati dolorem nostrum quo? Molestias eligendi iusto ut aliquid! Obcaecati suscipit dolorum iste.
Distinctio iusto delectus excepturi impedit vel at fugiat, tempore ratione qui nostrum perspiciatis mollitia. Vero, labore rerum ipsa aspernatur quos repellendus porro quo repellat, libero itaque maiores ut, eligendi impedit.
Dolore, eos maiores nesciunt, voluptatem est reprehenderit doloremque earum laudantium. Facilis architecto accusantium iste repudiandae debitis officia corrupti, necessitatibus nobis? Ut in accusantium inventore obcaecati aperiam delectus cupiditate tempora magnam?
Corrupti molestiae possimus quidem non nihil earum quaerat, accusantium vero sed fuga alias error ducimus dignissimos. Numquam consequatur fugit ipsum saepe laboriosam voluptate repellat, praesentium tenetur magni hic optio cum.
Amet cupiditate deserunt fugit veritatis, vitae itaque deleniti natus et hic error vero, eligendi perferendis consectetur quasi ducimus exercitationem alias molestias, magni quod ea, blanditiis. Voluptas culpa reiciendis obcaecati exercitationem.
Corrupti aliquid dolores cupiditate accusantium voluptatum, fugit quae beatae, illum incidunt impedit nisi? A, modi. Veritatis officia amet doloribus eius itaque numquam aspernatur adipisci ex perferendis distinctio neque incidunt, veniam?</div>
<script data-src="KiraWildfire.js"></script>
<script data-src="https://cdn.jsdelivr.net/npm/wildfire/dist/wildfire.auto.js"></script>
<div class="wildfire_thread"></div>
</body>
</html>
KiraLazy.js:
$(function() {
$("script[data-src]").Lazy();
});
Wildfire still loads when the page loads, rather than after the user has scrolled through the page to the end.
Also, I couldn’t make this JQuery Lazy method work in my case.
5.2. Lazy loading JavaScript files
I tried to find information about my problem. For example, I found these Stack Overflow questions:
But it not helped me.
6. Don’t offer
Please, don’t tell me, that I shouldn’t use Wildfire. I was choosing between the different systems of commenting and I came to the conclusion that Wildfire is the best choice at the moment.
