Performance issues

Helpdesk SEO and Website Performance
1

Please note that the following questions may be linked.

  1. According to the documentation here Use custom HTML, CSS, and JavaScript code - Sitejet Help, it is indicated “Note that deleting a preset in Website Builder (CMS) does not automatically remove the embedded CSS or JavaScript code.”. So, how to make cleanup the non-used mixins to avoid shipping unused ones? Do I have to do it manually? If yes, then how to match the mixins to its preset?
  2. According to the documentation here Use custom HTML, CSS, and JavaScript code - Sitejet Help, it is indicated “You can also use the “Optimize” button to find unused rules and clean up your code.”. I cannot find the Optimize button? Please share a screenshot. Does this button clean the unused mixins also?
  3. What is the efficient way to remove unused mixins in Config code? Manually?
  4. After checking the website with Google Speed Insight, I noticed performance issues related to the unused CSS and JS (please check the following screenshot). How to remove unused CSS and JS?
  5. Also, it is recommended to use a longer cache life for resources (please check image below). How to change the cache duration in SiteJet for the following resources?

enable-longer-cache
enable-longer-cache972×423 30.5 KB

  1. Content reflow (CLS: Cumulative Layout Shift): I noticed this on the website I built, also on a new theme. Please check the following screencast and advise how to avoid this, as it is considered as one of the most annoying issues for user experience.
  • The first video is about the website I built: video 1
  • The second video is about a recent SiteJet Theme. You can see that this issue is only visible when clicking on the “Team” menu : video 2
2

Hi!

  1. Not really sure if there is a best practice.
  2. Don’t know.
  3. Not really sure if there is a best practice.
  4. This is just a recommendation … it was discussed before, see here: Lighthouse / PageSpeed - Unused JavaScript
  5. This is just a recommendation … 10d to 30d is more than enough
  6. I’m not able to reproduce the issue on the template you’ve mentioned.
    On your site from the screen recording, it looks like you are using a lottie animation. Just make sure that the lottie animation container has a specified width+height.

Hope this helps!

1 Like
3

Hey @AJ_Joe - you are able to manually remove the mixins that are not used. But please be aware. If there is a preset still on the website that uses these, the preset will be damaged.

We did remove the Optimize button moments ago. The respective article has to be updated yet. Thank you for pointing this out to us!

Regarding your fifth and sixth point - the lazy load was activated. Therefore, the images are reloaded. Hence, the delay. We do recommend it is best not to use them in the banner.

4

Hi @Lucian_Dinu, thank you for your reply.

1, 2 and 3: thank you, I guess @Andre got the answer.
4. I checked your post. I understand your point of view. But at least we need to get rid of non-used components. I will get back to this point once the mixins are cleaned up.
5. Good to know. According to this page Aproveitar o processo de cache do navegador  |  PageSpeed Insights  |  Google Developers, the recommended minimum cache time is one week and preferably up to one year.
6. You are right, you can no longer reproduce it (Team - Nolan-Bahler Lawyer (de.rs)). I can no longer reproduce it either. I guess it is fixed. As for the used image, it is an animated SVG image (not a lottie) embedded in an HTML element. Please check this new video taken with a throttled network. You can notice that the image is loaded correctly, but there is a block right above the image that changes the size while loading.

5

Hi @Andre, thank you for your reply.

Regarding 1, 2 and 3: so in order to remove unused mixins manually, is there a way to identify them? Do I need to search them by IDs?
It would be great to clean unused mixins in a click of a button, as we may experiment things and then change our mind. Why did you remove the optimize button? Would it be possible to add this feature again?

Regarding 5: is it possible to change the cache time for specific SiteJet site through our editor?

Regarding 6: I don’t get the relation between the image lazy loading and the content reflow. Do you recommend not using images in the banner section?
Please check the new video taken with a throttled network. You can notice that the image is loaded correctly, but there is a block right above the image that changes the size while loading. Based on what I can see, I think it is not related to the use of the image, as it is loaded correctly.