- This topic has 13 replies, 3 voices, and was last updated 3 years ago by David.
-
AuthorPosts
-
February 23, 2021 at 9:54 pm #1670135David
Hi,
Would you mind advising if there is any obvious cause for the following issues please:
CLS issue: more than 0.25 (mobile)
LCP issue: longer than 4 s (mobile)The web address is http://www.darkstories.com.au
Any advice will greatly appreciated.
Kind Regards
DavidFebruary 24, 2021 at 3:02 am #1670374DavidStaffCustomer SupportHi there,
lets see if we can fix the main CLS issues first by adding some height/width attributes you your mobile logo – this post explains how:
https://generatepress.com/forums/topic/how-to-set-height-and-width-for-the-logo-image/#post-1563234
February 24, 2021 at 1:59 pm #1671251DavidThanks David, I have made the change. Can you recommend the best method for validating whether the change has taken effect?
And I’m sorry for not reporting this in the first instance, but the issue also exists for desktop:-
CLS issue: more than 0.25 (desktop)
LCP issue: longer than 4 s (desktop)Would you have any recommended approach for this as well please?
Kind Regards
DavidFebruary 25, 2021 at 1:06 am #1671703DavidStaffCustomer SupportThat code did work as the Logo image now has some height/width attributes. But made no difference to either of those metrics. Theres quite a bit of work to do here.
First off I noticed you have this CSS:
/*Stops Pages Displaying the Page Title */ .page .entry-header { display: none; }
Remove that as the SG optimizer is loading that CSS later causing the title to be display and then removed from the page. Instead use the Layout Element to disable the Content Title:
https://docs.generatepress.com/article/layout-element-overview/
You can set the Elements Display Rules to Pages > All Pages.
February 25, 2021 at 2:54 am #1671828DavidHi David, thanks for that- I think I’ve made that change successfully.
Regards
DavidFebruary 25, 2021 at 8:18 am #1672427DavidStaffCustomer SupportHmmm… seeing more CLS issues related to the Post Grid ( Book Now ) listing and other elements. It looks like the CSS for those page elements is being deferred ie. loaded after the page has been displayed.
Are you using any optimization plugins ? Or is there any server side optimizations going on ?
February 26, 2021 at 12:36 am #1673274DavidHi David,
Thanks for your message.
I have the Imagify Plugin for the purposes of optimizing images and using a webp version of the image files. Not sure if that is relevant.
I don’t think there’s anything server side; I’d be very wary of setting anything in that space. The site is 4 years old and has gone through 3-4 redesigns, so I can only say I don’t think so.
With regards to the various pages with Book Now references, I do have some page-specific CSS for rendering a png bullet point image and aligning bullet points, as well as controlling the screen size rendering i.e.- from memory, large tablets & laptop screens were rendering in mobile format originally.
The book now pages also have a single iframe reference, that links into a booking system, that I simply have no other way of getting around.
Using a single page as an example http://www.darkstories.com.au/maitland/
I have created a duplicate test page without the page specific css at http://www.darkstories.com.au/headline-of-the-day/
Not sure if that will help diagnosis in any way? Or is there a method for pre-loading the page specific css?
My apologies- this is more than I expected to be reviewing. I am so sorry.
Kind Regards
DavidFebruary 26, 2021 at 11:02 am #1674160TomLead DeveloperLead DeveloperHi there,
It looks like you have WP Super Cache enabled on the site (can see the HTML comment in the page source). It would help you/us test if that was deactivated.
This sort of thing is difficult for us to troubleshoot, as it’s likely that 99% of it is coming from your content/other plugins.
Out of curiosity, how does a page with nothing but a regular block of text test?
February 27, 2021 at 6:33 pm #1675561DavidHi Tom,
Thanks for your message.
I have deactivated the WP Super Cache Plugin, and have set a basic block of text on my test page here:- http://www.darkstories.com.au/headline-of-the-day/
Anything obvious that you can spot will be gratefully received.
Best Regards
DavidFebruary 28, 2021 at 5:05 am #1675873DavidStaffCustomer SupportLooking at the front page without the cache enabled – the largest CLS issue is related to the plugin that is creating the rows and columns …. you may want to try replacing that – have you thought of using the Block Editor and GenerateBlocks plugin instead ?
The LCP element is due the to background image on your main container – the image files is over 800kb.
February 28, 2021 at 4:20 pm #1676610DavidHi David,
Thanks for your message and assistance.
Re: CLS; I tried using Block Editor and GenerateBlocks previously when initially released, and had massive problems at the time. That being said; it’s probably time for me to revisit it as a solution/tool that can also contribute to resolving CLS issues.
Re: The LCP image; I have made a change to reduce the size of the background image which may help a little, and I’m also happy to switch it off for the mobile layout. I have added the below CSS to no effect; could I trouble you one last time to take a look at this CSS to possibly advise what’s missing please?
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
body{
background-image: none;
}
}/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
body{
background-image: none;
}
}/* Portrait phones and smaller */
@media (max-width: 480px) {
body{
background-image: none;
}
}Best Regards
DavidMarch 1, 2021 at 2:08 am #1676926DavidStaffCustomer SupportThe image is actually added to the site content so try this:
@media(max-width: 768px) { #page { background-image: none; } }
March 1, 2021 at 4:10 pm #1678030DavidThanks David, you guys makes things seem so easy. Appreciate all the help.
Best Regards
DavidMarch 2, 2021 at 1:22 am #1678372DavidStaffCustomer SupportGlad to hear that !
-
AuthorPosts
- You must be logged in to reply to this topic.