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>

while most of the files are web ready, there is one that is a whopping 11mb — Jesse Kernaghan, Sep 26 '16 at 17:42
Gotchya. Didn't think to check the background-image. Funny enough though that is always the one to load. It is the gallery images below that header photo that do not populate. — Naltroc, Sep 26 '16 at 18:11
check the errors in your code too and fix them https://validator.w3.org/nu/?doc=http%3A%2F%2Felisamantovani.com%2Fpages%2Fbook_design.html and https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Felisamantovani.com%2Fpages%2Fbook_design.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en your css links either aren't correct or not uploaded to your server — mlegg, Sep 26 '16 at 18:41
Hi you can put optimized images in source folder that will reduce time of call for getting images from the server. — Himesh Aadeshara, Sep 29 '16 at 04:43
The images loaded for me. On an unrelated note, I would wrap your js in a standard jquery document ready, and use CSS instead of m a n u a l spacing. http://www.w3schools.com/cssref/pr_text_letter-spacing.asp — colonelclick, Oct 06 '16 at 02:17
@colonelclick thabk you for the suggestions. This is a custom font file where the letter-spacing property is not defined. — Naltroc, Oct 06 '16 at 02:42
Interesting...I did not know that was possible! I will have to learn more about that. Thanks. — colonelclick, Oct 06 '16 at 02:45
Wait! I was thinking font-stretch. That is not defined. Letter-spacing might be good to go- - let me check it out — Naltroc, Oct 06 '16 at 02:46
Okay. letter-spacing is good to go. But font-stretch does not work unless the author of the font included it as part of the font file. — Naltroc, Oct 06 '16 at 02:49

Krunkmaster · Answer 1 · 2016-09-30T16:29:48.263

13

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.

edited Sep 30 '16 at 16:29

answered Sep 26 '16 at 18:46

Krunkmaster

335
1
13

When you visited the site for the first time, did all of the images appear? On this page for example, there should be about 12 that show up without needed to refresh. – Naltroc Sep 28 '16 at 14:27
I didn't see any problems. I tried the gallery page to. My inspector clocked your webpage at 3.4 so yea! not bad. – Krunkmaster Sep 29 '16 at 16:13
I still experience no-loading when I visit, as do many other users. But it is good to hear that some have all images load upfront- something must be going well somewhere. – Naltroc Sep 29 '16 at 16:23
try to technique i suggested and it will help you diagnose what is causing the slow load speed – Krunkmaster Sep 29 '16 at 16:43
thank you for sharing this technique. Using it I can observe that the images do load (and with good time!) - but they do not appear on the screen. I have been looking into doing something like `(document).load = ('img').reload()` but have not found a good way to do it yet. Thoughts? – Naltroc Sep 30 '16 at 01:16
Let me look into it and see if i can assist you. – Krunkmaster Sep 30 '16 at 15:29
Just out of curiosity.. Where is this site hosted? When i initially loaded your site everything loaded just fine. A crappy hosting platform could possibly be your issue. That being said i'm still going to look into this but your site isn't loading well (homepage is, other pages are loading slowly). My company has websites hosted on godaddy that sometimes experience chugging similar to what im experiencing now on your site (my boss cant load the site but i could) after we transferred them to a different server it fixed the problem. – Krunkmaster Sep 30 '16 at 15:41
I'm with InMotion, which supposedly has better speed performance than GoDaddy. The homepage will probably be a little slower since the gif is 5MB (need to reduce that). The other pages are all light though, and the timeline shows all images loading in parallel under 2 seconds. Now at least if I wait on the page they eventually appear after around 20 seconds, but no way could I expect a user to know or do that. – Naltroc Sep 30 '16 at 15:49
I'm assuming your on the shared hosting plan right? Im trying to load the page you linked and its timing out for about 40 - 60 seconds. This type of thing is why im asking about the plan. We literally had the same issue at my job. All it took was a quick call they moved us to a lower populated shared server (most shared hosting holds millions of users) and everything started performing better. Honestly it seems to me that your code / images aren't the problem (although 5MB is a HUGE file size for an image) – Krunkmaster Sep 30 '16 at 16:01
To further test your issue you should test this webpage locally or on a different server. If your running off a mac apache comes installed via terminal. Otherwise you can always download wamp or xampp. Or if you would like you can send me the source code via google drive and ill test your page on my personal server. My personal email is aghuber11@gmail.com if you decide to go that route, I'll throw your webpage up on my server and we will see if its server or code related. – Krunkmaster Sep 30 '16 at 16:04
The homepage gif has been updated. Every image on the site is a reasonable size. We are on the Business Power Plan, which is indeed shared hosting. When I chatted with them about the issue they said it was an issue with code and to talk to developers, which is why I'm here! Though there does not seem to be anything wrong with the code. I will ask them about moving to a different server first. – Naltroc Sep 30 '16 at 16:10
The issue doesn't appear to be your code. When i connected this time and tracked it i was idle for much longer then the code loading. The only way to be sure is it test it on a different server / local hosting. – Krunkmaster Sep 30 '16 at 16:20
add me on gmail (aghuber11@gmail.com) and hit me up on gchat so i can send you this SS of the load times and try to help you diagnose this issue – Krunkmaster Sep 30 '16 at 16:21
@naltroc hey man sorry i didnt see your gchat, hit me up ill be keeping on eye on it! sorry again. – Krunkmaster Oct 12 '16 at 17:19

Md Sifatul Islam · Answer 2 · 2016-09-29T05:35:50.813

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:

Minify and compress SVG assets

Prefer vector formats

Pick best raster image format

Remove unnecessary image metadata

resize images on the server and ensure that the “display” size is as close as possible to the “natural” size of the image

invest into automated tools and infrastructure that will ensure that all of your image assets are always optimized.

score 5 · Answer 3 · answered Sep 29 '16 at 04:40

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.

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,...

score 4 · Answer 4 · answered Sep 29 '16 at 05:03

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.

score 3 · Answer 5 · answered Oct 05 '16 at 10:07

3

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.

answered Oct 05 '16 at 10:07

Bharat Patel

197
4

score 3 · Answer 6 · answered Oct 05 '16 at 16:42

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>

score 2 · Answer 7 · answered Oct 05 '16 at 07:19

2

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.

answered Oct 05 '16 at 07:19

Rafael Munoz

636
1
7
27

Thank you for this resource. For the purpose of this site, all images must be separate in order that the user can click on individual pieces to enlarge them. – Naltroc Oct 05 '16 at 13:58

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

7 Answers7