Website Optimization: Beginners Guide


Website Speed Optimization: The Beginners Guide

The beginners guide to Website Optimization in 2020

So you want to get your website perfect? It needs to be fast and most importantly it needs to be better than you competitors.

Be warned this guide isn’t a quick fix. This guide is to point you in the right direction to achieve success with your business. You are NOT going to be an expert overnight. This is something that takes time days, months and even years to perfect.

Preparation Prevents Poor Performance. (PPPP)

Lets prepare your website for SEO, Consistency, Speed and Momentum! Your website is your sales portal which will ultimately lead to conversions. The first step before anything is to prepare it for your customers. How do you do that? Easy!

Responsive Website

Google has recently rolled out Mobile First which means your website needs to be optimized for responsiveness. We can say from first hand majority of users visiting this website will be mobile and tablet users.

Start by attacking your website responsiveness, Does it work well on mobile, tablet and desktop devices? Use Google PageSpeed Insights and make it responsive. If your website is custom built and not WordPress then follow this guide by W3 Schools on how to do that. Better yet, go learn Bootstrap. Provide consistency across all pages.

Google Search Console

Google Search Console will help identify problems and most importantly help you make decisions about your websites performance. Get your website setup with Google Search Console. It takes 5 minutes to do.

Not to mention it will help Google index you’re page content more efficiently and consistently. Click here to register your website with Google Search Console.

Google Analytics

Use Google Analytics to track your website visitors and the devices they use! Learn what you’re customers like best about your website and use this new profound knowledge to progress forward!

Learn how to setup Google Analytics here!

Page Loading Speed

Increase your page loading speed. Make it fast. We recently written a guide called WordPress Speed Optimization: The Definitive Guide. This applies to you to even if you don’t have a WordPress website use the guide to start making your website faster.

Leverage Browser Caching

Deploy .HTACCESS to leverage browser caching. This will tell browsers how long they need to store static files such as Stylesheets and Images. This will save you bandwidth, processing power and most of all increase your website loading time. You’re website visitors will thank you!

If you DON’T have this then your wasting bandwidth and most importantly your users are downloading content they don’t need over and over again.

  • If you’re a WordPress user install W3 Total Cache
  • If you have a custom website follow the guide below.
<IfModule mod_expires.c>
  ExpiresActive On

  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Others
  ExpiresByType application/pdf "access plus 1 month"
</IfModule>

Follow this guide to Leverage Browser Caching here.

Gzip Compression

This will compress files (making them smaller) so they can be transferred over the network faster! This will give your visitors the joy of not having to wait for a slow website. Deploy it! Once done then go ahead and test your website with PageSpeed Insights

Optimize Images, Javascript and Stylesheets

How big are your image files? Are they suitable for a website? Make the file size smaller! Remember for every time a visitor has to download your image it’s costing your website speed, bandwidth and processing usage. This is bad! Visitors hate slow websites and will leave raising you’re visitor bounce rates with Google Analytics

Using Lazy Loading for Images and Videos

Lazy load defers images and videos until they are actually needed! If your user can not see it in their browser window then we don’t need to load it until they need it. Speed and Consistency!

  • If you’re are a WordPress user W3 Total Cache has Lazy Loading built in and enabled already!
  • If you’re not a WordPress user then use the guide below!

Lazy Loading Images and Videos by Google

Minify JavaScript, Stylesheets

Make your assets smaller. Minify JavaScript files, Stylesheets and any other script assets you have. Minification will remove empty spaces, line breaks and make the file much much smaller. This means faster network transfer rates and in English; More Power!

Use a CDN (Content Delivery Network)

Don’t be afraid to learn something new! If your website draws a lot of traffic each month then distribute the content across the globe!

CDN’s have region deployed servers meaning your website visitors will load your content from the server that is closest to them reducing your web server processing usage and bandwidth. Most importantly its cheap!

  • If you’re a WordPress user W3 Total Cache has CDN capabilities built in! We recommend StackPath – Learn how to use it!
  • If you have a custom website then follow StackPaths Integration Guide here.

We hope you enjoyed this guide and learnt some useful tips and tricks! Don’t forget to check out the rest of our website and most importantly… get back to work!