ingrid.villamagdalen
-
Posts
31 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by ingrid.villamagdalen
-
-
14 hours ago, Elfsight said:
Hi @ingrid.villamagdalen👋
You are absolutely right, our lazy loading code is generic and can be applied to different widgets.
Thank you, Elfsight, for confirming the lazy loading instruction can be added to other widgets. 😊 The widget ID in the example was my all-in-on-reviews widget, and I also added it to the button app.
-
On 3/29/2023 at 7:31 PM, Elfsight said:
Hello @ingrid.villamagdalen!
We are so sorry that it took us so long to reply.
We'd like to tell you that We’ve implemented a new lazy loading feature, which will help you significantly improve Google Page Speed Score.
You just need to add the “data-elfsight-app-lazy ” attribute to the<div>
element of your installation code.For example, here’s how your installation code will look:
<script src="https://apps.elfsight.com/p/platform.js" defer></script> <div class="elfsight-app-ded99e30-0d1b-4a72-bd96-4b74038add44" data-elfsight-app-lazy></div>
You can find more details in this article: https://community.elfsight.com/t/you-now-can-improve-your-pagespeed/2562
If you are still having issues with your page speed, please send us a direct link to your webpage. We'll be happy to check things for you!
Regards,
Elfsight TeamExplore all Elfsight widgets — Widget Catalog
Communicate and learn — Elfsight Community ForumHow nice to get the reply from the @Elfsight Team here on the forum! I was just thinking I'd need to contact Elfsight for a deferred script, but then Circle member @Digitalfreelancer checked it for me and told me the Elfsight widget was already correctly set for deferred loading, straight out of the Elfsight box (just the standard of the widget code downloaded from the Elfsight website).
But if you now recommend adding that last bit of lazy loading code before the closing <div>, then I will add that too. I assume this is generic and will work on all Elfsight widgets? I use 3 or 4 different Elfsight plug-ins.
I use the pop-up widget (although at the moment no pop-ups are active on my site), the click-to-call widget on 2 different pages, and a simple floating button widget (made into a 'call-us' feature).I have experimented on my copy site to recreate the call button without using a plugin, and created a native Squarespace CTA button and fixed its position with custom CSS. That worked indeed, but not perfectly on all pages. On some pages, I seem to have a Z-index problem where the button disappears behind specific sections. Looks like the last section of the page, or a later added section has priority in the Z-index, and then it helps to place the button in the section with the highest rank in Z-index. It doesn't work to just give the button the highest Z-index, and it needs creating a button on every page. So I would rather keep the Elfsight plugin as the active button if I can be sure it's not impacting my page speed.
It's the button sitting next to our chat button (Chatra) on all 37 pages of the website. With kudos to Elfsight for how easy it was to customise the looks and the positioning of the Elfsight button in their standard settings so I could create a look-alike of the chat button that had little or no customisation options. The last thing to look at is that Google keeps nagging me that one picture has no alt attributes. It's the little phone icon on the button. It should have an empty attribute alt=" ". So I should still ask Elfsight how to add that 😊.Otherwise, I have optimised everything I could think of, adjusted my picture sizes to be just right for mobile (85% of our users), and even settled for a little less quality on desktop, but I still can't get more than a score of 30-32 on Google Page Speed insights for our homepage (on mobile). It's www.riverdaleruralholidays.com.
Kind regards,
Ingrid -
19 hours ago, ChristineDarby said:
Hi @ingrid.villamagdalen Unless paid, the links are fine and it looks like you are providing useful info, but the page does need proper structure and title. In general, the site needs some design and structural tweaks for better performance. If you book a short session, I can walk you through my recommendations.
For anyone who does need to qualify an outbound link you can use a markdown block. And you can use a site wide solution when appropriate. More info here: https://developers.google.com/search/docs/crawling-indexing/qualify-outbound-links
Thank you, Christine, I will check this out.
Ingrid
-
LINKS: FOLLOW and NO-FOLLOW
Can anyone tell me how to change an outgoing link from follow to no-follow?
I have a huge number of links on one page of the website www.riverdaleruralholdays.com as this is a page about all the attractions and things to do in the area around our holiday business. Probably 60 links on one page (URL /lots-to-do) as a service to our guests. But it distorts the balance between backlinks incoming and outgoing and is marked as a shortcoming in our SEO reports.
The advice was to change a part of the links into a no-follow link, but I do not know how to set this. I created the links simply by going to the website of each attraction and copying their URL, and then entering this in a simple text link with the Squarespace text editor. And some are links on pictures, but most of them are just paragraph text. Any suggestions or ideas where I can find more about this would be welcome!
Kind regards,
Ingrid -
-
On 3/24/2023 at 11:59 AM, digitalfreelancer said:
I concur with Creedon. Providing your images are well-optimised and your 3rd party scripts are deferred, you've done everything you can.
Thanks for that. But does the 3rd party script of the Elfsight plugin that I have on the homepage look like a properly deferred script? It's a script in a stand-alone code block on the home page that (as far as I understand) does not rely on any scripts in the code injection.
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-ded99e30-0d1b-4a72-bd96-4b74038add44"></div> -
5 hours ago, digitalfreelancer said:
Hi Ingrid,
In the gallery reel the image is not loaded until it appears on the screen. And I'm pretty sure that's the case for all images on the site - they don't load until they become visible on the screen by just 1 pixel as I've had this problem before for clients with lots of images.
You can see here, this is the next image in the reel on your for-your-dogs page:
There is no image src so technically that image file has not been loaded in to the browser yet. When I click the arrow so that image becomes visible:
You see the image src has loaded.
Images can be forced to load earlier with some javascript if that's what you want, but it's not simple enough to share here. Send me a DM if you'd like a quote and let me know if you just want this feature on the gallery reels or also on other galleries and images that appear as you scroll down the page.
Andrew
Thank you very much, Andrew, for the clear explanation! We have problems with the loading speed (homepage now scoring for mobile at around 30 on the Google Page Speed Insights) and then the report gives links and instructions to inspect the issue. Doing that, it looked like all images were loaded at once. But your test shows Squarespace does defer the loading of pictures outside of the viewport! Big relief. I have a Gallery Reel with 20-24 pics as the first section of nearly every page because I assumed that this was a good way to show lots of pictures without loading more than one at a time on mobile. So a bit of a panic when I looked at Dev Tools. But probably didn't use it correctly. So, thanks 🙏 for letting me know the images are set to lazy loading already by Squarespace! I don't need a script to load them earlier as I would prioritize saving on loading time and I'm not bothered if a user can just notice the loading process on a slow connection.
In general, it is difficult to find out what we DO need to look at when we get these red alerts from Google PageSpeed Insights and what is already arranged to work properly by Squarespace, or out of our control.
Via your profile and your previous comments, I also found an announcement made by Squarespace employee Tom to all Circle members on 22 September 2022 about a lot of improvements for loading images and deferring scripts and the post said this was to be rolled out gradually (and probably done by now?).
But nevertheless, the report that I get on Page Speed Insights for our homepage www.riverdaleruralholidays.com shows that 3rd-party script is causing huge delays, and I know the main culprit is the plugin from Elfsight that is pulling in all our reviews from Tripadvisor, Facebook, and Google Reviews. The report tells me this script is causing a significant delay. Is this also a false alarm because Squarespace already takes care of deferring that script? I placed the section for the reviews on purpose well below the fold and the script itself seems to have a deferred loading instruction (if I read this well). This is de code placed in an on-page code block:
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-ded99e30-0d1b-4a72-bd96-4b74038add44"></div>
Another script is the call-button (also a widget from Elfsight plugins) that sits side-by-side with the chat-button. The call button could probably be created without an outside provider if it is possible to change a standard Squarespace button into a floating button with custom CSS which would (I guess) impact less on loading speed than an extra plugin from a 3rd party. Is that a valid thought?
According to the Google Page Speed Insights report, I also seem to have multiple libraries that maybe should be combined, but not sure how to check this or do this. So we are indeed looking for help from a developer specialised in Squarespace to help me out on these hurdles.Kind regards,
Ingrid -
I am trying to find out if Squarespace 7.1 uses lazy loading by default or not. Is it only for section background images as mentioned in this thread? Or on standard images as well? And I would specifically like to know how the loading works for a Gallery Reel section.
I have on top of most pages of our website a Gallery Reel that scrolls horizontally with the use of arrows (or swiping on mobile). On mobile, only the 1st mage s in the viewport and it seems like I can see a little delay in loading the next image when on a slow connection, so that would mean lazy loading is active? However, researching now with the pointers from Google Speed insights (as my Page Speed is far below what it needs to be) and inspecting with Dev Tools, it looks like ALL the 20 or 24 images for the Gallery Reel are preloaded instantly before rendering the page, so no wonder that our page speed is dramatically slow. But just observing the image behaviour, it looks like a lazy-load mechanism. Does anyone know the details of lazy loading in Squarespace? There is indeed nothing to be found on the subject! Anyone from Squarespace who can tell me more?
Also interested to know more about the plugin mentioned in this thread
https://sqskits.com/plugins/lazy-loading-images-for-squarespace
I contacted them (waiting to hear back) for more specifics and especially if it would work for the Gallery Reel as the plugin is likely based only on vertical scroll to keep images from eager loading and not recognising the images of the Gallery Reel are outside of the viewport with a scroll horizontally.I have a Gallery Reel as a first section on 25 out of the 36 pages of the website www.riverdaleruralholidays.com, and you can see it on e.g. the pages www.riverdaleruralholidays.com/for-your-dogs,
www.riverdaleruralholidays.com/walks.
Kind regards,
Ingrid
7.1 background image lazy loading - how to stop it
in Fonts, colors and images
Posted
Thank you! No more comments about a missing alt attribute in the test by Google Insights! They are now indicating it's one of the images where I could save further, together with the 3 opening images, but that's very theoretical as these are really at their lowest limit for further size reduction. For desktop, they are actually already too small.
But Google Page Speed Insights now gives me 100/100 for SEO. Don't think I changed anything else on that front, so apparently, the missing alt-attribute was counted heavily, as it was SEO -score 95 and now scores 100 😊.
Looks like speed is the only thing that is still poor, but if I run our competitors through the test, then most of them score even worse 😊. Is it even possible to get that approval, or is it normal to see 'Failed' for Core Web Vitals?