Asset CleanUp Your new best Buddy
Are you doing all the right things. Following best practice most of the time. Yet your site still seems slower than you would like. Well Asset CleanUp may be the answer.
You may have run the speedtest and looked for the culprits that are having the greatest affect on your load time.
You may have arranged all the apps and assets on your front page to help it load lighter.
But still have seconds you would like to shave off that all important first paint or interactive time?
Well here is the thing.
Not everything that is loading is necessary or visible to you.
Its easy enough to work out the visible element such as images menus and Font packages that appear in the Waterfall chart of your speedtest.
It is not so easy to know what makes up the the code such as .css, .js and html.
You just assume it is relevant to the visible assets you see on screen. WRONG!
“So whats happening that I can’t see. How much of it is unnecessary and can be stopped or removed.”
Even if you know the answers to the last two questions,…
Compressing all my beautiful Content Images
I spoke before about the importance of managing , optimizing and compressing Images used on your website.
You need to keep them from slowing your sites performance.
- Make sure the originals are reduced in both file size and image dimensions.
- The maximum dimensions should be no bigger than how they will render on your site.
- Every Theme template in WordPress has defaults for images.
- This includes the maximum dimensions they can appear in any page template.
- This is calculated for both Desktop and mobile device viewing.
- Once you settle on a Theme for your site, try to find out what those sizes are.
- Knowing the maximum widths allows you to keep your uploads to a sensible or optimum size.
By default, WordPress Core offers predetermined image sizes, that are used in places such as featured image in posts.
WordPress default image sizes are:
- Thumbnail size (150px square);
- Medium size (maximum 300px width and height);
- Large size (maximum 1024px width and height);
- Full size (full/original image size you uploaded).
So that gives us a starting point. It tells us WordPress considers 1024px to be a Large Size.
It gets us in the right headspace for using images on the web.
When running speed tests on my site, I often see a recommendation to reduce the site Header image width.
The Header image on most sites is the widest of all images. It usually spans an area wider than the actual content area below it.
Because it is alway loaded on the landing page it deserves thoughtful compressing and sizing.
My image is 1024px width yet it usually displays in a browser at 959px width.
The speed test is telling me to save some load time by reducing the redundant image width to match the browser.
This argument indicates that even at 1024px we should be able to go smaller on
Speed test- Is my site Fast or slow?
Here we will talk about speed tests and what factors we can fine tune for optimum performance of our Website.
We all want a fast website. Personal experience proves a slow loading website is a turn-off.
We hit the back button and try another site. How do we determine how our site performs for visitors. Not just us?
First remember you spend a lot of time in your site. Your browser caches information for your subsequent visits.
It loads quickly for you because of that. But not so for new visitors.
We have to view our website the way our visitors will see it. When our website loads, it does so in their browser window.
All the code and information that renders your website is transferred to “their browser” which assembles it to display your site.
The speed at which that happens is the difference between being a fast or slow site.
We don’t want a slow site, people won’t wait for it to load.
Let’s do a speed test
To test this we first need to use one of the many online Speed test tools. Below are my favoured ones
Google PageSpeed is also available but of recent times it is not so intuitive nor easy to understand as other speed test sites.. Let’s leave it out for what we are doing here.
Here I am using WebPageTest speed test site.
(Click on the link – it will open in a new tab)
Enter your website domain name in the test box then press test.
It will run a diagnostic of your site loading. It will then list what resources were loaded.
At the top of the resulting speed test report we see the view in the image below.