LET'S TALK
LET'S TALK

Improving Our Website Performance 425% With Amazon CloudFront.

How to Improve Your Website Loading Speed.

Our team recently took on the process of developing our own website using WordPress. This was a new experience for us—but we knew from our research that site loading speed is a core vital that Google looks at when determining how to rank your page. 

Ultimately, we developed a solution to accelerate our website’s loading speed with Amazon CloudFront. Here’s everything that went in to our website speed optimization process:

Our WordPress Website loads after 1.7 seconds. After being converted to static and hosted with AWS CloudFront, the site loads in just 418 milliseconds.

Static vs Dynamic Websites

WordPress websites are dynamic. Every time the site is loaded, it can customize the content being loaded based on the visitor. This is in contrast to static websites— static sites are identical to all users who load the page.

Notably, because static websites are pre-built, the files can be loaded significantly faster.

A dynamic website is a site that generates pages in real time, responding to dynamic characteristics such as screen size and device type.

Static Website Pros & Cons

  1. Static sites are significantly faster. Static sites are a collection of pre-built HTML, CSS, and JavaScript files. Depending on your configuration, they may be rendered server-side or client side. A fast CDN (content delivery network) means these sites can be very quickly delivered to a visitor. 

  2. Changes can take time to propagate. Depending on your hosting solution, changes can take significant time to propagate out to the production site. This is not ideal for businesses that may need to push a change to production at a moment’s notice.

  3. They display the same content for all users. If your site is essentially a brochure, static is a no-brainer. If you need to be able to respond to the individual requester, static won’t work for your use case.

Dynamic Website Pros & Cons

  1. Dynamic sites are heavier to load. They do not store pages as HTML files, but build them based on the user requesting them. They will need to pull from a connected database to build a custom HTML file for that user. 

  2. They are more flexible. Dynamic sites can be localized, personalized, and updated in real time to reflect current events and the user loading the page. 

  3.  Dynamic sites are more complicated to build and maintain. They require a lot more technical expertise to properly build and maintain compared to a static site. 

At Peznet, we didn’t need the added functionality that comes with a dynamic site—the simplicity and loading speed of static was enticing. However, we wanted to keep WordPress as our development platform because of its ease of use. 

Enter Staatic: A Plugin to Convert Your WordPress Site to Static Files.

There are a number of plugins available to convert your WordPress site to static HTML files. We tried a couple before landing on Staatic, a plugin that easily exports our site with a single click. 

Showing the 'Publish' button in the menu of our WordPress website that exports the site to static HTML files with a single click.
A screenshot that shows our Static WordPress plugin exporting our website to HTML.

Using Amazon's CloudFront CDN to Accelerate Our Website Performance.

Our solution started with a simple WordPress server, and we architected the rest as we built out our static solution.

  1. Vultr Server. We spun up a Vultr server to host our WordPress website while we began design and development.

  2. Staatic. Staatic exports our WordPress site into pre-baked HTML files.
     
  3. Amazon S3. Those exported files are stored in an AWS S3 bucket. 

  4. Amazon CloudFront. CloudFront pushes our files to edge servers (also known as points of presence) around the globe. 
A network diagram showing how our WordPress development site gets delivered as a static HTML file to an end-user via Amazon's CloudFront CDN.

Before & After - a 425% Increase In Loading Speed.

Google measures page loading speed using a metric called Largest Contentful Paint (LCP). The lower your LCP, the better.

We measured the LCP of our Dev WordPress Site at 1.7s. The LCP for the Staatic site on CloudFront measured in at 418ms. 

A dynamic website is a site that generates pages in real time, responding to dynamic characteristics such as screen size and device type.
A speed visualization of our Static Website hosted on Amazon CloudFront. The Largest Contentful Paint, LCP, is measured at 418 milliseconds.

This was a fun internal project for our team to architect, and we’re proud of the results we’re seeing on the live site. You can learn more about the solutions Peznet delivers for businesses here.