- Joined
- Mar 21, 2018
- Messages
- 2
MangaDex can't be a lightweight website, being image-heavy, but looking at the network traffic there's a few thing I'd like to suggest to speed up loading and reduce server load.
Keep in mind that the home page loads more about 3MB of data, with about 180 network requests. Now, in no particular order:
- use css image-slicing for the country flags, would remove ~40 requests (-22%)
- use vector social icons (e.g., https://github.com/edent/SuperTinyIcons), -18KB, -5 req if bundled in a single SVG file
- drop the "Ubuntu" custom font and rely on system fonts (-700KB (-23%) for cold-cache users)
- alternatively, don't serve .ttf files, but switch to .woff2 and reduce the set of included characters —will reduce the font files size
- only load chart.js on pages where it is actually used, -50KB
- minify and bundle all javascript in a single file, -9 req
- bundle all css in a single file, -7 req
- depending on your back end, it would be worth passing at least the image covers through something like jpegoptim, to reduce their size; that will easily get a 10-20% reduction in size.
Keep in mind that the home page loads more about 3MB of data, with about 180 network requests. Now, in no particular order:
- use css image-slicing for the country flags, would remove ~40 requests (-22%)
- use vector social icons (e.g., https://github.com/edent/SuperTinyIcons), -18KB, -5 req if bundled in a single SVG file
- drop the "Ubuntu" custom font and rely on system fonts (-700KB (-23%) for cold-cache users)
- alternatively, don't serve .ttf files, but switch to .woff2 and reduce the set of included characters —will reduce the font files size
- only load chart.js on pages where it is actually used, -50KB
- minify and bundle all javascript in a single file, -9 req
- bundle all css in a single file, -7 req
- depending on your back end, it would be worth passing at least the image covers through something like jpegoptim, to reduce their size; that will easily get a 10-20% reduction in size.