CODEWITHSUNDEEP
htmlloadingimage-loading
Naltroc
Naltroc

Reputation: 1007

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

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>

Upvotes: 16

Views: 16028

Answers (7)

Tarlan Mammadzada
Tarlan Mammadzada

Reputation: 432

I may suggest to configure the .htaccess file for caching. It may increase the speed.

Use something like

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

Upvotes: 3

Bharat Patel
Bharat Patel

Reputation: 197

better to use webP Codec by google which is a method of lossy and lossless compression that can be used on a large variety of photographic, translucent and graphical images found on the web and helps in fast loading of images.

Upvotes: 3

Rafael Munoz
Rafael Munoz

Reputation: 656

For the amount of images, your site should be much faster. I would recommend you to use Sprites techniques which is basically to collect all your images into a single image. In that way the site loads just once.

There are online sprites generators that makes the process very simple. For example I use this one http://css.spritegen.com/ with pretty good results in better performance.

Upvotes: 2

Krunkmaster
Krunkmaster

Reputation: 335

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

ss of webpage

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

enter image description here

Upvotes: 13

Md Sifatul Islam
Md Sifatul Islam

Reputation: 854

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.

Upvotes: 8

frnt
frnt

Reputation: 8795

I visited your website and it worked fine at first. But when I switched to another tab and came back to your website, it was blank for few second and reason behind that is your background image Tomorrow_final.jpeg which is of 

11mb
size of 8454x8568

so huge. Whereas your remaining 12 images are working fine because they all are in kbs. So reduce your background image size using photoshop and save that for web and device and then it will work fine. At-present even your webpage stuck while scrolling too fast.

Upvotes: 4

Albert Font
Albert Font

Reputation: 606

The main problem is the size of the images, you should take care to upload an image much bigger than you really need in the website. Loading is much slower the first time because the image is not in your browser cache...

If you look at the image you will see: For this page you need an image of 300x279 and you are charging a gif of 1281x1192 pixels. And then if you look at the time, you're image is loading in ~6s. Here is the real problem. So resize the images and try again. If you want to clear the browser cache, Ctrl+F5.

enter image description here

There are some web tools like http://quickthumbnail.com/ where you can crop an resize your image, or you can do it using some Image Editor like photoshop,...

Upvotes: 5

Related Questions