rogix
commented
2 weeks ago I agree. The blog page has serious performance issues. From what I can see, the main issue is the image sizes—they are huge.
Evidence:
By checking the page on PageSpeed Insights, we can see the low performance score:
Mobile:
Desktop:
By checking the loaded files on the network tab, we can identify one of the reasons:
82 MB of resources (images) is quite significant.
A few suggestions to fix the problem:
-
Use smaller image sizes from the beginning
- Many images don't need to be high resolutions. The higher the resolution, the larger the size. Low-resolution images are sufficient for most cases. There are some good websites that compress images for free.
- Most images don't need to be very large in dimensions. Many images have widths over 2000px, but on the page, they are displayed at 700px or less. Reducing dimensions of the images could remove dozens of extra MBs.
-
Use an image compression library to compress and reduce image sizes during the build process
- This is very straightforward. There are libraries that help compress images while maintaining good quality.
-
Implement pagination as suggested
- I'm not sure if all the images are downloaded at once regardless of pagination, but if they are not, implementing pagination could significantly improve performance for everyone.
I might be missing something, but I think that implementing these simple techniques could be of great help.
I would be glad to implement these improvements or discuss other alternatives if the friend @ItzNotABug hasn't already started working on this issue.
🔖 Enhancement description
The blog page has a lot of posts, all rendered on the same page, at once. For better performance, use pagination logic with something like -
🎤 Pitch
Faster image and page loads, better performance.
👀 Have you spent some time to check if this issue has been raised before?
🏢 Have you read the Code of Conduct?