Resolving Slow News List Page Performance Caused by Base64 Image Storage

Problem Review – After importing client‑provided news data via an SQL script, the front‑end news list page loaded extremely slowly, taking about 16 seconds for a 7.1 MB response.

Problem Location – Chrome DevTools revealed that the getManageArticleList API returned a large payload (7.1 MB) and took 16 seconds, while the same API with a different query returned only 367 KB in 4.5 seconds.

Root Cause – The slowdown was traced to base64‑encoded images embedded in the contentText field; each image was roughly 1 MB, and a single page loaded about 10 such images (≈7 MB total).

SQL Issue – The pagination query unnecessarily selected the contentText column, pulling the large base64 strings into every result set.

select ..., contentText from article

Solution

1. Use a LIKE query to locate records containing base64 image data:

select id, title, contentText from article where contentText like '%data:image%'

2. For each affected article, download the images, upload them to a FastDFS distributed file server, and replace the src attribute in the img tags with the new URL, e.g.:

group1/M00/00/00/rBIK6VcaP0aARXDSNFHrUgHEviQ663.jpg

This process handled about 10 articles (≈20 minutes) and resolved the performance issue.

Base64 Encoding Principle – Base64 converts binary image data into a text string, allowing the image to be embedded directly in HTML without a separate file, but at the cost of large payloads.

Conclusion – The case illustrates that performance problems often stem from obvious data‑size issues; careful inspection of API responses and SQL queries can uncover hidden inefficiencies, and moving large binary data to a proper file server restores normal page speed.