Forum Replies Created
-
Posts
-
Thanks Gunter.
Really useful I get it now. Thankyou.
I think I have found the cause of the problem.
In the performance panel I had remove query strings turned on. This breaks the version numbering for the post-xxx.css file – But does not appear to break other files (probably because dynamic avia gets its own unique name when generated rather than just version numbers).I am making sure I leave query strings enabled from now on accross all sites.
Hope this helps anyone else experiencing caching issues with Post CSS :)
Thanks Gunter,
I wouldnt rush to do it. The current implimentation is solid.It was more an observation.
The way it works now – If I upload a massive logo. As long as there is a 360 wide thumbnail generated that should be the smallest image it displays?
This is more than good enough for the average Enfold user. It is also the default way WordPress handles things.I was just trying to force it to serve the smallest image possible but this will depend on the uploaded size of the original image. So really difficult for you to code filters that the average user can work with.
I’d be happy to try a filter and see if it does serve a smaller image. But if not its not broken so dont fix it ;)
No Problem, Hope it helps.
My understanding is that the srcset sizes issue is just the default way WordPress handles Srcset.
It specifies one image per screensize and makes the assumption that each image is full width.So the smallest image it will display in the logo area is 360 wide. Unless now we have specified a width and height of the logo explicitly it can figure things out.
As it stands the 4.8.6 implimentation seems to work pretty well. So I am happy :)Can you try creating a new slider on a test page to see if there is an error with the current element?
Use the same images and see if it works?Make sure you have cleared your cache. It doesnt look like Responsive images is turned on in your performance panel in the screenshot you sent.
If it doesnt work wait and see if one of the forum mods picks up your request for help.
I appologise I have given you wrong information.
I was refering to Lazy load I forgot that Srcset is controlled globally.
You only need to turn on the setting in the theme control panel.
Enfold > Performance >
Note that it will only work if you have appropriate image sizes for it to downsize to.
Hi @Emazing
I’ve solved it. Thank you for your input.
You are right. The script merge will remove the annotations and therefore the custom.css and style.css if they are not used.This is because of a specific problem. Enfold’s built in script merge wont work on a WPEngine site I am working on. It just ignores it no matter how many times the NGINX cache is cleared.
We are using WP-Rocket instead. I wanted to prevent the custom.css script loading fullstop because script merging is currently disabled – Pending testing.
I have used the following code which works:
// Dequeue and Reregister custom.css from parent theme add_action( 'wp_enqueue_scripts', 'enfold_remove_scripts', 9999 ); function enfold_remove_scripts() { wp_dequeue_style( 'avia-custom' ); wp_deregister_style( 'avia-custom' ); }Thanks Rikard,
I’ll get it installed! I wasn’t sure if we would be waiting until the next major release for the bug fixes.Really appreciate the quick fix!
Hope you manage to sort t anyway mate.
Following this post to see if there is a problem with post creation.
I have a couple of sites where the database has become quite large. So interested to see if the enfold team find anything.
I was just trying to help out mate, I use Enfold daily and I check the forums every few days. If I see something I can provide input on I will comment.
Take a backup of your database and Give wp-optimize a try. I use it will all of my enfold sites including those that are just enfold, yoast and a few performance plugins.
Were the 250 posts imported from another system or wp install or were they created within the current installation?
Hi Chris,
I have assumed that you are using a FULL WIDTH slider and not the FULL SCREEN slider. The Full screen slider uses background css images and requires a different solution to below. I’ll send you some css if you need it.
Unofficial response but something I have been working on for a while and have the following solution:
Turn on Responsive images in the Enfold performance panel – This activates Srcset. The full width slider uses this function. As long as you have the right size thumbnails set up it will serve the smaller size images on different screensizes. Make sure you clear your cache.
The default WordPress Srcset implimentation serves images per screen size width – So for a full width element – Fully optimised requires the thumbnail sizes below.
On a 360px wide screen it will serve a 360px wide image.I personally use the Shortpixel Regenerate Thumbnails Advanced Plugin to add some extra sizes. It is free and compatible with Enfold.
Please be CAREFUL if you remove other thumbnails as it may affect your site design depending on the other Enfold default sizes used throughout the site.I personally recommend adding or making sure the following sizes are covered:
360px wide – Google speed testing – Small Mobiles
450px wide – All other mobiles
768px wide – Ipad Portrait
1024px wide – Ipad landscape
1440px wide – macbook pro/720p screens
Upload size 1920px wide Native size – 1080p – (4K screens normally apply a zoom by default)If your slider has no minimum height set then this should automatically work as the image will scale in uniform.
If you set a minimum height then you may need to upload a taller image to compensate as Srcset uses the screen width not the height to determine which image to serve. The image may become blurred on smaller screens as the image will be stretched to the min-height.
@NIXHALBES
Just looked at the plugin source code LOL yep definitely will be entering the filters manually into functions.php! Thanks for sharing this one!
The plugin is literally two lines of code with a load of annotations and a readme file.
Cheers @NIXHALBES
If Kriesi and team are not planning on integrating Gutenberg Footers then the code above should be considered for the core theme to avoid confusion.I’ve not tested the code yet but looks right to me.
@Yigit
I have sent you three emails – Email 3 sums up the two issues with Srcset and a possible fix.In The Beta release for 4.8.4
I modified $dimension on line 710 in function-set-avia-frontend.php so the dimension matches the uploaded size of the image.$dimension = apply_filters( ‘avf_logo_dimension’, ‘height=”116″ width=”450″‘ );
This removes the warning from Chrome.
All ALB image elements state the height and width automatically based on the chosen image size. This logic needs to be applied to the logo.
The size of the logo is about 68% the width of the viewport. So to get it to serve the right size image for the space I think the size attriute on the logo should be:
sizes=”(max-width: 450px) 68vw, 450px”
NOT
sizes=”(max-width: 450px) 100vw, 450px”Hope this helps.
A link to your website will allow the support team to see what plugins and setup you have.
They can’t help you without it.
Some plugins create their own tables in the database which can bloat the database. Sometimes the way post data is stored can also increase the size of the database.
@kommo
Thanks. Quite a bit went in to this one from an optimisation perspective for looks and speed.The above the fold section is an ALB color section with background image. I have set a minimum height depending on the image requirements for each screen size (Either 350px or 600px). I then applied a custom class and custom ID to each to set the height depending on the screen size. This removes issued with CLS in Google Web Vitals because the sizes are explicitly stated early.
If you view source in Google Chrome you can see the code added as critical CSS into the header. I used wp_head to add code directly into the header from functions.php.Most of the mods come from a performance perspective:
The logo and srcset images are pre-loaded so the logo is available as early as possible.
Self hosting fonts and Adding font preload manually from functions.php just like the other critical CSS. This prevents Font Swap (Flicker) from occuring as the fonts are available right away.To improve LCP and FCP scores you can either pre-load the background color section image in the same way as the fonts so it is available right away or add critical css in the way that I have – serving a different image size per screen size.
I use critical CSS on Burden Basket because of the minimum height applied to the ALB colour section.
To ensure the images look right on all screen sizes I have used media queries to load a different banner image per screen size on every page.
I have enfold setup to have mobile break points at 989px instead of 767px. I do this in the Enfold control panel and every column element on every page .
As the page scales down (if you resize the browser window) I have used media queries to change the menu font size and padding so that it works on screens all the way down to 989px. You can adjust the mobile breakpoint if required to lets say 1024px (for ipads) with some custom CSS. If you search the forum you’ll find this one.
Although most sites read Left to Right from a mobile design perspective – Put the first image on the left – This will mean users see picture content first in the same way people are familliar with on social media. Its good UX design to do it this way but looks a little unusual on desktops. You could always set two images and hide the first one on desktops if you prefer them the other way around on different platforms.
I hope this helps.
@justin
The menu design for Burden Basket used a combination of features from the Enfold Documentation.Sorry for the late reply.
I used a combination of settings from the Enfold Documentation.
The logo layout is set to Logo Center, Menu Below
The logo is then re-positioned to the left using Quick CSSCustom Widget added to header
The widget is then re-positioned to the right with Quick CSS
Bonus Points
If you add a search widget into the customer widget area – the Ajax dropdowns still work because it is within the header area. Great for Ecommerce sites.Justified Menu (equal spaced menu)
Colours and menu break point adjusted with Quick CSS.
Hope this helps. It took a bit of fiddling but I have a simillar design running on most of my ecommerce sites becuase it makes them look and function more like a typical ecommerce site.
Unoffocial response:
Have you tried using something like WP-Optimize to clean the database?Please use with caution. It will delete all post revisions and posts from the bin and spam folders.
I use this with every website I design. Helps lean up the database and keep things running smoothly.250 posts is quite a lot. I have a couple of Ecommerce sites that have breached a 200mb database but these have a few thousand products.
Hi ismael,
Sorry yes the script is working but the cookie modal was not. When a new G4 code is entered into the Google services box, it no longer provides the option to turn off the cookie in the cookie modal.I have just managed to get it to display and function by doing the following:
I had to turn on the custom Modal Window Custom Content setting.
Then save. This makes the Google Analyitcs box appear in the Cookie Modal again.Not sure why it wasn’t working.
Thanks anyway you can close this issue.
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; } }
