Archived topic
Enabling Navigation Search causes increase on Cumulative Layout Shift (CLS)
3 replies · Started by André on May 15, 2021
Hello,
I'm making some changes in my site (footer, navigaiton, etc) and I noticed that when I enable "Navigation Searc"h in the Customizer the CLS increases by 0,06.
The image in GTmetrix looks like the icon moves down from the navigation itself (but this does not happen in the frontend)
- Imagem https://tinyurl.com/yhbr2xb8 (see red square)
- GTmetrix report https://gtmetrix.com/reports/www.tempodeviajar.com/yTghwcT6/
I was playing with navigation widths but the search icons always stays totally right aligned.
Any idea what the problem is and how to solve it?
Thanks,
André
Hi there,
the logo loading is shifting the navigation on load, see Tom's reply here:
https://generatepress.com/forums/topic/logo-does-not-have-explicit-width-and-height/#post-1762272
As a suggestion you may also want to give the nav a little more space, by either reducing the menu item spacing or font size, as currently your navigation just fits the width of the container, reducing those sizes will give it a bit more breathing room.
Thanks David!
That code snippet worked very well and reduce the CLS to 0. The 0,01 I had before (I understand now that it was coming from that navigation shift) is also gone.
As I understand from Tom´s reply above, I guess this snippet fix can be deleted once GP Premium 2.1 comes out. Right?
Also, I have followed your suggestion to give a bit more breathing room inside the navigation container and all looks good.
Take care,
André
Awesome
GPP 2.1 - may eliminate the need for that code - we'll add it to the Changelog when thats released. If you want just raise a topic when 2.1 is released to confirm :)
Glad to be of help
