Does xara support (lazy loading) to help with page loading times? I would think this can be done in the image web Properties/Placeholder/HTML code (body) and or (head). What code is needed?
Printable View
Does xara support (lazy loading) to help with page loading times? I would think this can be done in the image web Properties/Placeholder/HTML code (body) and or (head). What code is needed?
This would need to be done by inserting code with a placeholder, I think. I am not sure.
A placeholder is a simple shape, a rectangle for example into which you add the code.
Acorn or one of the other members will have a more specific answer.
These sorts of things are always churning through changes.
The essence is as follows:
- Xara has yet to implement lazy loading.
- Browsers are becoming more compliant with the use of the attribute 'loading="lazy"' for images.
- There are workarounds.
You would achieve this best with the later XDA versions that support Image Filenames & the WebP format.
The approach would be to place all your lazy images on a lazy.htm page that ensures they are all uploaded as part of the website.
lazy.htm is never accessed directly.
Each image requires a unique filename, say, lazypicture.jpg.
Drag and scale your image onto its webpage.
In its Placeholder body, add code:
<img src='index_htm_files/lazypicture.jpg' width=100% height=100% loading='lazy' />
Although your design is showing the picture, it is not directly rendered.
The code ensures it is not loaded into the page until you start scrolling.
I find you always need a non-lazy image near the page bottom to stop the first lazy one loading right off.
Here is a simple example: Attachment 132644
To construct with earlier XDA versions, you may want to read the Thread https://www.talkgraphics.com/showthr...283#post623283.
I think it is the right time for loading='lazy' to be an image attribute that Xara handles without all this fudging.
Acorn
I have moved this thread to Xara Web Design Chat.
+1 in my opinion.Quote:
I think it is the right time for loading='lazy' to be an image attribute that Xara handles without all this fudging.
I know your xar is only a demo but wouldn't it be better to create the images at actual size in the lazy.htm page? In your demo the images are loading at only a third of their full resolution.
@Egg, thanks for the endorsement.
The pictures are full resolution of those on the lazy.htm page. These are 96dpi of the originals.
The rendered ones that you can see are the same resolution of those.
To get the fullest, original resolution, you would just have to rescale those on the lazy.htm page so to be their original sizes.
@96dpi, the camel image is 4000x3000px; I just added the master images to fit the page as not doing so might have disturbed others accessing the file.
This approach ignore Retina.
Acorn
I have created a very deep page with random images that lazy load as you scroll to the foot.
Use F12 > Network to see the images load.
The bottom Default is a click link to refresh to page and use a different random set.
The Xara download is around 150kB.
The images are a further 850kB and only during a scroll, one by one.
Attachment 132645
Acorn
Loved that Acorn, it's a great asset. Messed about with your xar file and produced a site that doesn't load random images as yours does but in a practicle use why would you apart from your example of how it works. It works excellently with delayed loading images outside of the viewport. Very impressed.
DEMO
This Thread started on 08/21/22 with: "These sorts of things are always churning through changes".
Now almost 2 years later I would like to ask whether the information on this is still up to date?
I was very pleased with Acorn's simple explanation of how to use it. I tried to answer the question with Google about what the XDA version is and whether I have it with my WebDesigner+.
But I couldn't answer the question -.-
My second question concerns lazy.htm
In the example with lazy.htm, the rectangles with the codes in the placeholders are very far apart. Is that mandatory?
Because if I put ALL of my lazy loaded images of the entire website into the lazy.htm, it will be a very, very long lazy.htm
Tessi, welcome to TalkGraphics.Quote:
Originally Posted by Tessi
To find your version, open WD+ and pick Help > About...
For me, I get "Xara Designer Pro+ 23.8.0.68981 SL x64 Apr 3 2024".
Xara has yet to implement loading="lazy" as a user-selectable attribute.
You stack and name your full size images in lazy.htm as you like.
You can place them in Layers for better control but do ensure the layer name is preceded with a exclamation make (e.g., !layer05) so that the images are still published even when the layer is hidden.
I stayed with JPEGs for simplicity but using WebPs would be better when you have 100s of images.
The implementation where the loading="lazy" is used needs that page to be quite long so that those not is the immediate viewport are not fetched.
In other words lazy load those below the fold. Ideal for SmartPhones as scrolling is an easy action to effect.
Scrolling near a lazy image usually then loads that in around 10ms so no one really notices it appearing, it is just there.
The concept is even more use when you have lots of YT videos. It works for IFRAMEs too.
I have never tried it for images that have Xara Web Animations applied so it doesn't solve everything.
Perhaps we should crowdnag Xara to implement it.
Acorn
Hi Acorn
Thank you very much for the nice welcome.
I have the version: Xara Web Designer+ 23.0.68981 SL x64 Apr 3 2024
Is this sufficient?
I have jpg images throughout the website that are displayed by a code in the htasses file in webp.
I hope that doesn't interfere with lazy loading?
And yes, Xara should have implemented lazy load long ago.
Others finally did it too.
Tessi
Tessi, your version is more than sufficient.
You'll have to explain what you mean by JPEGs coded in the .htaccess as WebP.
If you have ticked the WebP option in Web Properties > Websites > Include WebP images, then Xara publishes both JPEG and WebP so you can picked either as WebP is fully rendered in all major browsers for over three years now. Both filetypes are uploaded but are only used when called so you could pick 'n' mix.
Acorn
Perhaps this Acorn?:
LINK
Cheers Egg, totally no need for this for Xara rendering checks if the browser supports WebP and handles it from there.Quote:
Originally Posted by Egg Bramhill
Acorn
No Acorn. In your example file your placeholder specifically calls for a jpg image:
Therefore it will never load a .webp image, only the bear.jpg image. The script I linked to endeavors to call the webp file if the browser can handle it but if it can't (i.e. Safari) it loads the .jpg equivalent.Quote:
<img src='index_htm_files/bear.jpg' width=100% height=100% loading='lazy' />
Not that I've got that js script working via .htaccess though ;)
On the issue were you use the default.jpg
I believe it's pointless having all images lazy loading. You need to have images within the 'above the fold' load normally which is what I've done in my demo. The image tiger.jpg is not lazy loaded and all the others are.
I can't understand why you state these images need to be placed at the bottom, it appears to work fine if they are within the 'above the fold' section.Quote:
I find you always need a non-lazy image near the page bottom to stop the first lazy one loading right off.
DEMO
Egg, it may simply have been that I had no "real" images in my design and the web page or Google needed to get its teeth into something.Quote:
Originally Posted by Egg Bramhill
Of course, you would never waste processing time having images above the fold lazy loaded.
If your images are all external (a good thing) then simply remove loading="lazy" from the placeholder <img> code.
Acorn