Home Forums Trusted Defer off screen images

This topic contains 8 replies, has 2 voices, and was last updated by  Andy 1 week, 1 day ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #6212

    paulmcf87
    Participant

    I am using the trusted theme for an ecommerce store.

    I have used the trusted themes homepage set up with the “Recent” “Featured” “Sale” “Top Selling” tabs.

    I ran a google pagespeed insigts test and scored a massive 18 out of 100.

    The page took 11s to load, the majority of this was due to off screen images adding 7.2s to the load time.

    I installed a lazy-load plugin that makes no difference.

    I am keen to defer the loading of off-screen images, this would make a massive difference to my website load speed and in turn should help my SEO.

    The way the theme is set up also apears that it does not allow lazyload on catalogue pages either as I am getting the same result there.

     

    Any help would be great

    #6213

    Andy
    Keymaster

    There is nothing in the theme that would excplicitly exclude lazyloading, as the underlying set up of the theme is basically the same across all WordPress themes, and Trusted is no different.

    The catalogue pages are powered by WooCommerce, and the theme only adds the styling to the content, not the underlying structure, so the theme should make no difference to whether lazyloading works or not.

    When I visit your site, it loads in 6 seconds for me on first page load. I also took a quick look at some other sites which share the same IP address and web hosting resources as yours and they were all taking between around 6 to 8 seconds on initital load, so it seems your site’s loading time is normal for the web hosting you are using.

    If you want see how many other sites are sharing the same web hosting resources as yours, you can search using Bing for your domain’s IP address, e.g. https://www.bing.com/search?q=ip:217.160.0.29

    Regarding the lazy load plugin, I’m sorry but we cannot help with this as it is not our plugin and I would recommend you take a look at the support/documentation for that particular plugin.

    Hope this helps and sorry again that we cannot offer help with the specifics of any third-party plugin.

    #6214

    paulmcf87
    Participant

    @andy Thanks for getting back to me. I thought Id ask as I thought it could be relaed to the fact that the theme does  ot allow for infinite scroll.

    Although I have tried a few different lazy load plugins – Jetpacks lazyload feature, BJ Lazyload and others and none seem to work correctly.

    #6219

    Andy
    Keymaster

    The infinite scroll part of Jetpack is separate from image lazy loading so one will not affect the other.

    I have done some testing to make sure that Jetpack lazy loading is compatible with the Trusted theme – just in case there had been some recent changes I was not aware of – and can confirm that the theme is 100% compatible.

    Not sure if you are familiar with your browser developer tools, so here is how to check the source code of your site to see if image lazy loading is working correctly.

    Access the inspector/dev tools by hitting CTRL + SHIFT + C in Firefox or Chrome. Look through the page source code for an image that is currently out of view and you should see that the data-lazy-src= image URL has ?is-pending-load=1 appended to it. Also the image size should be 1×1 instead of the actual dimensions of the image, as this is how Jetpack changes the image until the actual image is called for when scrolled into view.

    See the screenshot below where I have highlighted these two, so you can see where to look.

    #6220

    Andy
    Keymaster

    It seems you have made a lot of custom modifications in your child theme and other parts of the site and there are a lot of errors in the source code of your site.

    The main issue that you have extra <head></head> code within the <body></body> of the site code, containing extra loading of jquery.js. There should only be one head and it should end before the body begins. There are other errors also, too many to go through in detail here.

    This (or some other issue) could be the source of the problems you have described in this post as well as your previous post about minification.

    I would strongly suggest that you get these errors fixed before trying to implement image lazy loading etc.

    See also how the closing </body> tag is highlighted in red, indicating html issues between the start and end of the page code.

    #6221

    paulmcf87
    Participant

    I have checked and switched back to Jetpack Lazy load, and can see that what you have said holds true. the lazy load function now appears to work on all pages bar one.

    I will also have a look at my coding.

    the one page which it does not work on, however, I have not customised anything bar CSS… The product catalogue page.

    All products and their images seem to load as the page loads. would that have anything to do with the float in animation?

    #6222

    Andy
    Keymaster

    All products and their images seem to load as the page loads. would that have anything to do with the float in animation?

    No, it will work just fine even with the float in animation activated.

    Your product catalogue page contains the same coding errors, as they are site-wide.

    Jetpack lazy loading binds itself to the page <body> so any errors in the body of the page could stop it working correctly.

    As I said previously, it is pointless trying to fix advanced features such as lazy loading while the underlying structure of the site contains so many errors. I would strongly recommend that you take the site back to basics and start from scratch, testing each addition or customization along the way.

    #6226

    paulmcf87
    Participant

    @andy

    the errors were due to my nav menu which should now be sorted. other errors were due to plugins which I am using and trying to sort those also.

    have you tested any other lazy load plugins with this theme?

    The jetpack one seems to work ok, the only issue I am having now is when I open a product page from the catalogue, the main image doesn’t load correctly it is being covered by the thumbnails. once I select a thumbnail it corrects itself but this is an issue if only one thumbnail available as due to it being active, will not correct itself.

    #6229

    Andy
    Keymaster

    Yes on your site there is a delay loading the main product gallery image.
    This is handled by WooCommerce and the Trusted theme does not touch the functionality of this.

    It is most likely a conflict somewhere, usually another plugin. I can see that WordPress is correctly loading jQuery version 1.12.4 but you also have an older version of jQuery version 1.11.12 being loaded (is this from another plugin? I’m not sure as it’s being loaded directly from Google). It is possible that this could cause a conflict. The only way to know is to disable the plugin that is using the older version of jQuery.

    In fact, it is always recommended to disable all third-party plugins, then reactivate them one-by-one to see which, if any, is causing the conflicts.

    There are also still some html markup errors in the source code – missing opening and closing elements in various places.

    I’m going to close this topic as the issues you are facing are not related to the theme, and as you have a lot of custom modifications and plugins that seem to be badly coded it is impossible for us to fix any issues that are not related to our themes.

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Defer off screen images’ is closed to new replies.