Diagnosing page bloat

[Nightwing]

Hi from sunny 9 degrees C York UK

Ive hear that some of my web pages are too big in terms of file size, the site is www.davidclick.com

two questions please:

1. So in kb what should i be aiming for? Some pages are 160KB others are 199KB

2. What is the best tool for measuring a web pages file size ( Using Google chrome inspector but cant find where is shows file size of a specific page)

Thanks in advance,
David

[bluedreamer]

I tend to use the Web Developer toolbar for getting quick snapshots.

Your home page weights in at 4mb, most of that is images.

A couple of things you can do:

1. Optimise all images to bring file sizes down, that should give a you a huge saving
2. Assess what images you actually need, and remove any that aren’t needed

[Nightwing]

Thats great thank you, but what file size should i be aiming to get them down too please?

[Nightwing]

I used code inspector on chrome to measure the file size on my home page here is what i see:

Is my www.davidclick.com home page 209 B is size then?

Thanks,
David

[bluedreamer]

No specific file size but the total weight of all the images will make the site load slowly for people who don’t have fast connections, thing rubbish broadband, mobile 2g/3g etc.

As an example your logo image is 620kb, that is huge, I’d normally expect that sort of image to be optimised to about 10kb-ish. If you optimise all your images you should be abel to bring the page weight down to well below 1mb, that’s a 75% + saving.

[Nightwing]

Nice one thanks, I just used firefox code inspector to doagnose page file size as could not find that data in Chromes code ins

pector below is what i found:

So its telling me my home page is 3362 KB. Wish i could find that data easily in the chrome inspector

[SamA74]

@bluedreamer

Your home page weights in at 4mb, most of that is images.

I run the homepage through Pingdom and it comes up as being 8.1MB in total. The real hog being the background image stair-face-grab-3.png at 4.7MB alone.
Choice of image format is important. As a general rule, don’t use png for photos, they are quite inefficient for that, jpeg is better where you don’t need alpha.
However your logo, which has already been commented on may be more efficient as a png rather than jpeg, png is more efficient for that type of graphic image (though svg is better ).

[Gandalf]

You may have better tools available David, but I find tinypng.com a useful tool to optimise PNGs and JPGs.

[SamA74]

These are just the two biggest images, swapped formats:-

From a 4.7MB png to a 133kb jpeg. You could probably reduce further with less resolution.

From a 621kb jpeg to a 23kb png.
Just that should half you page weight, but you could take it further.

[Nightwing]

Thank you everyone, i’ll begin work on this in the next few days

[Nightwing]

Thanks everyone for highlighting page bloat as a concern, see below stats.

This was a new area for me but thats to help here ive learnt and resolved the isssue of huge picture file sizes, thank you @Gandalf @SamA74 @bluedreamer. Now my home page is super skinny in comparison to yesterday

Grazie mille,
David

[SamA74]

That’s a significant reduction in load time and page size.
I see with the logo you have got it super small filesize by upping the jpeg compression, but that has introduced some noticeable compression artefacts. That’s why I was inclined to go with png for that type of image. The png format used lossless compression, this means that although you have no control over the amount of compression, the image quality is not degraded at all form the original. That’s why it’s so inefficient with photos or very detailed images. But with graphics with areas of flat colour it can be very efficient without any loss of image quality.
You could make a further saving with the grid images. I see they are ‘letterboxed’ with black sides to give a square aspect ratio. Those black bands are redundant pixels and could be cropped off and replaced by a black css background.
To make the images fit the square container you could use object-fit: none, see the methods discussed in this thread:-

Responsive Image Gallery That Maintains Ratio with Faux CSS Cropping?

I’m going to have users upload photos on a web app. these photos could be really any size or aspect ratio. I could try to do a lot of cropping and resizing on the backend, but given that I want to pop up the fullsize image in a modal, I figure maybe it’s easier to simply use some CSS magic to faux crop the images and create responsive thumbnails for the layout which maintain their aspect ratio when the browser is resized. Here’s the first fiddle I threw together: https://jsfiddle.net/32w76ty0/ …

[ronpat]

Too easy:

.gif = 12 K, No artifact

[Nightwing]

Thank you Sam, I’ll get this fixed this week

[Nightwing]

Thanks Ronpat, logo now giffed