How Much Website Code Is Redundant?

For a science project, I decided to work on something that I had been pondering: how much code is unnecessary and redundant in a website? This was particularly interesting to me because I had done some programming in website-oriented languages such as HTML, CSS, and JS. My cousin–a really great programmer who taught me much of what I know–said he had no idea why websites were programmed so inefficiently.

When the opportunity to choose this topic for my science project came, I immediately took it knowing that it would be a great learning experience. I started with the question “How much of a webpages code is redundant, unnecessary, and could be stripped out of a webpage without impacting the user experience?”. I began my experiment by testing three open sourced webpages on GitHub, to check out my metrics. Here is what I found in my core metrics:

Website #1 (Before)Website #2 (Before)Website #3 (Before)
Page Load Time (milliseconds)382.001,700.00523.00
Total Page Size (kilobytes)389.00834.00547.00
Requests to Server16.0024.0021.00
Scroll to the bottom of the article to see the full data tables.

I then proceeded to cut out as much code as possible, and limit my server requests. I did lots of research and learned about some techniques to improve the loading speed of a webpage. These include:

  • Reduce the amount of HTTP requests by adding external libraries to your own code. Then remove unnecessary lines of code.
  • Remove redundant CSS classes.
  • When linking to @keyframes in CSS, put all of the criteria into one line of code.
  • Avoid using too many <iFrames>.
  • Use minified JS libraries to lazyload all your <div> elements.
  • Embed JS scripts or remove them entirely if not needed.
  • Use <body> onload criteria to link to a JS function declaring all of your const variables.
  • Use CSS shorthands.
  • Use the DRY principle: do not repeat.
  • Compress images and convert to PNG.

What I discovered is there is an 80/20 to it. I found that just by compressing images, minifying all of the code (with free online tools like this one), and even adding libraries into my own code (then minifying them), I was able to reduce the amount of server requests, increase loading speed, and reduce the webpages size. As you can see below, I was able to improve my core metrics by a lot.

Website #1 (% Difference)Website #2 (% Difference)Website #2 (% Difference)Average
Page Load Time43.19%67.71%13.77%41.56%
Total Page Size37.28%88.35%44.42%56.68%
Requests to Server25.00%50.00%23.81%32.94%

I was really stunned by my results. I thought that maybe I would be able to reduce the website size by 10% or so, but it was actually 56%. I also expected to be able to reduce the amount of server requests by 20%, but it was actually about 33%. In conclusion, I hope this data and my tips about programming webpages more efficiently are useful to programmers.

Full Data

Website #1 (Before)Website #2 (Before)Website #3 (Before)
Page Load Time (milliseconds)382.001,700.00523.00
Total Page Size (kilobytes)389.00834.00547.00
Max Memory Usage (megabytes)220.00250.00210.00
Max CPU Usage1.001.001.00
Requests to Server16.0024.0021.00
TBT* (milliseconds)0.000.000.00
HTML Size (kilobytes)11.005.8113.00
CSS Size (kilobytes)53.6010.0071.80
JS Size (kilobytes)96.608.1145.50
Images Size (kilobytes)67.00697.00305.00
Fonts Size (kilobytes)160.00104.00111.00
Website #1 (After)Website #2 (After)Website #3 (After)
Page Load Time (milliseconds)217.00549.00451.00
Total Page Size (kilobytes)244.0097.20304.00
Max Memory Usage (megabytes)210.00200.00210.00
Max CPU Usage1.001.001.00
Requests to Server12.0012.0016.00
TBT* (milliseconds)0.000.000.00
HTML Size (kilobytes)14.609.8043.50
CSS Size (kilobytes)38.606.3465.30
JS Size (kilobytes)96.600.000.00
Images Size (kilobytes)24.3081.0085.90
Fonts Size (kilobytes)70.200.00111.00
Website #1 (% Difference)Website #2 (% Difference)Website #2 (% Difference)Average
Page Load Time43.19%67.71%13.77%41.56%
Total Page Size37.28%88.35%44.42%56.68%
Max Memory Usage4.55%20.00%0.00%8.18%
Max CPU Usage0.00%0.00%0.00%0.00%
Requests to Server25.00%50.00%23.81%32.94%
TBT*0000
HTML Size-32.73%-68.67%-234.62%-112.01%
CSS Size27.99%36.60%9.05%24.55%
JS Size0.00%100.00%100.00%66.67%
Images Size63.73%88.38%71.84%74.65%
Categories Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close