Gabriel Torres

Hi there,
We are seeing some users here in our community who are creating topics and immediately marking their single post as solution. We guess they are doing this only to get attention.
So my suggestion is to improve this feature by not allowing the topic author to mark the first post in a topic as solution. The user would still be able to mark other posts (including his own) as solution in the topics he started, just not the first one.
See if that makes sense.
Thanks.

I am not a Mac user, so I haven't tested this yet.
It depends on the market. Our website is specific for a single country (Brazil), and as mentioned, only 6.86% from our users use Safari.

After researching about this, browsers have now native lazy loader. We only need to edit the templates to add:
loading="lazy" To all img tags.
I edited the following templates:
core > front > global
reactionBlurb
reactionLog
reactionOverview
reactionTabs
reputation
userPhoto
userPhotoFromData
This enabled lazy loading for user photos and reactions, and the "Defer offscreen images" warning from Google Lighthouse is now gone! 🙂
(I also made the same edit in my cms custom templates)

So you can safely add this attribute in an upcoming release for Profile Pictures and still keep "native lazy loading" for other images until Mac adds support (If tey ever do). I think that's a good solution.

It's an extra attribute on the image tag, if a browser does not understand it, it will be ignored. It won't break anything.

It really works guys!
Before (unmodified template)

After add lazy-loading attribute to

It really works guys!
My test:
 

@Gabriel TorresI turned on RocketLoader a month ago. There is a readable difference in loading speed, I recommend it to anyone! So far no problems. Additionally, I turned on HTML compression to get rid of those ulgy spaces from the document source. A month of testing, and so far everything is fine. 👍
Unfortunately, it is impossible to avoid all errors and warnings in PageSpeed Insights.
Everyone knows that on a simple HTML page anyone can get 100 score, but IPS is a complex software and there is no chance to get 100 🙂 I see that you squeezed a lot anyway, good job 👍

Score for invisioncommunity.com is really low as well: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Finvisioncommunity.com%2Fforums%2F
Did small fixes here and there, but I see that "Eliminate render-blocking resources" could be a place to improve. https://web.dev/render-blocking-resources/
@Mopar1973Man See how our CLS was completely fixed after we added a height to the Google AdSense tags here:

After researching about this, browsers have now native lazy loader. We only need to edit the templates to add:
loading="lazy" To all img tags.
I edited the following templates:
core > front > global
reactionBlurb
reactionLog
reactionOverview
reactionTabs
reputation
userPhoto
userPhotoFromData
This enabled lazy loading for user photos and reactions, and the "Defer offscreen images" warning from Google Lighthouse is now gone! 🙂
(I also made the same edit in my cms custom templates)

I fixed everything that I could. There are only two types of errors still there. One related to a plugin we used (already contacted the developer abou that) and another that is related to the addition of a "type" parameter in Javascript tags. This is done by CloudFlare's RocketLoader. Some people suggested here that I disabled RocketLoader, however, doing that our website loading time skyrockets, as you can see below.

 

This addition removes the PSI report, but it does not speed up your site. Check out this test -
https://www.webpagetest.org/result/210113_DiWQ_fa63b920353923e9e4245a191ee25087/1/details/
your mobile images are loaded ahead of time "onload" - and the point of delaying loading images is when images are loaded after "onload" time ... Lazy load that is embedded has a fixed delay time loading images - which is enough and works well for desktops, but not enough time for mobile. This mobile time should be greater than 2 seconds for mobile image loading to be effective.
Also - there are many errors in your templates when validating html5 -
https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.clubedohardware.com.br%2F
You are using CDN, but in order for your site to run much faster for your visitors, I think you need to follow these steps:
1. Stop the CDN
2. Remove all errors when validation html5
3. Optimize your site - as much as possible (there are many techniques you can do).
4. When you achieve good results from PSI (over 65 for mobile) - you will have a fast enough site.
5. Activate CDN - it will be even better.
If I'm in your place, so I would do ...

Fully Agree. I tested a lot of fonts some time ago. The default font is similar to "Roboto". Except that Roboto is thicker and clearer. But default font is perfectly sufficient and loads immediately.
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";  
I use Roboto (many top sites use it from my observations) but not from Google servers. I uploaded the font to my server and redirected it to CDN.
Here's the tool https://google-webfonts-helper.herokuapp.com/fonts 
is good because you don't have to load all the charsets, you load the ones you use on your forums like latin-ext which translates into faster loading.

After researching about this, browsers have now native lazy loader. We only need to edit the templates to add:
loading="lazy" To all img tags.
I edited the following templates:
core > front > global
reactionBlurb
reactionLog
reactionOverview
reactionTabs
reputation
userPhoto
userPhotoFromData
This enabled lazy loading for user photos and reactions, and the "Defer offscreen images" warning from Google Lighthouse is now gone! 🙂
(I also made the same edit in my cms custom templates)

@Adlago I simply added loading="lazy" to img tags from reactions, user photo, and custom blocks/templates from cms. Working like a charm here. BTW user count accessing our website using Safari is currently only at 6.86%. 
 
 
 

Thanks @SeNioR-. BTW I simply updated our themes to use the default font, this way we don't need to load these fonts from Google in order to improve page load performance.

I added a font-display property about a month ago to get rid of warnings. So far there have been no problems.
 
As for the font from Google, Google already uses a new code. IPS needs to update it.
<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,500&display=swap" rel="stylesheet"> Google added display property at the end.

Agree, explanation is here.
 

After researching about this, browsers have now native lazy loader. We only need to edit the templates to add:
loading="lazy" To all img tags.
I edited the following templates:
core > front > global
reactionBlurb
reactionLog
reactionOverview
reactionTabs
reputation
userPhoto
userPhotoFromData
This enabled lazy loading for user photos and reactions, and the "Defer offscreen images" warning from Google Lighthouse is now gone! 🙂
(I also made the same edit in my cms custom templates)

This should be easily fixed by adding a <div> with height parameter around your Google AdSense code:
<div style="height: 250px"> [your google adsense tags] </div> Thanks @Mopar1973Man and @ptprog for all the pointers. I will take a look into all that was said and get back to you. All I need now is some spare time... LOL

CloudFlare has its own setting for this:
I configured it for 1 year and now it is working as you suggested, Many thanks. 🙂
 
@Adlago I had to move the preload link for the fontawesome to the <head>, because at the bottom Google Lighthouse wouldn't recognized it and would say that I needed to preload it, even though the preload tag was present.

Score for invisioncommunity.com is really low as well: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Finvisioncommunity.com%2Fforums%2F
Did small fixes here and there, but I see that "Eliminate render-blocking resources" could be a place to improve. https://web.dev/render-blocking-resources/
@Mopar1973Man See how our CLS was completely fixed after we added a height to the Google AdSense tags here:

Added lazy loading to users' photos, reactions, and custom cms templates. This fixed one of the issues listed in our report.
 
 

Just bumping this to say that I've been trying to optimize our website with Google Lighthouse, and one of the suggestions is that we enable lazy loading for the user uploaded avatars. See below. So +1 for enabling lazy loading on users' avatars.

font-display: swap won't really give any benefit to that particular font since it's used for icons - there would be no system font it can use temporarily. We can certainly experiment with font-display: block and see if that would improve how lighthouse sees the page though.