A friend's site is being really slow when loading. I used gtmetrix.com (even though the page is not wordpress) to check and the page load time is 8.4s with 2.09MB and a score of C.
the result pointed out a few things to chance in order to give a better load time
The page isn't using wordpress and is responsive, the part where it says width and height attr missing, I can't set a static height and width though and where it mentioned to resize images which is already done to the max. By this I mean the image size is 424x424 but the max size used is 300x300 would it really matter that much if I reduce all images to 300x300? As the 3rd point does that mean I should really combine all images into one and use CSS to get the same image but different position? Because those images are things like arrows, buttons, x
Thank you in advance for any responds.
Every bit counts. Try and save the images at the size they are actually being presented at on the page.
Make sure to run each image through a tool like imageoptim before loading them.
How is the page so heavy? Is it just the images?
Images should be saved with 72 pixels per inch since this is what the web will render them as. If you need to support retina display(high resolution) type devices and want to make the pictures look good (which you should). Make them 2 times the size you need them on the web. Then scale them down with width and height.
You have an image on the page that will be displayed as 300px by 300px.
Your saved image should be 600px by 600px at 72ppi.
Then in the browser you define the width and height of the image.
<img src="randomimage600x600x.jpg" width="300px" height="300px">
This will give the image a better display on the web.