sayontan/suffusion

Image Loading Problem

Closed this issue · 12 comments

darkdesigngraphics commented

Hello,

Please understand I am completely amatuer so will need everything explained in the simplest possible steps! If I have posted this in the wrong place please do let me know.

When this theme forum was at aquoid.com I went asked many questions to help with my website - www.darkdesigngraphics.co.uk and with help made a lot of edits and changes to the code and theme.

Currently my website suffers very slow load times which I am sure is to do with all the plugins I use, bad hosting and probably much more. But one thing I have noticed a lot recently, whenever you load up any pages, such as this one as an examples - https://darkdesigngraphics.co.uk/tattoo-designs/gladiator-tattoo-design/ - the images start off stretched for a bit while the page is loading and only after a while go to the size I have set them. I was wondering if there is any way to stop this from happening as I do believe this is probably one of the many reasons I have quite a high bounce rate.

...and apart from that I am wondering if there is anything else I can do to help the website load quicker and improve what I have.

Any help will be greatly appreciated!

Thank you

Colinsp commented
darkdesigngraphics commented

Thank you very much for your help!

I do use, I believe, two caching systems, wp Super Cache plugin and Cloudflare for the website but yes I can see image compression would help a lot, I have recently started making sure the images are a lot smaller for newer posts.

But one thing that I have a fear that this will not help is the way the images are all stretched when loading a page, if this is something you might have noticed, whether they are large or take a long time to load or not. I have noticed that whatever device or browser I am using, the images start off very stretched and only after a few seconds do they appear to go to their regular size.

Is this something that is normal or something that is happening because of settings I have changed?

Also another questions (let me know if I need to make a new thread). I have not updated the theme since it was on the aquoid website, should I attempt to update now? I noticed that this link on a previous thread - https://mbrsolution.com/themes/how-to-install-suffusion-theme.php - now points to an 'Error 404 - Not Found' page?

Would you be able to tell me how I find out what theme I am currently running and what the best way to update would be?

Also will this effect the changes I have made to the website thus far.

Thanks again for you help!

mbrsolution commented

Hi, here is the new link. You will notice the url has changed slightly from the one above.. This was a request from someone here in the forum which makes more sense :)

https://mbrsolution.com/themes/how-to-install-or-upgrade-suffusion-theme.php

You should update to the latest version. Out of curiosity, what version is running in your site at present?

Thank you

darkdesigngraphics commented

Hi mbrsolution,

Thank you very much for your help!

I have taken a look in the my themes page on the website and it shows that what is currently active is 'Suffu-scion child theme Version: 1.0.0' and that I have 'Suffusion', Version: 4.4.9 installed.

I am assuming to do this I need uninstall the Suffusion theme but should leave the the Suffu-scion Child theme installed and follow the other steps, such as exporting and importing the suffusion settings?

My apologies for all these questions I am just very scared of messing everything up! And of course I will back the whole website up as well.

mbrsolution commented

Hi, first of all make sure you backup your site. Then follow my instructions and you should be okay.

Let me know how you go.

Thank you

darkdesigngraphics commented

Thank you very much I will give it a go very shortly!

darkdesigngraphics commented

Thank you for your time mbrsolution, I have, I believe updated the theme, there is one thing I did different which was activate the 'Suffu-scion child theme Version: 1.0.0', after installing the updated Suffusion theme as I remember reading a long time ago how important it was to have a child theme when making many edits like this, it does seem all my settings have been loaded up anyway I assume due to the child theme so I have not uploaded the suffusion settings that I downloaded.

Is this correct or have I made an error and should have just followed the instructions as you told me?

mbrsolution commented

That is good news :) well done.

Is this correct or have I made an error and should have just followed the instructions as you told me?

Yes you have done everything correctly. I just need to update my documentation to include Suffusion child theme somewhere in the steps.

You can close this thread if you don't need any more help.

Enjoy

darkdesigngraphics commented

Ok, well this one is a little strange.

Just today, out of the blue, when loading up the website the header image does not seem to load as you can see at darkdesigngraphics.co.uk The background repeat images load fine as you can see but the image saved under foreground header image just isn't loading? the image is here - https://darkdesigngraphics.co.uk/wp-content/uploads/2012/09/New-website-header-black-and-White-logo1.png

No idea why it would suddenly just not load?

Any help would be greatly appreciated!

mbrsolution commented

Hi, your issue is caused by a caching plugin of something similar. You are using lazyload function in the header and that is causing this issue. The following code illustrates this.

<h2 class="blogtitle center"><a href="https://darkdesigngraphics.co.uk"><img alt='Dark Design Graphics | Graphic Design Newcastle' data-src="" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img src='https://darkdesigngraphics.co.uk/wp-content/uploads/2012/09/New-website-header-black-and-White-logo1.png' alt='Dark Design Graphics | Graphic Design Newcastle'/></noscript></a></h2>

At present it is displaying the following image, which is wrong.

src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />

Disable the plugin that is implementing lazyload and see if your header image works again.

Kind regards

darkdesigngraphics commented

Thank you so much for your help once again, it was in fact the Smush plugin recommended by Colinsp, which I must say has been extremely helpful, instead of disabling it I seleted an option under the Lazy Load Tab in the plugin settings which allowed Lazy Load to ignore PNGs which my header image is.

Once again thank you so much for your help.

mbrsolution commented

You are most welcome :)

Can you mark this support ticket as resolved if your issue is resolved.

Thank you