Why is Site Speed Important
Website speed is an important facet of the web design process. If you don’t factor in your site load time, you could be missing a critical piece of your visitor’s journey.
Are we being overdramatic? Well, we don’t think so. Here’s why: Google uses site speed as a search ranking factor, and there’s research supporting that fast sites have better conversion rates.
Better search engine rankings and conversion rates mean more meaningful traffic to your site. So your site speed is something to consider when building and maintaining a website.
Assess Your Site Speed
Not sure how fast your site is? Luckily, there are free online tools to help you.
One such tool is the Google PageSpeed Insights tool. It not only measures your site speed, but it also gives you metrics to help you identify your site’s weaknesses (and how you can improve them).
Find the Google PageSpeed tool here.
Speeding Up Your Site
Now that you know how speedy your site is, you know whether or not it needs improvement. If you’re not sure where to begin, we have a few helpful tips for you.
Optimize Images
One way that you can speed up your site is by optimizing your images.
Images can lend a creative edge to your website and break up blocks of text. However, if not optimized, images can add unnecessary strain to your website.
That’s because image files can be large. The more defined and beautiful an image is, the more likely it is that it has a large file size. And if you use one, two, or several unoptimized images on your website, it can have noticeable effects on your site speed.
So, how do you optimize your images? Luckily, image optimization is not difficult.
Step 1: Fix Your File Dimensions
Your image file dimensions matter, even if your site is designed to resize the image automatically.
For example, you might have an image that is 1920 x 1080px. However, that same image is only 480 x 270px on your webpage.
If a file is larger than what’s displayed on the webpage, the website will need to load the file every time the page is loaded, then resize it. Multiply that process by each visitor, then add the potential for overlapping site visitors. That’s a lot of resources devoted to loading and resizing one file when you probably don’t need it to be that large in the first place.
How do get around this? Resize the file. That way, your website is only loading the amount of file it has to. So in the example above, you could resize the image to 480 x 270px since that is how it appears on the webpage.
To resize, we recommend checking out your photo editor of choice. Many photo editors come with resizing tools you can use to make images smaller. WordPress also has the option to resize your images when you upload them.
Step 2: Compress Your Files
In addition to resizing your image file, you can also use file compression. File compression reduces the size of your image. However, there are two different types of file compression: lossless and lossy.
Lossless image compression will shrink the file size without compromising any visual aspect of the image. On the other hand, lossy image compression will sacrifice some of the image’s visual quality for a greater reduction in file size.
It’s important when using image compression that you are aware of which compression type you are using since it will ultimately affect the quality of your image.
There are a number of online image compression tools out there for completely free, like tinypng.com. You can upload a file and the tool will spit out a compressed version.
Replace unoptimized images on your website with optimized ones and you may see a marked improvement in your site speed.
Website Compression with mod_deflate
In the same vein as image file compression, you can also compress your website! Our Shared, VPS, and Dedicated accounts come with the ability to use mod_deflate, an Apache module that uses GZIP to compress your files. The smaller the website files, the less power it will take for your server to load them. The less power it takes, the faster your website will load!
Note that mod_deflate is not available on our WP Enthusiast or WP Professional packages since those packages use NGINX instead of Apache.
We have a handy tutorial for you to try if you would like to use mod_deflate.
Find it here: Using mod_deflate for Page Compression
Remember, you can always reach out to our 24/7 support team if you have questions!
CDN
A CDN, or Content Delivery Networks, helps your site resources load faster by storing your site assets in different servers around the world. When someone visits a site using a CDN, that site will load the website resources from the server that is geographically closest to the visitor. This means that the site resources take less time to travel from the server to the visitor’s browser because the server is geographically closer.
For more information about how CDNs work, check out our blog: What is a CDN?
Pair offers a CDN service called PairCDN. It’s an easy-to-use site speed boost for visitors around the world. Find more information about PairCDN here.
Link Your Stylesheets
Another way to speed up your website is to make sure you’re linking your style sheets. You can find instructions about how to link your stylesheet in this resource by the University of Washington: Linking to an External Stylesheet.
Linking a stylesheet is the preferred way of adding a stylesheet to your webpage. This is in contrast with a different method called “@import.”
Why should you link your style sheets instead of using @import? Well, most of it comes down to speed. If you use more than one stylesheet, @import will cause your stylesheets to load one after another. That means the CSS styles of your second stylesheet won’t be applied until after the first one is downloaded, which could lead to visitors glimpsing your pre-styled HTML elements.
On the other hand, linking your stylesheet allows your CSS to load in unison with your webpage file, so your visitors see a fully functional webpage sooner (and you don’t run the risk of accidentally flashing your visitors with ugly plain text).
Fast Site = Happy Visitors
If you keep your webpage fast, you better your chances of converting your visitors. We went over a lot of different ways you can potentially speed up your HTML and CSS site. However, we understand that these tricks might be a little daunting to implement for some. So, if you have a Pair hosting account, please don’t hesitate to reach out to our support team for help!
If you aren’t using an HTML/CSS site, but are interested in speeding up your CMS, stay tuned for a future blog article about speeding up WordPress websites.
