AWS: Speed Up Your Static Web Site using GZip and CDN
Enabling Gzip Compression using AWS CloudFront
Performance is one of the most important things in websites, and there is no need to explain reasons. Fast web pages lead your website to better search engine rankings while increasing traffic for your website.
However, almost every large scale websites contain many large files, and these files can have a significant impact on your website’s speed.
As a solution, most developers use Gzip compression to reduce HTML, javascript, and CSS files, and Gzip can reduce file sizes by almost up to 90%.
In this article, I will discuss how Gzip works and how easily you can configure it using AWS S3 and CloudFront with an example.
What is Gzip & How It Works?
GZip (GNU Zip) is an open-source compression algorithm (based on the DEFLATE algorithm) that can speed up your websites by reducing the file sizes. When your server receives a request for a web page, it checks the request header to see whether your browser supports gzip.
If your browser supports GZip, then the server generates the markup file for your web page, and after that, GZip converts that markup into a compressed data stream. As the final step, the browser decompresses the compressed data stream to show the web page to the user.
Does GZip Really do What it Says?
Now you know how GZip works, let’s see its performance in a real example to see whether it does what it says. The following example is from a static web site hosted in an AWS S3 bucket and the first screenshot shows the download time of a CSS/Text file without GZip compression. The second screenshot shows the stats after Gzipping for the same request.
As you can see, the download time for the same file has been reduced to 1.02 ms from 73.88 ms. It is almost 72% percent smaller than the original file and it indicates that GZip can reduce the file sizes drastically while improving the website’s speed.
So, let’s see how we can enable Gzip easily for a static website using AWS CloudFront.
Tip: Share your reusable components between projects using Bit (Github). Bit makes it simple to share, document, and organize independent components from any project.
Use it to maximize code reuse, collaborate on independent components, and build apps that scale.
Bit supports Node, TypeScript, React, Vue, Angular, and more.
Recent Advances and Improvements to JavaScript Promises
They’ve come a long way since the days of Promise.resolve() and Promise.reject().
Promises, Promises.
JavaScript’s been slowly but steadily improving as a programming language ever since its inception back in 1995, and lately it seems as though those improvements are coming at a quicker and quicker pace. One of the biggest advancements (in my opinion, at least) was with the introduction of promises for asynchronous operations back in 2012.
The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value, and it delivered JavaScript developers everywhere from the conundrum known as “callback hell.”
But that’s in the past, what I want to talk about now is the future: the future of promises. Not content to rest on the laurels of Promise.resolve() and Promise.reject(), the authors of JavaScript (the ECMAScript Committee) have added several new methods in ES2021 to make promises more useful and versatile than ever before.
I want to share some of the newest promise methods available to developers today, and make suggestions for when you might take advantage of them in your own development. Let’s get going.
Configuring GZip for a Static Website Hosted in AWS S3 with AWS CloudFront
In this section, I’m going to explain how you can enable compression using AWS CloudFront. CloudFront is a CDN(Content Delivery Network) service from AWS. It also supports the compression of files before the delivery.
The CloudFront supports different file types such astext/css, text/html, text/javascript. You can find more details about it in the AWS CloudFront documentation.
Let’s understand Gzip compression with CloudFront step by step, assuming that you already have a website hosted in an AWS S3 bucket.
Step 1
First, you need to make sure that static hosting is enabled in your S3 bucket. So, Login to your AWS console and search for S3. Then it will show all the buckets available in your account. Select the relevant bucket from the list and navigate to the Properties tab. There you will see an option to enable static hosting.
Step 2
If you have already created a CloudFront distribution for your application, you can skip this step and start with step 3. If not, please follow this step to create a CloudFront distribution.
I assume that you already have a domain name reserved for your website. You can easily connect your domain to CloudFront distribution using AWS Route 53 and AWS provides good documentation about how you can configure Route 53.
To get started, search for CloudFront in the services section and select the Create Distribution option.
You will be requested to enter several details including Origin Domain Name. Please make sure to enter the website URL of your S3 bucket for that (without http:// part). Usually, the format is something like this:
<bucket-name>.s3-website.<region>.amazonaws.comKeep the rest of the configuration as it is and select the Create Distribution option. Then you will see your newly created distribution.
While it is being deployed there are few things we need to take care of. Go to your newly created distribution from the list and select Edit in the general tab. You will see an empty box for Alternative Domain Names, enter your website domain in it.
As the final step of distribution creation, Navigate to the behavior tab in your distribution, and change Viewer Protocol Policy to Redirect HTTP to HTTPS.
Step 3
Now search for CloudFront in the services and select the relevant CloudFront distribution for your S3 bucket. You will see a window similar to the below one, which includes Distribution ID, ARN, Domain Names. etc.
Navigate to the Behavior tab and choose the behavior linked with your S3 bucket.
After navigating to the behavior tab, select edit and then you will see some properties of the distribution. You need to change just one setting. So, just scroll down, change the state of property Compress Objects Automatically to Yes and save. (This will take little time to get deployed).
Step 4
After navigating to the behavior tab, select edit and then you will see some properties of the distribution. You need to change only one setting there. So, scroll down, change the state of property Compress Objects Automatically to Yes and save. (This will take little time to get deployed).
<?xml version=”1.0" encoding=”UTF-8"?>
<CORSConfiguration xmlns=”http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
<AllowedHeader>Content-Length</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Before proceeding further, check the CloudFront distribution to confirm whether it has been deployed successfully. Once it’s deployed, you can reload your web page and see the request details in the network tab, You will be able to see that download times have been reduced and confirm that GZip has been enabled successfully by checking the Response Header as well.
Conclusion
As shown in the comparison, GZip can help you drastically increase your website’s performance and you can easily enable it using AWS CloudFront and AWS S3. So, give it a try with your personal or business websites.
