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