Quick Guide to Website Speed Optimisation (WSO)

by | Mar 8, 2019 | Website Optimisation | 0 comments

Step 1: Take a baseline measurement

  1. Visit www.webpagetest.org
  2. At top right, click Register
  3. Register a new user account, and confirm your email address
  4. We register a new user account so we can save our results
  5. Once your email is confirmed, visit www.webpagetest.org once more, enter your website’s address, select the Test Location nearest to you, and then click the yellow Start Test button on the right
  6. The test will take about 90 seconds to complete.
  7. Once the test is complete, you will receive a rating at top rate with grades from A to F.
  8. In a spreadsheet, create the column headers:
    1. Website URL
    2. Date
    3. Test Location
    4. First Byte
    5. Start Render
    6. Fully Loaded Time
  9. In row 2, enter your values for the test you’ve just completed. Save your spreadsheet.

Step 2: Optimise your images

  1. If you’re using WordPress, install the plugin Smush.
  2. To do this, login to your WordPress dashboard, go to Plugins > Add New, enter Smush in the search field at top right, click install next to Smush Image Compression and Optimisation, click Activate once the install has completed.
  3. Once the plugin has been activated, click Smush at bottom left of your WordPress dashboard.
  4. Select “Automatically smush my images on upload”, and then “Update Settings” at bottom right.
  5. At top left, click Bulk Smush

Step 3: Add GZIP Compression to your web server

If your website is using cPanel, we can tell the web server to compress all the assets that are delivered by the website.

  1. First check if your website already has GZIP compression enabled. Go back to your webpagetest.org test result, and check the score for Compress Transfer at top right. Click on this score, and if the results say that assets on your own website need compressing, proceed with this step.
  2. To check if your website is using cPanel, visit the URL www.yourdomain.com/cpanel in your web browser (e.g. Google Chrome, Internet Explorer), replacing yourdomain.com with your own domain.
  3. If you reach a cPanel login screen, enter your username and password. When you signed up for web hosting, you will have received your username and password by email. If your web designer signed you up for website hosting, ask them to complete this step for you.
  4. Once you’ve logged into cPanel, select File Manager.
  5. In the new File Manager window, select Settings at top right. Ensure “show hidden files” is selected.
  6. Double-click on the public_html folder.
  7. In the public_html folder, find the file .htaccess. Right-click on it, and choose Download.
  8. We will use the downloaded file as a backup in case something goes wrong.
  9. Right-click on .htaccess and choose Edit.
  10. In the new edit tab, add the following to the end of the file: 
    <IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/opentype
# For Olders Browsers Which Can't Handle Compression
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
  11. Visit your website home page in a new browser tab and ensure it loads correctly.
  12. If you receive a 500 internal server error, go back to your cPanel File Editor, click Upload at the top of the screen. In the new upload tab, click Browse, and browse to the downloaded copy of .htaccess. Confirm it is okay to overwrite the file.
  13. If you did receive a 500 internal server error, perhaps you didn’t paste the above code at the very end.
  14. If you didn’t receive a 500 internal server error, and your home page loaded okay, go back to your webpagetest.org result and click “Re-run the test” at top left.
  15. When the new test completes, make sure your score for “Compress Transfer” has improved.

Step 4: Add Browser Caching to your web server

If your website is using cPanel, we can tell your web server to tell visitors’ web browsers to cache website assets.

  1. First check if your website already has browser caching enabled. Go back to your webpagetest.org test result, and check the score for Cache Static Content at top right. Click on this score, and if the results say that assets on your own website need browser caching, proceed with this step.
  2. To check if your website is using cPanel, visit the URL www.yourdomain.com/cpanel in your web browser (e.g. Google Chrome, Internet Explorer), replacing yourdomain.com with your own domain.
  3. If you reach a cPanel login screen, enter your username and password. When you signed up for web hosting, you will have received your username and password by email. If your web designer signed you up for website hosting, ask them to complete this step for you.
  4. Once you’ve logged into cPanel, select File Manager.
  5. In the new File Manager window, select Settings at top right. Ensure “show hidden files” is selected.
  6. Double-click on the public_html folder.
  7. In the public_html folder, find the file .htaccess. Right-click on it, and choose Download.
  8. We will use the downloaded file as a backup in case something goes wrong.
  9. Right-click on .htaccess and choose Edit.
  10. In the new edit tab, add the following to the end of the file: 
    ## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
  11. Visit your website home page in a new browser tab and ensure it loads correctly.
  12. If you receive a 500 internal server error, go back to your cPanel File Editor, click Upload at the top of the screen. In the new upload tab, click Browse, and browse to the downloaded copy of .htaccess. Confirm it is okay to overwrite the file.
  13. If you did receive a 500 internal server error, perhaps you didn’t paste the above code at the very end.
  14. If you didn’t receive a 500 internal server error, and your home page loaded okay, go back to your webpagetest.org result and click “Re-run the test” at top left.
  15. When the new test completes, make sure your score for “Compress Static Content” has improved.

Step 5: Consider moving to faster hosting.

The fastest web server is Litespeed on solid state drives. Litespeed is an alternative to Apache which runs on most cPanel hosting accounts.

Solid state drives are like hard drives, but made with no moving parts, like USB thumb drives, and they are generally 5 – 10 times faster.

If you move your website to Litespeed on solid state drives you’ll generally find your First Byte metric on webpagetest.org will improve dramatically. First byte is a metric that Google uses as a ranking signal, so the faster your First Byte, the better your search engine rankings.

In Australia, Ventra IP use Litespeed on solid state drives.

If you’d like us to migrate your website to your new hosting, sign up here.

Optional Step

If you’re not comfortable completing the steps above, and your website uses WordPress, you can install a caching plugin to handle things for you. This adds some overhead and complexity to your website that aren’t present when manually editing your .htaccess file, but the convenience can make up for that.

The 3 plugins I recommend as WordPress caching plugins are:

  1. W3 Total Cache (instructions for use)
  2. WP Super Cache (instructions for use)
  3. WP Fastest Cache (instructions for use)

If you have installed a caching plugin, and you wish to change to a different caching plugin, first deactivate the old caching plugin.

Grab the free e-book "How to Write Copy That People AND Search Engines LOVE"

If you would like some more information on how to leverage the latest trends for your business, contact Steve at insight.web@insightdesign.com.au or call

.

Submit a Comment

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