When we talk about improving PageSpeed to a 2 second or faster page load time, it can sound like a miniscule change from 6 seconds to 2 seconds. However, every second really counts when it comes to the patience of people.
In the case of Amazon.com, they slowed down the page load time by 100 milliseconds just to test what would happen and that resulted in a 1% decrease in sales. Imagine how many sales are lost when it’s slowed by 1 second vs. 100 milliseconds.
Most people who visit a website expect it to load in less than 2 seconds and if it doesn’t, they leave and the likelihood of them ever returning again is slim to none.
Why Do Websites Load Slowly?
Websites load slowly because of the amount of content on the site. However, a site with 1,000 pages could easily load faster than an 8-page site if it is structured properly.
Each webpage is made up of:
- 63% Images
- 16% JavaScript
- 3% HTML
- 3% CSS
- 16% Other
For the most part, images that are really big and dense weigh down a website. Then the code may have multiple files, requiring many trips to the server to load information. The last thing that may slow down a website is the scripts that block pages from rendering.
How to Identify a Slow Loading Website
Besides sitting and watching a website slowly load, there are several tools you can use to truly identify the speed in which a website is loading without your website cache affecting the data. Any of these sites can provide you with the average page load time, some with more details than others.
- Feedthebot.com/pagespeed
- Developers.google.com/speed/pagespeed/insights/
- Tools.pingdom.com/fpt
- Webpagetest.org
How to Make a Website Load Faster
After identifying the speed at which your website loads, there are three things you can do to make it load faster. First, reduce the weight of the page through the images and minify the assets of the CSS. Second, reduce the round-trips to get information from the server. Third, stop the resources from blocking. We’ll go into detail how to do each of these things.
Optimizing Images & Minifying Assets
Since images tend to be 63% of a site, the size of the images greatly affects the page load time of a site. If they are uploaded with their original size, the browser has to resize the image itself, which is why it takes longer to load and makes the website look bad. It is easy to overlook how large an image is before uploading it to a site but there are tools available to fix this problem.
Photoshop has a “Save for Web” option that many people use to reduce the file size. Just using this is helpful but if you have an image that’s 600px by 600px, that is usually too large and unnecessary for a website. Shrinking the overall height and width also greatly contributes to a smaller file size.
If you don’t have Photoshop, these four sites offer programs to reduce image file sizes, some of them charge a fee for their products.
Related to how the site look, minifying the assets means condensing the CSS code so it’s quicker for browsers to read the data on the site. Typically, CSS is written as such:
h1 {
font: 20px Georgia, “Times New Roman”, Times, serif;
font-weight: bold;
color: #895813;
text-align: left;
}
Instead, a plugin can minify it to this format:
h1 {font: 20px Georgia, “Times New Roman”, Times, serif; font-weight: bold; color: #895813; text-align: left;}
This helps browsers to read out the code with less gaps and speeds up the page load time.
Combining Assets, Caching, & Using a CDN
When information from a website loads in a browser, it pulls the data from a server to your computer, mobile phone, or tablet. When there are multiple files, your computer needs to request and send data from the data multiple times. You can make this easier by combining the multiple files with a single file for CSS & JavaScript so that one request is sent instead of many.
Many people don’t update their browsers so this is important for older browsers that can’t keep up with multiple connections at once. There are plugins you can use on your site like W3 Total Cache to improve the user experience through increasing server performance, reducing page load times, and utilizing a content delivery network (CDN). It’s best to let an experienced developer do this for you.
By caching your site, the browsers of visitors will remember the files it has seen and pulls information locally onto the screen instead of taking trips to the server. Using a CDN means using a collection of servers placed around the world. Each server sends a copy of the website and sends it to each one, allowing for those who are searching near a CDN to receive the information faster than it would take to travel across the world.
If you need any help improving your page load time, contact us today for more information. We also can provide you with a FREE SEO Analysis to improve marketing your website.