How to Make Your Website Lighting Fast

by on September 14, 2018

How to Make Your Website Lighting Fast

How many times have you abandoned a website because of slow load times? We’re betting a lot. Not only do users care about how fast your website loads, Google and other search engines do too. Google will downgrade slow, heavy sites in the search rankings.

People are impatient. It doesn’t matter how great your website is — if it doesn’t load fast enough, users will leave before they even see it. According to Google, 53% of visits are abandoned if a mobile site takes longer than 3 seconds to load. As a site owner, 3 seconds should be your benchmark. You want your website to be fast as lightning, not slow as thunder.

Just a few seconds difference can mean winning or losing a customer. So, let’s dive into how to make your website lightning fast.

  1. Images

One of the biggest causes of slow websites is the number and size of images on a page. A typical website weighs around 2,262KB and images such as logos, icons, and product images can easily make up two-thirds of the page’s total weight (Think with Google). Images are almost always the largest contributor to page size.

Large images really slow down your website. Follow these image optimization tips to speed up your website:

  • Eliminate all unnecessary images.
  • Try to keep images under 90 kb if you can.
  • Use the srcset attribute and x descriptor in the img element so the browser can download the most appropriately sized image for the user’s device. It will ignore the others.
  • If you are using Photoshop, use the “Save for Web” command and check the “Optimized” and “Convert to sRBG” boxes. Change the Quality and Image Size settings to lower the expected file size (found in the bottom, left-hand corner).
  • Find a good balance between quality (compression rate) and file size.
  • Use JPEG/JPG for most images and PNG for simpler images for higher quality. GIF images are really big so use them sparingly.
  • Use CSS3 and vector formats to replace images when possible.
  • Use SVG files that are compressed with GZIP.
  • Get rid of unnecessary image metadata, such as camera settings, location, and more.
  • Make sure your images and website are responsive to all device types and sizes. Use our Mobile SEO Guide to make sure website works well on mobile devices.
  • In Google Images, the AMP logo  identifies pages that load quickly. Use AMP to decrease load times.
  • Apply all of the latest image optimization and responsive image techniques.
  1. File Compression

After eliminating all your unnecessary resources, you want to make sure that the resources that remain are all compressed to minimize the overall download size for the browser. GZIP compression is one of the easiest and most effective ways to speed up your website.

All modern browsers support GZIP compression and will automatically request it. It’s basically like sending a zip file. The browser can download the smaller zip file a lot faster, unzip it, then show it to the user for a much faster web experience. GZIP compression works best on text-based resources: HTML, CSS, and JavaScript.

Enable GZIP compression to reduce your file size by up to 90% (usually between 60% and 90%):

You can use a general-purpose compressor, but in order to achieve the best compression, you will need to use a variety of compression techniques. Brotli is another good lossless compression algorithm. In the end, you will have your “development version” which is the fully coded one and the compressed file.

Audit your website and make sure it is being compressed. 

  1. Redirects

Redirects slow down load times by adding an extra network roundtrip (sometimes more if an extra DNS lookup is needed). Imagine asking for directions and the person tells you that they don’t know, but their friend over there does. That adds time to your search just as a redirect does.

While difficult to avoid, it’s best to avoid redirects altogether if you can. One common redirect that is commonly used is a non-www to www redirection.

Redirects aren’t a major issue, but PageSpeed will flag redirect chains. You want to make sure there are no redirect chains (aka loops), where a redirect goes to another redirect.

There are four main types of redirects:

  • 301 redirects permanently redirect old content to new content. 302 redirects temporarily redirect users, such as limited time offers. Both are server side redirects and are the fastest option to use.
  • PHP redirects use a PHP script, providing the fastest option if you can’t use 30 or 302 redirects.
  • JavaScript and HTTP redirects are client side and slow things down because the browser has to full download and parse the code before it can trigger a redirect (not recommended).

You can use various tools, such as Screaming Frog and the Broken Requests tool to find all the 301 and 302 redirects to your web page. Get rid of any redirects that aren’t necessary. Make sure the ones that are necessary are all server side (301 or 302). Replace all client side redirects (HTML, JavaScript, etc) with 301 and 302 redirects.

If you’re curious, learn how the internet works.

For one easy monthly fee, VitalStorm designs, hosts, and manages your website for you. We make sure your site loads fast and provides users with a beautiful user experience. Isn’t that a relief? Shoot us a message to learn more about our web design services.

VitalStorm stays on top of all the latest digital marketing news so you don’t have to. To stay in the loop, follow us on FacebookTwitter, and Google+.

Give us a call today for your FREE websitePPCSEOcall center training, and general online marketing consultation: 1-877-311-5695