How to remove Shine.js Library for shadows

Hi there,

thats not being loaded by GP - and i checked the front end of your site and i cannot see a request for that JS library being loaded.

Thank You @David for the confirmation, much appreciated!

So Shine.js is not being loaded by GP and cannot be seen on my site.

I'll report that to Ezoic.

Many Thanks!

Thats correct - GP doesn't load any JS libraries ( aside from jQuery and thats only for sticky navigation ). And I cannot see it in the network requests.

Glad to be of help.

Thank You @David,

In regards to jQuery, I have noticed in one of your replies here: https://generatepress.com/forums/topic/javascript-libraries/page/2/
Where we can enable sticky navigation via CSS instead of JQuery.
Do you recommend going with that approach (disable jQuery and set it with CSS)?
I have sticky navigation enabled for both Desktop and Mobile.
We all know that jQuery has an impact on performance.

Thanks!

To note - other plugins MAY require jQuery - its worth checking first to see if jQuery is still being loaded after disabling the sticky navigation is disabled.

Thank you @David, I will check other plugins before removing jQuery.

Coming back to Shine.js shadow topic. I have checked back with Ezoic and they are assuming that the shadow is coming from the Featured Image.

They found this CSS class that is responsible for the shadow on the image, do you know where this class comes from?
They may be wrong about shine.js coming from here, but so far this makes the most sense.

.page-hero.overlay {
    -webkit-box-shadow: inset 0px -180px 83px -15px rgb(0 0 0 / 75%);
    box-shadow: inset 0px -180px 83px -15px rgb(0 0 0 / 75%);
}

If I remove .page-hero.overlay in the Google Chrome browser under Elements | Styles, the image will look nicer.

.page-hero.overlay {
    /* -webkit-box-shadow: inset 0px -180px 83px -15px rgb(0 0 0 / 75%); */
    /* box-shadow: inset 0px -180px 83px -15px rgb(0 0 0 / 75%); */
}

I am not sure if I mentioned to you before that I worked with Codeable to migrate my site to GP.
They set for me this overlay shadow on the featured image because the title of the article was coming on top of the image directly. To make the title readable, they set this shadow dark color. Which I don't like to be honest but was no other choice they said.

After we worked together on a previous topic by trying to improve the Largest Contentful Paint element here: https://generatepress.com/forums/topic/how-to-fix-largest-contentful-paint-element-for-page-hero/page/3/#post-1822784
The title of the article is now below the featured image. So I would like to remove .page-hero.overlay shadow color completely and keep the image as it is. Could you please advise?

In between, Google PSI is still complaining about div class="page-hero grid-container grid-parent overlay"> for the Largest Contentful Paint element, so I am not sure if by removing .page-hero.overlay, we'll get rid of this message from Google PSI as well.

Many Thanks, @David!

That is pure CSS, native in all browsers - it doesn't require any JS libraries to render that.

The .page-hero is the element class for the Header Element. And overlay is custom class that was added to the Element Classes field in the Header Element editor.

All you need to do is delete that CSS Rule, i am not sure where that was added but i would check in Customizer > Additional CSS.

Removing that CSS or removing the Element Class won't change Google reporting that element as the LCP.

Thank You @David, much appreciated!

I have found it out in Additional CCS.

I have commented out the following CSS code:

Could you please confirm if I should remove the .gradient-overlay and .gradient-overlay:after as well.

/* Page Heros 
.page-hero.overlay {
    -webkit-box-shadow: inset 0px -180px 83px -15px rgba(0, 0, 0, 0.75);
    box-shadow: inset 0px -180px 83px -15px rgba(0, 0, 0, 0.75);
}

.gradient-overlay {
    position: relative;
    z-index: -1;
}

.gradient-overlay:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(3, 89, 155, .5)), to(rgba(14, 161, 234, .6)));
    background: linear-gradient(rgba(3, 89, 155, .5), rgba(14, 161, 234, .6));
    z-index: -1;
} */

Thank You!

It doesn't look the gradient-overlay is being used anywhere so you can remove that too.

Many Thanks, @David, much appreciated!

Yes, I have noticed that nothing changed after removing gradient-overlay.

Reducing unnecessary CSS code will help.

Thanks!