speed up the opening of an element

  • search box orange, right-side: the image and the text on the top open always late in comparison with the other parts of the page, is there a system to cache them by code? image +text are ruled by a shortcode code set in functions.php, and the shortcode itself is placed in a widget in the sidebar position

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator bcworkz

    (@bcworkz)

    It loads late because its HTML occurs after all the apartment thumbnails. Images always take longer to load. We have to wait until many of the thumbnails load before we see the orange box’s image. What I would suggest is modifying your template to load the orange box image early on in the page. Load it into an image element that only displays as a transparent 1px x 1px image near the top of the page. The point is to start fetching the image early on, not to display it properly just yet.

    Once loaded early on, the browser should have it in its cache, so when the page load reaches the orange box it’s already loaded and ready for display. We no longer need to wait for the thumbnails to load first.

    Thread Starter sacconi

    (@sacconi)

    If I understand correctly the trick is to load the image in advance somewhere but without showing it, then when the browser loads the search box the image has already been loaded somewhere else and therefore it opens immediately. But in which file should I put the code? functions or content.php or elsewhere? But can I also insert the entire image and then hide it with css? Maybe I could put the image in a plug in?

    Moderator bcworkz

    (@bcworkz)

    You correctly understand the concept. You’d want the image to occur early in the page load process, so I’d suggest putting it in your theme’s header.php file somewhere. I’m unsure if it’s wise to completely hide the image, the browser may not fetch the file if it’s completely invisible. I would place it in a 1px x 1px container and set its opacity to nearly transparent but not 100% transparent.

    It’s possible to do this from a plugin, but you’d need to find an appropriate hook. This hook would likely occur later than if you inserted the image directly into the template file. I’d probably place it just before the site’s logo image.

    Thread Starter sacconi

    (@sacconi)

    I did this in the header file:

    <span class="trucco">
    <img src="https://test.sacconicase.com/wp-content/uploads/2024/10/cercaefiltra-57web.jpg"> 
    </span>

    and then by css:

    .trucco {
      height: 1px;
      width: 1px;
      background-color: white;
    }

    but it still loads late…I think it opens after all the images of the page are loaded, dispite the same image is in the header…

    Moderator bcworkz

    (@bcworkz)

    What’s strange is if I simulate a slow connection (with a browser’s Network developer tool), the image appears before all but one apartment image. But with a relatively fast connection it appears late, as you’ve seen.

    I suspect there may be some layout directives that appear late in the rendering process and the browser cannot show the image until this has been resolved. It may not help, but you could try formally preloading the image instead of just placing it in page content. Remove the 1 x 1 image and add this to the <head> section instead:
    <link rel="preload" as="image" href="https://test.sacconicase.com/wp-content/uploads/2024/10/cercaefiltra-57web.jpg">

    If that does not help, there’s likely something else preventing display due to other resources preventing immediate rendering of the image. Optimization and caching plugins might help with this, but determining and actually correcting render blocking resource can be difficult.

    Thread Starter sacconi

    (@sacconi)

    The code works! I wonder if there is a way to preload all the 12 apartment images that appear first when opening an archive page or the home page…

    Moderator bcworkz

    (@bcworkz)

    There is a way, but it could be counterproductive. Images typically take up the bulk of the data used by a web page. If you preloaded all images, the page load time will be spent in mostly preloading and not dong anything about the rest of the page. You should not preload images that appear “below the fold” (off screen). Of course what’s below varies by one’s window size. You may need to experiment to see what delivers the best performance.

    To preload post thumbnails you’d do the same query loop in the head section that’s done in the page’s main content area. Except instead of outputting everything, you’d only output the preload link tags. Once you’ve preloaded the maybe 3 or 4 top images, exit the loop and reset the query. Only do this on the home page, you don’t want to preload images that do not exist on the current non-home page.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.

Tags