Improve your page speed by hosting your static website with AWS S3 and Cloudfront

Many websites and applications have move towards being independent from their server-side language using API and/or data-binding through sockets or HTTP requests. That means today your application does not need a web server anymore being somewhat “static” — that being said there is a range of opportunities in terms of hosting and improving page speed.

Assuming your website is static meaning that pure HTML, CSS and JavaScript then you might take the advantage of AWS’ services to host a static website and move it to S3 and Cloudfront but what are the benefits?

This article will make a basic comparison between running your website on Apache vs. S3 vs. S3+Cloudfront and take a look into speed specifically. This article will not explain how to setup your website in AWS S3 and Cloudfront has a very good tutorial here. If you still need help with the setup, feel free to contact me or comment in bottom.

Use case — When to host your static website or app client in AWS S3?

Most importantly you should consider AWS S3 only if your website is not dependent on any server-side language such as using PHP or Python etc. that means your website has to be HTML, CSS and JavaScript only. Also remember that any of your sub-folders or pages should not be using any PHP or such otherwise you might need to move those into sub-domains hosted in a web server.

You might also consider AWS S3 for hosting if you don’t mind having not server access such as .htaccess you can use in Apache environment to configure things such as redirects or web server configurations — this will not be possible with S3.

If your website have a lot of media files or static assets with visitors across the world then S3 with Cloudfront will be perfect use case thanks to the distribution of Cloudfront to multiple edge locations.

This all applies also to for example single-page JavaScript client application in React or Angular to be cached with Cloudfront across the globe.

Comparing environments

With most hosting providers (assuming Linux/PHP based) your website will run in Apache in a single server in a specific location in the world that means the latency and page loading time might be good from a nearby location but quite slow from other locations in the world leading to bad user experience or lost interest. Also page speed has been a ranking factor in Google for some time already.

Now assuming you are hosting your website in AWS S3 that normally means your website will still be only in one of Amazon’s regions the place where your S3 bucket is located for example Singapore.

If you make use of AWS Cloudfront you can define a S3 bucket to be cached across different edge locations around the world which means your website source will be copied and cached across multiple locations.

Benefits of using AWS S3 with AWS Cloudfront

Moving your website or your client application into S3 cache in Cloudfront will give you the following benefits:

  • Low latency across different locations since AWS has edge locations across the globe
  • Better page speed across different locations
  • No server maintenance
  • No server hosting cost
  • Most of the time lower operational cost than server hosting (depends on your setup)
  • Additional permission control through bucket policies
  • Cloudfront let’s you use SSL for free from AWS Certificate Manager or your own SSL certificate (tutorial here)

Caveats of using S3 with Cloudfront

Now there are a number of benefits but this does not mean there is only advantages hosting your site in S3 with Cloudfront. Let me list a few caveats and disadvantages to remember below:

  • No server configuration such as redirects, specific caching control etc.
  • You might use DNS/proxy service such as Cloudflare to define redirects
  • Most of caching policies can be defined in Cloudfront itself
  • Continuous integration and deployment not standardized
  • AWS currently does not offer proper version control or Continuous Deployment tools for this hosting setup out of the box
  • I will write an article about services you can use and how to achieve a deployment workflow with Gitlab CI
  • Again version control and cache control can get difficult
  • As much as Cloudfront makes it faster through caching the more headache you may get about controlling your versions being rendered
  • Cloudfront offers invalidation (can get expensive) of a cached copy through CLI or AWS user interface — this should be covered in your deployment workflow I will write about
  • Alternative recommendation from Amazon is to control your source through versioning in file names or folders
  • Initial loading time (first time in an location) will be slow

Static website in Apache vs. S3 vs. S3 with Cloudfront

Now that we have a good overview on the benefits and caveats of AWS S3 and Cloudfront how much does it actually improve the speed? For that I have made quick comparison when I have switched my site from PHP with Apache to S3 and then S3 with Cloudfront.

To compare page loading times I have used GTMetrix as my favorite tool to check page speed across different locations. I have used 3 different domains with

  • www.tobias-meixner.com hosted on EC2 t2.micro Linux Apache in Singapore + Cloudflare
  • s3.tobias-meixner.com hosted on a S3 bucket in Singapore + Cloudflare
  • cloudfront.tobias-meixner.com hosted on a S3 bucket in Singapore with Cloudfront cache in all edge locations + Cloudflare

See below table comparing loading time in different locations and setups with 2 times loading since Cloudfront might create a first cache copy only on first loading.

This is certainly not a detailed sample and may not exactly reflect real-worl loading times but it gives a very clear hint on how much Cloudfront can improve your page speed across regions. For most websites it most likely result in reduced loading time of 50%-200% especially for regions further away from current host location.

To make it short — if you have a simple static website like a personal website that you update once in a while but has good traffic around the globe then consider hosting in AWS S3+Cloudfront. If you have a client side app you should also consider Cloudfront but keep the additional setup for deployment and versioning in mind.