What Is a CDN, and Why Are Your Photos Slow Without One?

Slow on a phone but smooth on a laptop is the first clue

Pay attention to the order that appears on the screen when the page is opened on a mobile phone with a mediocre signal. If the text comes out almost instantly and then the photos follow slowly one by one, some of which are still gray when you've finished reading, the problem lies with the images.

If the entire page freezes for a moment and then appears all at once, it's a different story and the cause lies elsewhere, for example, in the server or in the script that the browser needs to run before anything can be displayed.

The office laptop hides this symptom because two things are happening simultaneously there. The connection is much faster, and the same files are already stored in your browser since the previous visit. What you see every morning is the seventeenth visit, while your potential customers always come as the first visit.

The most common cause isn't server distance, it's photo size

Photos taken from today's mobile phone cameras have a width of several thousand pixels and a size of several megabits per sheet. That size makes sense for printing. To be displayed in a photo column as wide as a mobile phone screen, only a small part of it is needed.

The problem is only felt when there are many of them. One catalog page containing dozens of photos uploaded as is can request tens of megabits before the page is complete. On office WiFi, it passes in an instant. On cellular data that is sharing signals with the entire highway, it's the seconds spent by visitors staring at a blank box.

CDN does not reduce one megabit from that number. What it changes is where the file is sent from, and heavy photos sent from the nearest location are still heavy photos.

A CDN is copies of your files kept in many locations

Without a CDN, all your website files are stored on one computer in one physical location, namely the hosting you rent. Anyone who opens your address, from any city, retrieves files from that computer. If the difference between domain and hosting is still unclear, we explain that part separately in the article about domain, hosting, and SSL.

CDN, short for content delivery network, stores copies of files that rarely change on many servers scattered geographically. What is usually stored are images, fonts, and CSS and JavaScript files. When someone opens your website, the copy is sent from the point closest to them.

The analogy is like this. So far, every order has been shipped from one central warehouse, so buyers in distant cities wait longer than buyers near the warehouse. CDN stores the same stock in branch warehouses. The goods remain the same, only the journey is shorter.

From this, it can be seen when it helps. The distance difference is only noticeable if your visitors are indeed far from the server. If all your buyers are in one city and the photos are heavy, what you shorten is actually the part of the journey that contributes the least to the slowness.

Shrink your photos and change their format first; the CDN comes after

There are three tasks whose results are much greater than moving files to a CDN, and all three are done once at the beginning.

• Cut their size to the width that is actually used. Photos that appear as wide as a mobile phone screen do not need to be several thousand pixels wide. The excess pixels are still sent over the network, then discarded by the browser when rendering them.
• Change the format. JPG and PNG from cameras or designers are still in old formats. WebP and AVIF produce much smaller files with a display that is hard to distinguish with the naked eye. The sites we build use Next.js with these two formats enabled, so browsers that support them receive the lighter version without you doing anything.
• Delay loading photos that are not yet visible. Images at the bottom of the page can be delayed until the visitor scrolls down, so that only what is visible on the screen competes in the first few seconds.

After these three things are done, CDN can add something that is noticeable. The order cannot be reversed. Installing CDN on top of photos that have not been resized will make you conclude that CDN is useless, when in fact the only mistake is the order of the work.

The second visit feels fast because of caching, and that's a different job

The browser stores files that have been downloaded before so they don't need to be retrieved again on subsequent visits. How long this storage is considered fresh is determined by the instructions sent by the server along with the file.

On this site, image assets are sent with a cache instruction of thirty days. Returning visitors within a month do not re-download the same photos, and their pages appear almost instantly. This number is intentionally not set to a year, so that images you replace with the same file name do not get stuck on old visitors' phones for a long time.

This is also the reason why your own assessment of your website's speed is almost always too good. You already have all the files. To assess fairly, open your website in an incognito window or on a phone that has never opened it before, and use mobile data.

Two free checks that show where the problem is

First, use your eyes. Open your website on your mobile phone with mobile data, through an incognito window. See what appears first and what is left behind. If the text appears first and then the photos follow slowly, it means the images are heavy. If everything is stationary together and then appears simultaneously, it means the cause is outside the image.

Second, use tools. Open Google's PageSpeed Insights, enter your website's address, and select the mobile tab. What you need to read is the suggestions section at the bottom, not the large numbers. Suggestions that say "properly size images", "serve images in next-gen formats", or "efficiently encode images" are the tool's acknowledgment that the photos are indeed too large.

If you want the most straightforward evidence, right-click on one of the photos on your website, save it to your computer, and then look at its file size. A photo that appears on the page and is still in megabytes has already answered your question without any tools.

A website with only a few photos often doesn't need a CDN at all

Your small business website contains a profile, list of services, prices, and a WhatsApp button, with a weight dominated by text. A page like that, if built as a static page that is already complete before visitors arrive, is already light without any additions.

The signs change when the visual content increases. A product catalog with dozens of photos, a growing gallery of work, a photographer's or interior designer's portfolio page, or a website with visitors coming from many cities and abroad. In that case, images have become the largest part of your page's weight, and shortening the distance to send them makes a noticeable difference.

There is one more advantage that is rarely mentioned. Photos served from a CDN stop burdening your hosting every time someone opens a page, so a surge in visitors after a busy post doesn't immediately slow down your entire website.

In our packages a CDN starts with Business; Starter doesn't use one yet

Starter Rp 1.500.000 includes a static Next.js website. Its pages are already made before visitors arrive, its images are served in WebP and AVIF formats, and its files are included in the hosting for a year. For a website containing a profile, services, prices, and contact information, this is sufficient and lightweight.

Business Rp 5.000.000 moves your photos and visuals to Cloudflare Storage with a CDN. This package also includes a blog and a photo or product gallery, and these two things make the CDN worthwhile, because the visual content is constantly increasing. During the one-month support period, you can request additions and replacements of images through us without needing an admin panel.

Before deciding to upgrade your package, first do the two-step check. If the suggestions from PageSpeed Insights are about image size and format, reducing your image sizes yourself can already improve most of it without incurring costs. If your photos are already lightweight and your gallery pages are still heavy due to the large number of images, then a CDN becomes a worthwhile expense. You can read the contents of both packages side by side on the pricing page.