Jump to content

ingrid.villamagdalen

Circle Member
  • Posts

    27
  • Joined

  • Last visited

Everything posted by ingrid.villamagdalen

  1. 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?
  2. 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.
  3. How 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
  4. Thank you, Christine, I will check this out. Ingrid
  5. 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
  6. Thank you very much for checking! And for all the help in the last few days! Kind regards, Ingrid
  7. 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>
  8. 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
  9. 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
  10. I'm a total beginner on custom code, but I did pick up that if you want something to be in front of something else, you have to give it an index to make it rank in front. In some examples they say to use index 99 (or probably it is .99) and in the code that I was given for my Back to Top button it was index 1 as part of the Custom CSS to keep it in front. In my "back-to-top button" code, this is the part of the button's Custom CSS that makes the button stay in front: z-index:1!important; This instruction is in a series of all other things such as font-size, color, padding, etcetera, just like you have a whole list above. But I know that this part about index regulates that the button stays in front of everything. It stays e.g. in front of my footer.
  11. Site URL: https://www.riverdaleruralholidays.com Hi all, this is the code that I have in my 7.1 site in the custom CSS for a floating Back to Top button and working well, with thanks to tutorials where I found this, as I am NOT an experienced coder. I am just copying basic codes like this button and when I can understand them I am making minor adjustments at the most. #back-to-top{position:fixed!important; bottom:14px!important; right:12px!important; z-index:1!important;opacity:.4;font-size:22px;color:white!important;padding:8px;} I added in a code block in the footer to make the button appear on all pages of the website, and I used the unicode character ▲ instead of the word TOP. This is the code in my code block: <a href="#page" class="sqs-block-button-element--small sqs-block-button-element" id="back-to-top"> ▲ </a> It's all working well, and looking neat, BUT NOW I NEED SOME ADVICE for the next step! I would like to set the distance to bottom to e.g. 164px (looks better if the button is not getting absorbed into the dark footer), but then I REALLY need to add FIRST that kind of Javascript that makes the button disappear when the page is at its top already. Assuming it is Javascript that does a thing like that? I already got some script kindly donated through a Facebook group found through a link here, but it did not work. Possibly because the target (id?) of the standard Javascript was not identical to the button name (address?) that I used in the code block on the page, and my attempt to make them identical did not work. I assume adding the script to the page header code injection was the right place for it? My website is www.riverdaleruralholidays.com if anyone cares to take a look. Pic below is how my button looks. Ideally, the button should not go further down on scroll than stopping just above the footer (I know how to adjust that, it looks good if I set bottom:164px in the Custom CSS) but then I want the button to disappear when the top of the page is in view and appear only when scrolling down. It now shows the button about halfway the viewport if the top of the page is already visible, so that looks a bit weird seeing it next to the first image on the page. So for now I left it set to bottom:12px. But even then it would be better if it appeared only when scrolling down as you don't need it when you are at the top of the page. Maybe I should add that I also have a smooth scroll instruction in the Custom CSS, not sure whether that could interfere? That reads html { scroll-behavior: smooth; } I would need some Javascript (I guess?) that is working from the names and id that my code in the code block already has, or a bit more instruction how to adjust if it is a standard code.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.