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

Asked 26/9, 2016 at 17:34 Answered 5/10, 2016 at 16:42

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>

Hecklau answered 26/9, 2016 at 17:34 Comment(9)

while most of the files are web ready, there is one that is a whopping 11mb – Zymotic 26/9, 2016 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. – Hecklau 26/9, 2016 at 18:11

check the errors in your code too and fix them validator.w3.org/nu/… and jigsaw.w3.org/css-validator/… your css links either aren't correct or not uploaded to your server – Teran 26/9, 2016 at 18:41

Hi you can put optimized images in source folder that will reduce time of call for getting images from the server. – Leannleanna 29/9, 2016 at 4: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. w3schools.com/cssref/pr_text_letter-spacing.asp – Timeout 6/10, 2016 at 2:17

@Timeout thabk you for the suggestions. This is a custom font file where the letter-spacing property is not defined. – Hecklau 6/10, 2016 at 2:42

Interesting...I did not know that was possible! I will have to learn more about that. Thanks. – Timeout 6/10, 2016 at 2:45

Wait! I was thinking font-stretch. That is not defined. Letter-spacing might be good to go- - let me check it out – Hecklau 6/10, 2016 at 2: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. – Hecklau 6/10, 2016 at 2:49

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.

Jessikajessup answered 26/9, 2016 at 18:46 Comment(14)

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. – Hecklau 28/9, 2016 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. – Jessikajessup 29/9, 2016 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. – Hecklau 29/9, 2016 at 16:23

try to technique i suggested and it will help you diagnose what is causing the slow load speed – Jessikajessup 29/9, 2016 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? – Hecklau 30/9, 2016 at 1:16

Let me look into it and see if i can assist you. – Jessikajessup 30/9, 2016 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. – Jessikajessup 30/9, 2016 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. – Hecklau 30/9, 2016 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) – Jessikajessup 30/9, 2016 at 16:1

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 [email protected] 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. – Jessikajessup 30/9, 2016 at 16:4

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. – Hecklau 30/9, 2016 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. – Jessikajessup 30/9, 2016 at 16:20

add me on gmail ([email protected]) 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 – Jessikajessup 30/9, 2016 at 16:21

@naltroc hey man sorry i didnt see your gchat, hit me up ill be keeping on eye on it! sorry again. – Jessikajessup 12/10, 2016 at 17:19

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.

Fulfil answered 29/9, 2016 at 4:52 Comment(0)

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

Yesima answered 29/9, 2016 at 4:40 Comment(0)

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.

Bumkin answered 29/9, 2016 at 5:3 Comment(0)

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.

Mouldon answered 5/10, 2016 at 10:7 Comment(0)

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>

Ramonitaramos answered 5/10, 2016 at 16:42 Comment(0)

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.

Bandeen answered 5/10, 2016 at 7:19 Comment(1)

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. – Hecklau 5/10, 2016 at 13:58

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags