Web Performance 101 - Static Content

18/04/2018

You may have heard of static content, but what difference does it really make to web performance? Let’s find out…

What Is Static Content?

Simply put, it is content (words, text or more accurately HTML content) that doesn’t change.

In reality, this means that all users (or most users) will receive that same content each time they load the page. Think about blog posts, news articles or tutorials – things that will rarely change once they’ve been published. It doesn’t mean it never changes – you can always edit the static pages and upload them again.

The opposite of static content is dynamic content. That is, content that changes each time the page is reloaded. Think about search result pages or online catalogues. There is another mechanism which can handle dynamic pages – caching… More about this in a future post…

So, what difference will it make to serve exactly the same page via a static file vs. the standard dynamic method?

Test It

This site is hosted on WordPress with an Apache webserver and a MySQL database. Every time a user requests a page, the Apache server needs to pull the data from the database, via a layer of PHP. That’s not to mention the imagery and any third party scripts. Each layer adds time to serve this request.

To test dynamic vs. static content, we’ll:

  • Use an identical webpage
  • Hosted on an identical server
  • Served via the same domain name
  • We will not alter the images, where or how they’re served.
  • We will not alter / remove any third party tags or how they’re served.

Dynamic Content

I’ll use this post which is a fairly long, image heavy post.

Static Content

I’ll save the source code of the same page as a static .html page.

Raw Values for Dynamic Page

All values in milliseconds.

Finish DOMContentLoaded Load
1230 1003 1230
1270 1003 1280
1330 1006 1330
1190 984 1190
1350 1120 1350
1240 992 1240
1190 912 1200
1170 991 1180
1270 1001 1270
1280 1006 1280

Raw Values for Static Page

All values in milliseconds.

Finish DOMContentLoaded Load
915 721 916
936 730 937
888 694 889
933 724 934
892 681 894
874 686 875
950 759 952
866 668 870
936 697 942
899 697 900

Dynamic Summary

  Finish DOMContentLoaded Load
Average 1252ms 1002ms 1255ms
Standard Deviation 59.78 50.11 57.59

Static Summary

  Finish DOMContentLoaded Load
Average 909ms 706ms 911ms
Standard Deviation 29.12 27.30 29.33

By every metric, the static page is significantly faster.
Static page response time is 27% faster than the dynamic page.
Static page = much lower standard deviation. It’s faster, more often and more reliably.

As an added bonus, going “static” can open you up to possibility of serving sites via serverless infrastructure such as AWS S3.

Not only is it better for the environment (you’re using less electricity and resources), its better for your productivity (#NoOps anyone) but it’s better for your bottom-line too! You only pay for what you use.

YouTube Tutorial?

Would you prefer this post as a live walkthrough on Youtube?

Let me know by giving a thumbs-up (no login / account required).

Thanks. Your vote has been recorded.