Help with improving PageSpeed Insights results

I do not think this is the main problem. Your site suffers from YANGNI. I interpret that you download files that you either not use or may be use a only tiny bit of.

For an example you download jquery, but you only use 30 percent of this “framework”.

So this is the main reason for your slow speed IMO. And the carousel you only use about 20 percent. But still you have to download all dead meat.

What about the images size , i been doing some tweaking in the website also found the file size is making a difference too and i want to ask if there is any place where i can compress the file by alot without losing quality ?

Almost all big images are already .webp, so IMO this is not the main problem. I think you should focus on

  1. Reduce the unused jquery and the carousel (look at the previous map)

  2. Not loading assets over internet. Move them to your server for less loading time.

  3. Try to figure out if you need all stuff. Can it be made simpler and faster?

Just comment out carousel and jquery and see if it will load faster…

Did some changes but when goes down to the jquery , half of certain functions are not being used and i wonder if deleting those wouldnt mess up with things ?

d

Maybe. I should not delete the code. Start with just /* hide the code */. Then you can uncomment if it not works.

I don’t think messing around with the jquery code is a particularly good idea. You’re talking thousands of lines of quite complex code. That and what happens when you need to update jquery in the future?

It also seems a bit like overkill to me. Surely you should be able to have an efficient website with jquery.

Alternatively, if you do want to cut back on jquery, then you could consider cutting it out completely. Look for a carousel that isn’t dependent on jquery like glide or glider. Doesn’t bootstrap have a built in carousel as well?

From a quick scan of your custom code, the only other use of jquery is for an animate feature. You could possibly look into a javascript and/or css alternative.

That’s my take anyway :slight_smile:

1 Like

I agree. Even better is just to skip loading the Jquery library. And then run the pagespeed.web.dev. If it loads faster without Jquery, then focus to replace Jquery with smaller vanilla Javascript. Otherwise look into the carousel as a next step.

The loading time is the problem. Not the Jquery itself. So loading 70 percent obsolete code may or may not cause the slow LCP. Skip loading Jquery is just a way to find out if this is the problem.

1 Like

Sorry I missed the point. A process of elimination :slight_smile:

Quite weird , seems Jquery didnt exactly solved the speed because , although it went from 84 to 87 score still getting the low speed

Well, from 13 to 3 indicates that it loads LCP 3-4 times faster now. And the speed index is 20-25% better, from 5 sec to 4 sec.


But if you look at all the redundant code (red) that is loaded in many files this indicates that you have some more work to do. It is almost never only one thing you have to polish.

Next thing to explore is the carousel. Do not load this library and look what score you get.

Then you can look at all libraries that is almost completely red (minimal usage).

Its been quite challenging to figure out how to do this jquery thing since i want to finish this as soon as possible. The lcp might also be because i reduced a bit the size of the image

https://code.jquery.com/jquery-3.7.1.slim.min.js"
  integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
  crossorigin="anonymous"

Found this jquery version and it did made a difference in speed for sure

2 Likes

I think the only issue you will have with that, is that it doesn’t include the animate module — I could be wrong.

As mentioned before that could possibly be substituted with a bit of vanilla JS and CSS.

1 Like

Ah ok , i might need some help with doing that because i dont have much or any experience with that type of thing

I replaced the jquery for glider library , is it a good option ?

I have been looking at both glide and glider in the browser and mobile, and glide seems the more polished of the two. In fact with glider, I couldn’t even scroll down through the examples page.

In glide when you swipe it scrolls to the next image, snapping into position. In glider it scrolls just like a scroll bar, without any snapping.

So just from viewing the examples, personally I would lean towards glide instead.

1 Like

Nice it works , for the other pages do i have to replace them with the glide even though they dont use carrousel or what options would i have in there ?

In answer, you only need to import glide on pages that have a carousel. glide is not a multi-purpose library like jquery, it is a standalone module/script that has the single purpose of creating sliders/carousels.

If you only use it in one page, do not import it on pages that not use this library. It is redundant code that slows down other pages IMO.

I understand , so even with the glide i am getting around 5s of speed index in page insights , what could i be missing ?