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.
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…
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.
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..
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.
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…
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.
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.
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…
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…
- Change your IP Addresses under the A Records to 220.127.116.11
- 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.
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.
What are you thoughts on this? Do please leave me an insight below.