Images so slow they do not appear on page when document finishes loading

Question

GOAL: All images appear on first load.

CURRENT: If lucky, two or three images appear on first load; requires page referesh to see all images.

This is my first site, written by hand. The client is a designer so quality images are important. Performance and speed are important to me as this is now in my portfolio, and I cannot accept a partially functional site as my work.

Here is an example page:

http://elisamantovani.com/pages/book_design.html

Check out the other pages too. Same issue.

UPDATE:

Many have suggested reducing image file size. Only a few images were large anyway, but now they are all good. No image is larger than 200kb, with most images checking in <100kb. The issue persists.

Google is suggesting other reasons that prevent page rendering, such as render blocking JS/CSS. CSS should block rendering until loaded, but should not take long to load. I would like it if the jQuery can wait until after the HTML/CSS has rendered.

Just got into cache-control. Added this to the .htaccess to boost performance a little, but this would only help after first load, but the need is for first load.

# One year for image files
<filesMatch ".(jpg|jpeg|png|gif|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>
# One month for css and js
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>

Answer 1

If you want to measure the speed of how fast your scripts / images load what you can do is simple.

Go to the web inspector (or right click an element and hit "inspect element") then click the tab called "timeline". Now reload your page. It will give you a measure of how long everything took to load.

On my PC your site took 3.40s to load. Not to bad. You seem to be good to go.

On a side note if your images are loading slow its probably the images not the scripting. Make sure you go back and recompress them in photoshop so that they are the highest quality / lowest file size

Here is a screenshot

Here is the SS of your load time taken today. This appears to be a hosting issue.

Answer 2

Running the url in google insights shows you have to compress and optimize your images by >=60%

developers.google has a good writing on it which you might find useful for your next projects too!

The are multiple reasons for which your images might load slow!

Some suggestions:

1. Minify and compress SVG assets
2. Prefer vector formats
3. Pick best raster image format
4. Remove unnecessary image metadata
5. resize images on the server and ensure that the “display” size is as close as possible to the “natural” size of the image
6. invest into automated tools and infrastructure that will ensure that all of your image assets are always optimized.