Forum Replies Created
-
Posts
-
THP thanks for the suggestion.
If the text is the LCP element try serving your fonts locally and adding preload to the header file (you can do this from functions.php). This will help prevent CLS shift and improve LCP and FCP scores in most cases. If you download the fonts you can use cloud convert to convert a .ttf font to a .woff2 which is much smaller.
I think one of the issues is that when CSS is merged into one file, the page layout is unavailable until this loads – Meaning that any calculated image sizes like the logo with Srcset wont render until the browser gets the size info from the CSS file. The only way around this is to generate critical CSS.
I have tried Jetpack Boost to add critical CSS (new plugin from the official WordPress team). This should fix the problem but I need to experiment more with it yet. Ironically I also tried inlining all of the CSS so there were NO CSS FILES and this actually reduced LCP to a pass score of under 2.5 seconds! But not best practice given the 100kb of CSS in the theme! The TTI score got a lot worse!
Try using Jetpack Boost if you are not already using a plugin that generates critical CSS.
Regarding Doodles Of Art – When you open Chrome it will always load in desktop mode. Even when using dev tools. So it will already have the larger image saved in cache when using dev tools to change screen sizes. If you run Lighthouse in mobile mode – It does render a smaller logo image.
Will wait to see if team Kriesi have any advice on the LCP issue – specifically regarding the logo as the LCP.
Possibly!
In WP Rocket try adding analytics.js and gtag.js to the exclusion list in the JS settings.
Also add jquery.min.js if you run into any other problems.If you defer all inline JS you may be accidently deferring Enfolds Cookie Consent Modal which normally loads in the <head> section of each page. This will probably stop it working properly.
This may also be defering the track code.Hope this helps :)
Hi Ismael,
I have just raised an issue regarding the New G4 track codes when i saw this post. In 4.8.3 release the new G4 track codes break the Cookie Consent Modal (this has happened before with a previous Enfold release).
When a new G4 tag is added to Enfold in the tracking code box, Cookie control does not work and the script gets loaded anyway.
I can still see data in the Analytics console though but there is definitely a bug with the latesg G-XXXXX tags.
My post is here if it helps:I tried the same sites with an old UA-XXXX code and it works OK. So I can see a problem with new G4 G-XXXXXX codes.
Cheers Gunter,
For your notes:
The current 4.8.3 implimentation of Srcset does not explicitly give the logo element a height and width tag. This flags an error when testing with Lighthouse or Page Speed Insights.I have had to manually add rules for different screen sizes to add width and height tags to the logos. You can see this in the private text below or in the <head> as critical css on the example below:
I have just been looking at the performance/network panel in Chrome Lighthouse.
For doodles-of-art.co.uk and ashbybasketball.co.uk after the initial render, the logo then disappears and re-appears at the LCP point. After JS has loaded an animation is triggered and the LCP is recorded as after the animation finishes.
The LOGO recieves a fade in animation in both these examples.
This might be the cause of the issue because the logo does not animate on the burdenbasket.co.uk.
Is there anything I can do to prevent this behaviour?
I’m keen to hear your suggestions.
Another new site launch.
Burden Basket (HOPE Project) is a mental health support and training provider for children and young people. Alongside therapeutic counselling services, the HOPE project provides both training and support services to teachers and children. Based in Swadlincote, UK – Covering South Derbyshire, Staffordshire and Leicestershire.https://www.burdenbasket.co.uk
Working with the company owners, the website content has been updated to contain more information about the services offered – Missing from the old website.
The site uses a custom header design and menu – Full width and equally spaced with a custom widget area for contact information.
Mobile optimised header images have been added manually by replacing the desktop sized ALB Colour Section Background image with correctly sized versions for different screen sizes.
This code is then inserted into the header via functions.php as inline critical CSS to improve FCP and LCP scores.A calendar plugin has been used to display Eventbrite and zoom calendar entries – embedded with loading=”lazy” tags for speed.
The site passes all web vitals metrics at time of launch.
Been a bit quiet on the social posts lately! Lots of work for existing customers but we have a couple of new launches this month:
Holding page designed for a company selling CBD oils and topical creams (all legal in the UK as a food supplement if you were wondering). The company is based in the UK and provides some of the highest quality Pure CBD oil on the market.
The holding page was set up specifically as a funnel for the companies main website (which I have not been able to persuade over to Enfold yet!). The layout has menus turned off.
https://www.hemppureoils.co.uk
Page speed is important for a landing page. The Hemp Pure Oils site scores 98/100 on mobiles on a good test run. However this varies depending on how well the server responds etc. LCP sits at 2.3 seconds on a good run but rises to 3.6 seconds on a bad run.
Some critical CSS is loaded in WP Head to improve the FCP and aid the LCP but more is required for a bigger impact.
The site uses free optimisation tools and does not use a CDN at this point in time showing just how good Enfold is as a platform for websites compared to others like DIVI and Elementor which all require more work to get a 90+ score in page speed insights.
I hope this proves useful for anyone else looking to build a fast and easy to edit landing page.
I’ll give it a try and let you know.
I am trying to resolve the LCP issues with Enfold at the moment. In some cases all is fine, in others it is not.
Good comparison for you:
https://www.burdenbasket.co.uk has an empty color section as the main header and the LCP score is still pretty good
https://www.hemppureoils.co.uk as per previous posts has a color section with elements in it and the LCP score bounces around a lot more depending on how well the test executes.
Both sites will score all green on occassion but with elements within the color section things slow down.
I think the only solution is to add critical css inline for the entire above the fold section and remove client side rendering including animations on mobile devices.
Another point probably overlooked by all Enfold users – If you follow ICO’s guidelines (GDPR) to the letter, you should only be loading essential cookies and anything marketing should be on opt-in only. Doing this stops analytics.js loading on pageload – Improving pagespeed scores by up to 10 points and ensuring GDPR compliance.
Just edited the response Opacity 0 means that the elements are not visible.
Opacity set to 1 solves the load issue but adds a layout shift so I have set it back to the following:
@media only screen and (max-width: 1024px) { .js_active .av-minimum-height .container { z-index: 1; /*required for transition*/ opacity: 0; -webkit-transition: none !important; transition: none !important; } }Thanks for the quick response @yigit
I added the following based on your suggestion as critical css to the header:
Not entirely sure it has made a lot of difference but the site is JUST passing LCP with a score of 2.3 to 2.5 sseconds on a GOOD test run in Chrome Dev Tools.
Total score is 98/100 on a good run.@media only screen and (max-width: 1024px) { .js_active .av-minimum-height .container { z-index: 1; /*required for transition*/ opacity: 1 !important; -webkit-transition: none !important; transition: none !important; } }Thanks @ismael
Looks like your solution works but has affected the layout slightly.
@sldeutsch site appears that the layerslider is served at the same height on all screen sizes excluding one.I just encountered a similar problem on a client site with an ALB background element that becomes 1400 pixels tall on mobiles.
The layout shift was 2.48 then down to 0.99 with a min-height on the element within Enfold and then down to 0.01 with an explicitly stated height as per your solution.Setting min-height alone only works if the shift on mobiles is minimal so I added the following height:; css.
This is a specific case where the elements stack. The LCP score is still a bit high but very hard to optimise because the design calls for such a large first element which stacks on mobiles.
But you get the idea:
-serve different background image for smaller/taller screens
-set fixed height for those elements for different screen sizes/* Media Rules for ALB Colour Element Hero Images */ /* mobiles */ @media screen and (max-width:767px) { #main-banner-1 {background-image: url(/wp-content/uploads/cbdbgd-wood-5-767-1500-1.jpg)!important;} } /* mobiles */ @media screen and (max-width:767px) { #main-banner-1 { min-height:1400px !important; height:1400px !important; } .tj-main-banner-style { min-height:1400px !important; height:1400px !important; } #main-banner-1 .container { min-height:1300px !important; height:1330px !important; } } /* Desktops */ @media screen and (min-width:768px) { #main-banner-1 { min-height:689px !important; height:689px !important; } .tj-main-banner-style { min-height:689px !important; height:689px !important; } #main-banner-1 .container { min-height:689px !important; height:689px !important; } }You have to go through the page from top to bottom to isolate the causes. Unfortunately I would need to quote you for the work if you want me to look at it.
CLS issues and web vitals work is quite in depth.
The largest shift is caused by the layer slider image. As suggested you have to explicitly state the height of the element to prevent the shift and should be done to match different device sizes. This can be done in CSS.
Once the layerslider is no longer causing a shift you may find that the other components load far enough down the page that web vitals no longer considers them a problem.
@ismael may still be able to help you as part of the support team.Sorry I have just realised I missed the closing brackets in my code snippet I have edited my response. Sorry if I have made the job harder for you!
performance figures for https://www.midlandcontrols.co.uk
Was 89/100 without Srcset
Now 98/100 with Srcset (and my bespoke settings for Enfold)
https://www.midlandcontrols.co.uk/wp-content/uploads/performance-figures-new-1.jpgIn order to get this to work Unofficial workaround. Please backup the file before trying.
Working example
https://www.midlandcontrols.co.ukSet the logo in the theme panel to Full Size! Do not choose a thumbnail size!
Delete this line 625 from function-set-frontend.php
if( $dimension === true ) { /** * basically just for better page speed ranking :P * Be sure to return a valid attribute string. * Will be removed when image dimension is responsive * * @since 4.8 * @param string $dimensions * @return string */ $dimension = apply_filters( 'avf_logo_dimension', 'height="100" width="300"' ); }Delete the code below Line 684
{ $resp_attr = Av_Responsive_Images()->html_attr_image_src( $logo, true ); /** * https://kriesi.at/support/topic/logo-srcset/ * * Bug that WP removes scrset and sizes when width and/or height is defined * @since 4.8.3 */ if( false !== strpos( $resp_attr, 'srcset' ) || false !== strpos( $resp_attr, 'sizes' ) ) { $dimension = ''; } $logo_img = "<img {$resp_attr} {$dimension} alt='{$alt}' title='{$title}' />"; $logo = "<{$headline_type} class='logo'><a href='{$link}'>{$logo_img}{$sub}</a></{$headline_type}>"; }Replace with:
{ $resp_attr = Av_Responsive_Images()->html_attr_image_src( $logo, true ); $logo_img = "<img {$resp_attr} alt='{$alt}' title='{$title}' />"; $logo_img = Av_Responsive_Images()->make_image_responsive( $logo_img, attachment_url_to_postid($logo), '' ); $logo = "<{$headline_type} class='logo'><a href='{$link}'>{$logo_img}{$sub}</a></{$headline_type}>"; }@Ismael is right with his solution.
Start from the top of the page and work downwards. CLS shift tends to only apply on above the fold because the rest of the page loads out of view.If you can remove the shift from the first element on all devices then the rest may no longer be an issue. As they are all ALB colour sections, if you know that it will dynamically resize, set no minimum height. If it has a background image set then you may still experience some shift. You will need to create a version of the code below for that element.
The Layerslider needs an explicitly stated height to prevent shift. ALB background elements and Sliders also have this issue. You essentially need a few rules to match the design:
Below is suitable for the layerslider. HOWEVER you may need to apply it to the colour section and the background image as well to prevent the shift. I tend to set a custom ID so that the rule only applies to this element. See how you get on with the below:
/* Desktops 1080p */ @media screen and (min-width:1441px) { .home #layer_slider_1 .ls-wp-container, .home #layer_slider_1 .ls-wp-container .ls-inner { height: 271px !important; } } /* Macbooks, 720p and ipad pros */ @media screen and (min-width:1025px) and (max-width:1440px) { .home #layer_slider_1 .ls-wp-container, .home #layer_slider_1 .ls-wp-container .ls-inner { height: 272px !important; } } /* Ipads landscape */ @media screen and (min-width:769px) and (max-width:1024px) { .home #layer_slider_1 .ls-wp-container, .home #layer_slider_1 .ls-wp-container .ls-inner { height: 271px !important; } } /* Ipads portrait */ @media screen and (min-width:451px) and (max-width:768px) { .home #layer_slider_1 .ls-wp-container, .home #layer_slider_1 .ls-wp-container .ls-inner { height: 271px !important; } } /* mobiles portrait */ @media screen and (min-width:361px) and (max-width:450px) { .home #layer_slider_1 .ls-wp-container, .home #layer_slider_1 .ls-wp-container .ls-inner { height: 321px !important; } } /* Moto G4 portrait */ @media screen and (max-width:360px) { .home #layer_slider_1 .ls-wp-container, .home #layer_slider_1 .ls-wp-container .ls-inner { height: 271px !important; } }Thanks THP,
@ismael – Let us know when you have taken a look.Hi Ismael,
I just replaced the logo on the example I sent over with a 2000 pixel wide image, checked via ftp to make sure image sizes were generated and set it as the logo.
It just serves the original Srcset does not apply.
The workaround for 4.8.2 you provided me worked fine in 4.8.2. But the new code added for 4.8.3 does not work and now the code has changed the workaround does not work either.
Let me know if you have a fix for this.
What kind of server are you using apache? or NGINX?
Most NGINX servers prevent the built in script merge loading. I have experienced this with WPEngine hosted sites. They seem to ignore the script merge when it is enabled (even after the cache is cleared with the CDN disabled).
Third party plugins like WP-Rocket will still work. However the server will likely be http2.0 meaning that script merging is not so crucial.
Try using Google Chromes built in Lighthouse testing set to mobile with throttling turned on. It gives better ‘lab’ conditions and because it is browser based it can work on test servers.
You can then cross reference it against GT Metrix, Page Speed Insights and WebPageTest.orgIve tested it. The code above works just fine.
This problem appear to apply to all Enfold sites and will need addressing in the next release.
Thanks Ismael,
I am still updating my sites to 4.8.2 Not all are running it yet.
https://www.midlandcontrols.co.uk/ is running the latest version and srcset does not work. If this helps?
I’ll try the mod above and report back.
@Ismael,
I’ve got it thanks.
It would still require some fiddling to display the right images in the right way so I’ll stick with the current method for now.
They are both just as labor intensive.Thanks Ismael,
You cant use Src Set with background image CSS though?Using Srcset:
If srcset is used and background image is set to center or any of the other settings – The banner image will zoom in on the wrong spot in a majority of cases.Srcset with cropped thumbnails may solve the performance problem but it doesn’t meet the design intent or prevent CLS shift caused by content in the colour element being taller than the min-height. Sorry to add another issue I had not previously mentioned!
If you set a minimum height for the ALB colour section OR the ALB color section becomes taller because the content doesnt fit on mobiles. You also get a CLS shift if you set a min-height and the content increases the size of the box beyond it. I have another set of rules I apply so that the height displayed matches the actual height of the image for typical screen sizes. So it is possible to solve the problem but requires bespoke optimisation depending on design intent.
Within enfold this could be solved by adding the option to upload different background images for different screen sizes rather than just one image. A real nightmare for novice users who probably dont have photoshop experience. You also have to set a min-height that matches the actual height of the element otherwise you get a BIG CLS shift.
If srcset is implemented I wont complain but the min-height CLS issue will still exist.
I have a lot of new rules to put in place for this approach to work which I will implement anyway – a bit time consuming but it works extremely well.
I am extremely confident that my modifications and setup will make any Enfold site pass web vitals. Before May1st I am making all of the Enfold sites on my servers pass web vitals.
I am really impressed with how easily I have been able to get Enfold to pass (with some advanced technical knowledge). I am in the process of working on a similar solution for DIVI but this seems to be much harder.
I am now one of the only developers in the UK who is offering sites that pass web vitals thanks to the quality of Enfold!
I have a solution but here is the problem.
In order to meet design intent I have set a minimum height of 350px for the image. This means it fills the screen on mobiles.It also means the background image does not scale uniformly so you have to upload a separate image for each screen size
I have some labour intensive code sent privately below which serves a different background image in the correct size for a range of devices – Including the Moto G4 used in Lighthouse. There are 9 pages on the site all of which have their own version of the code in the private section.I’m just feeding this back in case there is anything you can add into core to achieve a similar function. As it stands without this level of optimisation background images knock about 15 points off lighthouse performance and lowers FCP.
These images are specific to the situation. Which makes it hard to have a one size fits all approach.
Thanks @guenni007
I’ll be rolling this out to all of the sites on my server very soon – Along with a version of your image quality and optimisation settings from one of the other posts on the forum.The only element I have yet to create a solution for (I am working on this at the moment) is all ALB colour elements with background images. When used above the fold – Scores fall massively. I have a solution using media queries to implement but it will be on a case by case basis which will take time to implement.
I have several sites passing web vitals already but generally speaking I have to remove the ALB colour sections with background images from above the fold to achieve this.
Last things on my list are:
Adding media queries to alb background images to serve different sizes depending on screen size.
Adding Webp
Adding a a CDN with Railgun – This should solve the webp issue as well.
Loading a local copy of Google analytics – But making sure it still works with Enfolds Cookie control/privacy popupThen we have Enfold passing web vitals no matter how the site is configured.
Thanks Nikko,
Exactly what I needed.
For anyone else wondering the fonts on 14/04/2021 in the class-avia-type-fonts.php file are as below:
GOOGLE FONTS AND WEIGHTS
$fonts = array( 'Advent Pro' => 'Advent Pro:100,400,600', 'Alice' => 'Alice', 'Allerta' => 'Allerta', 'Arvo' => 'Arvo', 'Arimo' => 'Arimo:400,700', 'Antic' => 'Antic', 'Audiowide' => 'Audiowide', 'Bad Script' => 'Bad Script', 'Baumans' => 'Baumans', 'Bangers' => 'Bangers', 'Barlow' => 'Barlow:400,500,600,700', 'Bitter' => 'Bitter', 'Cabin' => 'Cabin', 'Cardo' => 'Cardo', 'Carme' => 'Carme', 'Caveat' => 'Caveat:400,700', 'Coda' => 'Coda', 'Codystar' => 'Codystar:300,400', 'Cormorant Garamond' => 'Cormorant Garamond:300,400,700', 'Comfortaa' => 'Comfortaa:300,400,700', 'Coustard' => 'Coustard', 'Gruppo' => 'Gruppo', 'Damion' => 'Damion', 'Dancing Script' => 'Dancing Script', 'Dosis' => 'Dosis:200,300,400,500,600,700,800', 'Droid Sans' => 'Droid Sans', 'Droid Serif' => 'Droid Serif', 'EB Garamond' => 'EB Garamond', 'Exo' => 'Exo:900,700,400,100', 'Finger Paint' => 'Finger Paint', 'Fira Sans' => 'Fira Sans:100,400,700', 'Fjord One' => 'Fjord One', 'Flamenco' => 'Flamenco:400,300', 'Great Vibes' => 'Great Vibes', 'Heebo' => 'Heebo:100,400,700', 'Herr Von Muellerhoff' => 'Herr Von Muellerhoff', 'IBM Plex Serif' => 'IBM Plex Serif:300,400,700', 'Inconsolata' => 'Inconsolata', 'Josefin Sans' => 'Josefin Sans', 'Josefin Slab' => 'Josefin Slab', 'Kameron' => 'Kameron', 'Karla' => 'Karla:400,700', 'Kreon' => 'Kreon', 'Lato' => 'Lato:300,400,700', 'Lobster' => 'Lobster', 'Lora' => 'Lora', 'League Script' => 'League Script', 'Mate SC' => 'Mate SC', 'Marck Script' => 'Marck Script', 'Mako' => 'Mako', 'Megrim' => 'Megrim', 'Merienda' => 'Merienda:400,700', 'Merriweather' => 'Merriweather:300,400,700', 'Metrophobic' => 'Metrophobic', 'Molengo' => 'Molengo', 'Montserrat' => 'Montserrat', 'Muli' => 'Muli', 'Nixie One' => 'Nixie One', 'Nobile' => 'Nobile', 'News Cycle' => 'News Cycle', 'Open Sans' => 'Open Sans:400,600', 'Open Sans Condensed' => 'Open Sans Condensed:300,700', 'Orbitron' => 'Orbitron', 'Oregano' => 'Oregano', 'Oswald' => 'Oswald', 'Pacifico' => 'Pacifico', 'Parisienne' => 'Parisienne', 'Petit Formal Script' => 'Petit Formal Script', 'Pinyon Script' => 'Pinyon Script', 'Playfair Display' => 'Playfair Display:400,700', 'Podkova' => 'Podkova', 'Poiret One' => 'Poiret One', 'Poly' => 'Poly', 'Press Start 2P (Retro Pixelfont)' => 'Press Start 2P', 'PT Sans' => 'PT Sans', 'Quattrocento' => 'Quattrocento', 'Questrial' => 'Questrial', 'Quicksand' => 'Quicksand:400,600', 'Raleway' => 'Raleway', 'Righteous' => 'Righteous', 'Roboto' => 'Roboto:100,400,700', 'Sacramento' => 'Sacramento', 'Salsa' => 'Salsa', 'Signika Negative' => 'Signika Negative', 'Source Serif Pro' => 'Source Serif Pro:400,600,700', 'Sunshiney' => 'Sunshiney', 'Special Elite' => 'Special Elite', 'Tangerine' => 'Tangerine', 'Tenor Sans' => 'Tenor Sans', 'Varela Round' => 'Varela Round', 'Work Sans' => 'Work Sans:700,400,100', 'Yellowtail' => 'Yellowtail', );WEB SAFE FONTS – Do not require preload
$fonts = array( 'Arial' => 'Arial', 'Arial Black' => 'Arial-Black', 'Arial Narrow' => 'Arial-Narrow', 'Helvetica' => 'Helvetica', 'Helvetica Neue' => 'Helvetica-Neue,Helvetica', 'Lucida Sans' => 'Lucida-Sans,Lucida-Grande,Lucida-Sans-Unicode', 'Tahoma' => 'Tahoma', 'Trebuchet MS' => 'Trebuchet-MS', 'Verdana' => 'Verdana', 'Georgia' => 'Georgia', 'Lucida Bright' => 'Lucida-Bright', 'Palatino' => 'Palatino', 'Times New Roman' => 'Times-New-Roman', 'Courier New' => 'Courier-New', 'Lucida Sans Typewriter' => 'Lucida-Sans-Typewriter', 'Copperplate' => 'Copperplate', 'Papyrus' => 'Papyrus', 'Brush Script MT' => 'Brush-Script-MT' );Thanks Nikko,
Is the logic below correct?
Open Sans comes in several variations:
https://fonts.google.com/specimen/Open+SansWhich does Enfold do?
1 – Does Enfold therefore only load the Regular 400 version – And apply weight changes to the 400 version using CSS.
2 – Or does it also pull through all other versions – And when the weight is changed in CSS it loads that version instead (bold, semi-bold, light, etc.)?That makes sense. Thanks @Ismael
I’ll Post again once I have a working example. See notes below
I Imagine that the code will include some cropped versions of the hero image. I.e. 1920×600 Then for mobiles it will be hard cropped to 350px high so it fills the above the fold area on most small devices. Reducing the physical size and file size to suit the device.I imaging I will also need to adjust the positioning, without checking I think it applies a pixel offset from the left hand side.
Some of the sites on my system have a ALB Colour Section Background image above the fold on every page. So each will need a unique ID and a media query once I have the right formula.
Assuming I will need the following image widths auto-generated and media queries for each screen size:
450px (Mobiles portrait)
768px (Most Mobiles landscape, Tablets portrait)
1024px (Tablet landscape)
1440px (720p laptops and Macbooks)
1920px – Native – Standard 1080p HD monitors
Potentially 2560px Native for retina but to be confirmed I never normally bother with this due to big increase in file size.
In windows 4K always recommends a 150% to 300% zoom so you actually see things at 1080p in most situations.
