Site Speed/Page Speed
Page speed drives traffic
Page speed, or more specifically the speed at which a website loads, is actually a key factor in determining PageRank.
Why is page speed important?
Slow websites keep people from coming back. A 1 second delay in load time can result in 11% fewer page views, a 16% overall decrease in audience satisfaction, or even a 7% loss in conversions.
Load time directly relates to a consumer’s willingness to return to your website. Some 44% of website viewers say they won’t return to the site if it crashes or takes a long time to load.
Want to see how your site compares?
All you need to do here is input your URL and let Google analyze your site (takes about 4-6 seconds), and receive a full-fledged report on the site’s performance. This can be fairly complicated and overwhelming.
For that reason, at first we suggest you only use this tool to see how your website is currently loading. At the top of the page you will get a score from Google, telling you whether your site is loading slow, average, or fast.
I have my pagespeed - now what?
From here, you can make a decision if you want to spend your resources on improving site speed or not. If you want better SEO, we recommend you pay attention to site speed for any score that isn’t in the 90-100 region. So, let’s take a look at some actionable tips on how to improve your page speed. Keep in mind that this section gets fairly technical so if you don’t have any experience in web development this might be a little bit hard to follow.
Tips & Tricks to Increase Page Speed
Page speed can get pretty technical, we’re going to break it down for you. Pay attention to the following tips, and you’ll be well on your way to decreasing your load time.
There are tools to use that help minify all your code; however, you can also do this manually by removing blank spaces, comments, or unused code. If these are things you need for future development, create a new branch for production with minified code and let your development branch be slow.
If you don’t know what a minified file of code is take a look at the picture to the right. The code on the left is regular CSS code. The code on the right is the same as the left one, without the blank spaces. It is more difficult for us human beings to read, but a lot easier for the computer, and therefore faster.
Make sure you don’t have a clutter of redirects. For example, try to serve the site directly to your mobile audience without redirecting to a mobile version (NOTE: this is not the same as building a mobile-first site). If you have a complicated redirect pattern, it will decrease load time.
Whenever a browser encounters a script, it halts the process of rendering the HTML until it has processed the script. This can easily cause load time delay. Avoid using render blocking scripts as much as possible. If the scripts are not essential to the sites first load, place them at the bottom of your HTML. Alternatively, consider using the asynchronous attribute “async” in script.
Utilize Browser Caching
Use Content Distribution Networks (CDN)
A content distribution network will ensure that your site loads much faster in all places of the world. If you don’t utilize a CDN, your website will have to load from its core location and send the information to the user requesting access to your site. If this is taking place between New York City and Sydney, it would make much more sense to utilize a CDN.
A CDN stores copies of your website in multiple datacenters to provide users with faster and more reliable access. It means that the NYC to Sydney exchange can be shortened to something along the lines of Melbourne to Sydney. This will help load time around the world.
Make sure that images and files on your website are not bigger than they need to be (we recommend a one megabyte maximum). Certain images can be uploaded in resolutions way beyond what the website requires and are thus taking up unnecessary, and precious, load time.
CSS sprites can help with this by combining all images in one giant image and then choosing to only showcase particular parts of that image (which would be the specific image you want to show).
Compress Your Images
We recommend using image editing software such as Adobe Photoshop to compress your images to below one megabyte in size. There are also WordPress plugins available that can compress your images. This will reduce the render time on each page that has images.
A slow website is a bad website, so refrain from using large raw image files or excessively big resolutions.