Optimize my website load time.
We all want a fast loading site, but how do we achieve it? What can we do to speed up our website load time.
In a previous post I spoke about the steps it takes to load a website. Here they are again as a reminder.
- A request is made when a link is clicked.
- The page and its resources (files) are downloaded.
- The web browser uses the page resources to build the page.
- The page then is rendered (displayed) to the user.
So where do we start? With the only step we have some control over.
To optimize our website load time we need to address STEP.2
The browser can build nothing until it has the necessary files.
The bigger the files, the slower the transfer, the longer the wait.
We need to optimize our site to keep the data and file size down.
Media files such as Images tend to be one of the major culprits for slow load.
Making sure you format and size media correctly, is critically important. (see my posts on that)
(Getting that Header image onscreen as quick as possible is a priority.)
Generally these are static files. They don’t change once added to your site.
So file size matters, but so does distance, even in the superfast digital world.
Website load time usually gets longer, the further the “visitor” is from the files on your hosting server.
Paying for a CDN (Content Delivery Network) may or may not be in your budget.
It works by having copies of site files on multiple servers geographically spaced.
It is one of the most effective solution to make your website load time quicker for “visitors”.
You could also try serving troublesome files from Google drive.
It can be an alternate way to bring those files closer to the visitors location.
It works by using Google servers as a pseudo CDN.
Effectively cutting distance same as a paid CDN therefore website load time. But it is free!
How does this work
Images and Media
You add a photo to a Header or a page or post.
The Photo stays in your media gallery but adds a link in your post.
There is no reason at all why it can’t be an external link instead of internal.
Use the power of Cloud storage. example:- Google Drive
The image does not have to be on your server. It will still work.
Fonts
This type of thing already happens in your website. Take fonts for example.
Your site may be using fonts that are not actually filed in your WordPress installation. True.
This is the norm rather than the exception.
There are hundreds of different fonts. Personal computers have numerous fonts in their GUI.
Browsers are the same. Our web browser stores (caches) additional fonts from our browsing activity.
If your browser downloaded the font “merryweather” while visiting another website, it may store them in temporary cache.
If your site uses the same font, their browser will use its cache instead of downloading again.
Otherwise, when your website loads, it tells the browser to go to Google, or Adobe or Font-Awesome. This is not a bad thing because fonts are regularly sourced from fast servers in multiple locations across the planet.
The visitors browser follows the link to the closest server to download the font package.
How can I see the list of files that load my site
This link opens in a new window so you won’t lose your place here.
Enter the Domain name in the Speedtest. – Wait for it to complete. – Now go to the waterfall chart.
If you are serious about website load time this is the place to be.
You will see a page like a spreadsheet. Down the page there are rows.
Each one is a browser call that was made for information to load the Domain.
All the calls together are needed to successfully load your site.
On the left column you have addresses of files called.
Most are within the domain. (physical files on the site)
Others will be external resources. (like links to Fonts below)
27 =URL: https://fonts.gstatic.com/s/merriweather/v20/u-4n0qyriQwlOrhSvowK_l52xwNZWMf6.woff2
This Waterfall chart gives you the knowledge of what is going on under the bonnet when your site loads.
It shows the files, size, website load time and file load order.
From here you can identify any bottlenecks or troublesome items.
Consequently you are better equipped to take action.
If you see resources that are static files like images, consider serving them from a CDN or Google Drive.
This may improve your website load speed.
If you see items loading before they are theoretically needed, then changing that may be an option.
Many Caching plugins like W3 Total cache allow you to defer loading such resources. This enables the critical files clear path to load as a priority.
Many people chase the fastest load time they can achieve – and get frustrated when they seem to be getting nowhere.
Keep a perspective of what is important. Your visitor needs to see some activity on screen. If that happens quite quickly- they will hang in there. The “First Paint” time may be a more realistic goal. While looking at the website load time we need to break it down to see if we are reaching the critical milestones quickly. All the functionality might take a little longer to complete but that is okay.
I hope you have found something of value here.
Stay tuned for more articles refining your Website.
