File Size & SEO

Uploading huge files to your website means that fewer people will see it.

Three is a good number to think of for the web. THREE seconds and they’re gone. If they haven’t found your product in THREE clicks, they’ll go somewhere else.

Audio Interview “How Much Space Does My Website Need?”

How Much Space Does My Website Need?

Australian Centre of Learned Academies and file size
One of the many layouts we did for the ACOLA website. ACOLA website today
The ACOLA (Australian Centre of Learned Academies) website is a big(ish) website. The site itself is a couple of gigabytes sitting on the server. That’s pretty big compared to the website I first built on a floppy drive back in 1999.

The (big?) ACOLA website

The ACOLA website is a respository of hundreds of academic papers and Government-commissioned white papers. When ACOLA released the new report The effective and ethical development of artificial intelligence: An opportunity to improve our wellbeing, the site went down during the night. I got a call and had to rush to a laptop. I increased bandwith from an already pretty healthy 10Gb to 20Gb. “That should do it,” thought I.

It went down again less than a day later. Why?
Because of …

Bandwidth

In computing, bandwidth is the maximum rate of data transfer across a given path.
(Wikipedia)

When a website goes down, it’s most likely because of an increased demand on the server (or possibly a hacker). One large document (like the 8Mb ACOLA paper) downloaded by hundreds of people simultaneously (100 people means 800Mb) will quickly gobble up a server’s allocated bandwidth.

I ended up increasing the allocated bandwidth of the ACOLA site to 30Gb.

Large PDF files

It’s a good idea to optimise PDF files for displaying in a browser. If you are using MS Word and you hit “Save PDF for print,” the filesize might be a few megabytes. Saving for web will create a more efficient file.

File Size & Photos

When clients send me photographs to upload, I suggest they save them at 1,200 pixels wide (height is rarely an issue on the web as most images are wider than tehy ar high). 1,200 is a good width for any image today. And an optimised version of a 1,200 pixel wide image (at 16:9 ratio) can be less than 400Kb.

The 25Mb images taken with your modern camera could be 10,000 pixels wide. More obviously, one image will be a 25Mb file. One hundred people simultaneously downloading that one image will be asking the server for 2.5Gb.

There’s a lot to know

(says Phil in the Podcast above)

In WordPress, large image sizes can be thwarted by plugins. The two I’ve seen used effectively by clients are

For hand-coded webites, I sometimes use GT Metrix – a website speed and performance optimising utility. Punch your website address into that puppy and it will tell you how to tune up your site.

Files Size Type – A Rough Guide
From largest to smallest files.

  1. High resoltion video streaming directly from the server
  2. Video off Youtube (because YT does a ot of on-the-fly optimisation)
  3. Large mp3 sound files (like the podcast above)
  4. High resolution photos
  5. Low resolution photos
  6. Small audio files
  7. Small images
  8. Text
  9. Code

File Size in General Computing Terms

  • 1 kilobyte or KB = 1,000 Bytes
  • 1 megabyte or MB = 1,000 KB = 1,000,000 Bytes
  • 1 gigabyte or GB = 1,000 MB = 1,000,000 KB = 1,000,000,000,000 Bytes
  • 1 terabyte or TB = 1,000 GB = 1,000,000 MB = 1,000,000,000,000 KB = 1,000,000,000,000,000 Bytes

I think I have those written correctly.

Once you have mastered shrinking all the image and document files on your website that aren’t “code” – you can then look at …

Code

WordPress & Other Content Management Systems (CMS)

WordPress weighs in at around 30Mb. When you consider the aim of a web developer is to get the HTML and CSS file size down to roughly 5kb, that’s a lot!

Content Management Systems (CMS) are doing a lot of work. After all, they are writing code for non-coders.

In some cases, there is code writing code writing code. And if you are using one of WordPress’ many Page Builder plugins (I’m talking about you Elementor and you WP Bakery Composer and – although to a lesser extent becauseI like you – you too, Divi) – you are adding yet another layer to the code upon code upon code merry-go-round.

While page builders have been building profitable businesses, WordPress itself has moved on. It now has its own built-in page builder (Gutenberg) and there’s really no need to rely on cumbersome “licensed” builders – which are now writing code upon code.

NB: Elementor is nuts. It completely ignores WordPress and took me days to master while working on a new clients’ SEO! Very counter-intuitive.

Sometimes it’s actually quicker to learn underlying HTML and CSS markup from scratch.
Two places I go to for learning are:

NB: There’s no point in getting a formal education in this sort of stuff. By the time they write the unit outline, things have moved on. In one class I taught at curtin University, the Design school had purchased computer licenses for Macromedia Fireworks – which Macromedia itself actually shut down before the course had even started.

So. Teach yourself. I bought my Sitepoint Lifetime Membership for about $100 in a Black Friday Sale.

WordPress, Drupal and Joomla are the most popular CMS’ today with WordPress powering around 30% of the web.

But if you have the time, stave off early onset Alzheimer’s and learn a bit of code. Avoid the CMS/Page Builder bloat and run SEO rings around your competitors.

Very Tiny CSS Frameworks

Web Design has become so complex, there’s no need to code line by line by line (like I did for the Education Department website back in 1997).

These days, real web developers use libraries. Frameworks are basically code libraries.

Code libraries range in size from large to very small. Bootstrap 4 weighs in at a few hundred Kb – a far cry from WordPress’ 30Mb footprint. Not only that but you can save space by only downloading the elements you need (e.g. sliders, call-to-action boxes, pricing tables, staff display boxes, animated ding-dongs etc. etc. etc.).

I’m get bored thinking about all those useless bells and whistles. Give me good content – puleeeease.

The documentation for these various frameworks is also easy to understand.

Last Note on File Size & Site Speed

Remember this: Three seconds, Three clicks?

One large camera image can slow down your site. Five seconds is a good loading time, but small sites with small file size written with tiny code bases (like min.css) and optimised images will load fast. And Fast means a lot if your competitor’s sites are taking longer than 10 seconds to load.

If someone is using WordPress (30% of people are) and you are using a slim framework 9or at least lean code) you will beat them in terms of site speed. While very important, it does mean that your website is written in code (and has no CMS). And this might mean you have to go through your web agency to update the site.

Why not try us?

Other places of note

When you think of Netflix and how slow Apple TV is in comparison, I think you’ll agree …

Efficient compression algorithms have changed our way of life.
(Edwin)