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.
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.
• In Google Images, the AMP logo identifies pages that load quickly. Use AMP to decrease load times.
2. 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.
Enable GZIP compression to reduce your file size by up to 90% (usually between 60% and 90%):
• Apache: Use mod_deflate
• Nginx: Use ngx_http_gzip_module
• IIS: Configure HTTP Compression
• Find sample configuration files for most servers (HTML5 Boilerplate project)
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.
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.
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.