When I run ‘Check for Issues’ the two unsolvable issues: are lang and inline styles. Every style I did, styled for each. It says I have 700+ inline. It looks like a nightmare to fix. Ignoring it. However, the big picture is Accessibility, and that is easily fixed, and it will make you feel good when you attain 100%.
Link to the website?
1 Like
First, are you running Lighthouse in an incognito window? Here is the result I got for Desktop
The only Accessibility issues I see are missing titles on your iframe Twitter links. Missing link titles will have a trivial effect on SEO. But they can make it difficult for visually impaired people who use screen readers to understand that those iframe elements are links to Twitter.
I see no problems with your language declaration.
The SEO score is low because you have multiple rel=canonical declarations on the page, and one of them is different (https://ridgewoodchocolate.com/index.html) from the other three (https://ridgewoodchocolate.com). There’s no reason to have additional canonical links so I would delete these.
Your Best Practices hit is coming from the fact that you’re using an old version of the jQuery library. Make sure to use the latest version of jQuery. Go to File > Settings > Bootstrap > Bootstrap Settings and in the jQuery Version dropdown choose version 3.6.0
I wouldn’t even worry about the Performance score. There’s no appreciable difference between 94 and 100. Your site is interactive in 1.1 seconds. This is extremely fast, and better than 95% of websites on the internet.
2 Likes
Also, regarding the inline styles… while it’s generally considered “poor practice” among web developers, inline styling doesn’t hurt your website or SEO in any way. It just makes it a nightmare to edit (or for other people to edit.) You should try to avoid it from the start.
2 Likes
Thanks for your response
Where can I find the iframe in BS? I would love to have 100% Accessible.
BS ‘check for issues’ CFI: 11 pages are missing the lang attribute, even though it’s in the head. And a related issue, the canonical, CFI assures us that this will be handled, like sitemaps, automatically. I didn’t see BS put the canonical statement line in when I deliberately removed it. CFI highlights in yellow 717 inline styling issues. Show how to fix that. Thanks for your time.
You added them to your website with the Twitter widget you put on the page
Use the built in BSS feature to add your canonical tags…
If you style your website using the Attributes panel, the styling is added as inline styles. You should move your inline styles to one or more external stylesheets. See this post…
1 Like
iframe
the only place that could accept a title is in the Attribute section and src is grayed out and says:
where can I add the title to the twitter button?
If you’re using a widget supplied by Twitter, they are generating the link code on their end, so there’s no way to add a title. As I said, it’s a trivial concern. Link titles have virtually no effect on SEO, and basically just make it easier for people to understand what the link does. Since this widget uses an image with the the Twitter logo and the word “Tweet”, it’s obvious what it does. The only visitors who might have an issue understanding what the link does are visually impaired people using a screen reader.
You don’t need perfect scores of 100 on Lighthouse. Hardly any websites have perfect scores, and there’s virtually no difference between scoring 90 and 100.
1 Like
Thanks for the concise answer. It’s challenging to endeavor to make a perfect union between the publisher of a website and the end user.
You said it yourself: “The only visitors who might have an issue understanding what the link does are visually impaired people using a screen reader” Thankfully I’m not blind but I have empathy for them. I have to use an on-screen keyboard myself. That’s why I like BS. No coding.
How can I deal with this?
Thanks
Simply don’t use Twitter’s widget. Use Bootstrap Studio’s button/link component, style it by writing some custom CSS, and then get the link to your Twitter post and enter that in the Button Options. The Twitter bird icon is available in Font Awesome library (which is actually deprecated now that Elon Musk has rebranded Twitter as “X”)
I don’t mean to be unhelpful, but this post has progressed far beyond the scope of your original question, and in fact it no longer falls under the heading of “Bootstrap Studio Help”, so it the interest of keeping the forum tidy, I would suggest you post further questions in the Webdesign Help category.
1 Like
Not at all. There are numerous things you can do to improve performance, but you have to learn how to do these things. There are plenty of resources on the web that can help explain how to improve your Lighthouse scores.
Again, your website is scoring quite well as it is. Multi-billion dollar companies like Amazon and Facebook often have poor Lighthouse scores. And Lighthouse scores in general should be taken with a grain of salt. Google encourages developers to get their websites to rank high on Lighthouse because it actually benefits them in various ways.
The things I told you to do (update to the latest version of jQuery and remove the redundant canonical declarations will get you green in all categories. You will not even notice a difference between 94 and 100, and it will have virtually no effect on page rank.
2 Likes