Improve existing manga reader website by scraping and modifying the DOM with nodejs

I stumble across a manga reader website called, while reading manga on it, I experience a minor buggy user experience. for example, when I open the website, it loads all the images simultaneously and not displayed sequentially.

Since the images are not loaded sequentially.. the 30th page can be loaded first then the first page loaded at the end. based on this problem I decided to make a clone of this website.

My approach is to scrape the HTML using HTTP request, modify the HTML by adding native browser lazy loading image, and serve the modified HTML to the client (browser). stack I use are nodejs, express & Axios

TL;DR compare improved manga reader vs original

Scraping the page using Axios

Modifying HTML DOM using regex

you can use a dom parser like cheerio in node js, but it’s overkill for a small project like this, as you can see in the image above. I made 4 changes to the DOM.

.replace(/<img/g, "<img loading=\"lazy\" width=\"1600\" height=\"1124\"")

for appending to all tag, you must notice that will not work unless you set the and , by adding this attribute the browser will load images inside your browser viewport.

.replace(/href\=\"\/css/g, 'href="').replace(/src\=\"\/js/g, 'href="')

replacing all tag attributes containing and from to .

you can check the demo and source code here: source demo

I also add Redis caching to the app, I’ll write about it in the next post.

Full-stack developer, Coding Instructor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store