Superfast WordPress Websites. Part 2. Stackpath

2
By: | August 15, 2019 | Tags: , ,

In this post I am going to show you step by step how you can build a Superfast WordPress Websites like mine. Back in May I posted a tweet that was picked up by Stackpath and was contacted by the awesome Ben Gabler who is the Chief Product Officer of Stackpath.

My tweet that was picked up by Stackpath

A few hours after that tweet I received an email out of the blue from Ben informing me that I could get even more speed out of my website. How excited was I to get an email from the CPO of Stackpath.

What followed was a couple of days of corresponding emails between myself and Ben. In the end I got a super fast loading speed of well under a second on The WEB ENGINEER website, even down to 300ms. In this post I am going to show you step by step all of the processes needed to setup your Stackpath account to hopefully achieve the same results I have.

Before we start on the process I need to warn you that this will be quite a long process and a good knowledge of hosting is advantageous. On top of this you will not require any caching plugins and before starting a FULL BACKUP of your site should be RAN and DOWNLOADED.

STEP 0 – Pre Steps

Before starting lets check the speed of the site currently by running it through my GTMETRIX account…

poor performance report GT Metrix
  • Save

STEP 1 – Sign up for STACKPATH.

This first step really is very strait forward. Just CLICK HERE and click on the GET STARTED button at the top left. I find it better by creating an account with E-MAIL / PASSWORD combo and not with Facebook, Google or Github.

After that you are then greeted with these screens.

Stackpath - Lets get started
  • Save

STEP 2 – Adding your site to Stackpath.

The 4 steps above were quite painless right? this is where it gets a bit more involved. The next screen you are greeted with is where you will add your domain name. You will NOT NEED the 2 available upgrades of Serverless Scripting and WAF in my setup but it may be worth exploring these after.

Enter your domain name without the WWW and click on continue then on the next screen make sure your source is selected as webserver and the IP Address is the same as your hosts..

create site in cdn
  • Save
create site from origin - stackpath
  • Save

STEP 4 – Congratulations your site has been added.

You are now well on your way to being able to create Superfast WordPress Websites You should now have an Edge address as I have in this screenshot. Make a note of this as we will need this address later. I usually copy and paste it into a notepad.
Next click on the Continue button.

site complete in stackpath
  • Save

STEP 5 – Configuring your site with StackPath.

The next page you are greeted with is the sites overview page. Next click on the CDN Settings COG Graphic as shown here…

Configure the CDN Settings
  • Save

On the next page entitled CDN Settings you need to do the following:

  • Cache Handling
    • Lifetime – Select Specify TTL and the CDN TTL select 7 Days.
    • Query String Control – Select Cache All Query String
    • Dynamic Caching By Header – Set to Off
    • GZIP Compression – Set to On and Compression Level 6
    • Content Persistance – On
    • Use Vary Header – On
  • Client Browser Policy
    • Browser Cache TTL – 8 Hours
    • CORS Header Support – On All Origins
    • HTTP/2 Support – On

Everything should look like it does on the screengrab below. After that is done click back to where it says Overview underneath Sites on the left hand menu.

CDN Settings in Stackpath
  • Save

STEP 6 – Edge SSL

While on the Overview page click on the plus icon Free SSL Cert under the heading EdgeSSL on the right hand side as sown in this screengrab.

Edge SSL in Stackpath
  • Save

Next select the none WWW. and the WWW. versions of your domain and click on the blue Continue button. You will then be greeted with a DNS Setting. Keep that page open and on a new tab open up your hosting control panel and find the icon for DNS settings.

Copy the Name and Data and create a new CNAME Record in your domains DNS Settings. It may take a while for the system to check for the CNAME Record but feel free to click on the Force Recheck button. It may take a few hours but in my case it was 5 mins.

My hosting is with a company called 20i and it has it’s own bespoke control panel, yours however may have hosting that use’s the famous CPanel interface. If you get stuck with this get in touch with your hosting support who will be able to help you.

STEP 7 – Edge Rules

On the left menu under sites click on the menu item titled – EdgeRules – Force HTTPS Connections – Turn On.

At the bottom click on the button – Add Delivery Rule.

  • Under Rule name enter – URL Caching.
  • Under IF – Select URL – Matches – *://*/
  • AND – Select Rule
  • THEN – Cache – 86400

Finally click on Save Rule so the page looks like this…

StackPath Edit Delivery Rule
  • Save

STEP 8 – Modify the DNS Rules on your Hosting

This is the final step and is the one that will make your site use Full site Delivery with StackPath and not just the JS, CSS and Image Files with if I am correct in thinking does not need any Caching Plugin on your WordPress site as it’s all handled with your hosting Provider and StackPath itself.

Currently my DNS Records for this site look like this…

DNS Records for the old blog
  • Save
  • Change your IP Addresses under the A Records to 151.139.128.10
  • Create a new CNAME record with the name www with the data being you Site’s Edge Address
  • this can be found on the Overview page on Stackpath at the top right and usually consists of random Letters&Numbers.stackpathcdn.com
  • Once all the changes have been done click on the Update DNS Setting button.

The final thing to do is to click on the Purge Cache button on the overview page of your Stackpath account and you are then all done. You should now have a much better understanding on how to build fast loading Superfast WordPress Websites

Building Superfast Loading WordPress Websites – CONCLUSION

All being well you should have a vastly improved website in terms of speed. My latest report after the results at the top of this post are as follows.

Latest Speed Test
  • Save

As you can see its a huge improvement earlier I had speed score of C & D with a load time of 8.4 seconds now I have grades A & A with a load time of 1.6 seconds.

Not too bad for a few hours work I’m sure you would agree. These are the results for this site and I cannot guarantee that you will get the same for yours. It all depends on what theme you are using and how may plugins you have enables on your site. But you can see the obvious benefits and advantages.

While you are hear have a look at my post about the differences between Custom and Pro themes for WordPress. Wand some more Speed tips? Here is my post about WEBP Images and WordPress

What are you thoughts on this? Do please leave me an insight below.

Phillip Dews
  • Save
Phillip Dews
Rating: 5.0/5. From 1 vote.
Please wait...

GET ALL MY BEST CONTENT DIRECT TO YOUR INBOX

For value laden, high quality tips, tricks and tutorials to build a world beating blog or website

  1. Phillip Dews | at 7:42 am

    How fast is your site? Do you have any suggestions? What do you use tolower your websites page speed?
    Got any questions for me?
    Phillip
    Phillip Dews recently posted…The Web Engineer receives Clutch Leader Award as top Freelance App Developer!My Profile

    No votes yet.
    Please wait...
  2. Pingback: My AMA on the BizSugar Blog | Phill Dews

Would you like to share your thoughts?

Your email address will not be published. Required fields are marked *

CommentLuv badge
37 Shares
Copy link
Powered by Social Snap