Forum Replies Created
-
Posts
-
@coldstreamer
Nice looking site!
I can see an error in the developers console. Jquery not defined.
It looks like you have delayed or deferred jquery and a particular element is loading before jquery is defined.You may need to exclude jquery.min.js this from any optimisation plugin you have used.
I am not sure what plugins you have installed in general but this may be caused by a plugin (not an optimisation plugin) that is loaded in before jquery is defined or an improperly coded plugin – but it is more likely that an optimisation plugin is to blame loading Jquery later than a critical function.I hope this helps. The site itself works just fine. :)
I have provided a few snippets but never a guide. Unfortunately some my the speed settings I apply I tend to keep secret these days. Very few people particularly here in the UK have a understanding of how speed optimisation works on sites. So it is a bit of a unique selling point.
I did share an optimised setup for Wp-Rocket on a post the other day though for someone struggling with their performance scores.
https://kriesi.at/support/topic/really-poor-score-on-mobile-google-speed-test/@guenni007 No problem.
I would normally merge scripts as well on a standard Enfold install. However guidance has been updated for http2.0 servers where script merge can actually slow down load times FCP and LCP due to time spent waiting for the merged scripts vs several smaller scripts.
Excluding CSS issues – This is what the delay execution of JS deals with. it stops a majority of the JS firing on pageload.
If you wanted a combination to experiment with. Turn on merge and minify CSS in Enfold and also still turn on the CSS settings in WP-Rocket as above.
I am considering adding WP-Rocket on top of my current performance stack. I had a site fail web vitals in real data (clientbase uses 3G/slow 4G in poor signal areas regularly) even though it scores 95/100 on mobiles and 100/100 on desktops (This is without WP-Rocket). So I have been looking at WP-Rocket to add defer and delay JS in a reliable way.
Alternatively Flying Scripts is a free plugin that can delay and defer JS executions but I have not tried it with Enfold. I may try this first but I will likely just pay for the studio license of WP-Rocket because it also offers reliable critical css generation.
Hey @guenni007,
The best settings for Enfold and WP-Rocket
Note that you may have to add more exclusions to the JS settings depending on the Enfold features used.Also note that this is set up for compatibility. You may find that you can defer or delay more JS and your site still loads properly.
In most setups I would merge and minify CSS and JS – then use critical css to load above the fold content. But because WP-Rocket provide a set of exclusions in their documentation specifically for Enfold it is probably better to just serve items minified only instead of merged so scrips can be excluded.
My advice would be play around with the CSS settings to see if you get a better result with CSS merged and minifed or just minified. Site design will play a part in how well this works.
Enfold > Performance
Turn off Enfold Script merge and minify
Enable only load used elementsWP-Rocket
(From the top down)Cache
Enable caching for mobile devicesFile Optimization
Minify CSS
Optimize CSS delivery (Load Asynchronously)Minify JS
Exclude:
/wp-includes/js/jquery/jquery.min.js
/wp-includes/js/jquery/jquery-migrate.min.jsLoad Javascript deferred
Exclude:
/wp-includes/js/jquery/jquery.min.js
/wp-includes/js/jquery/jquery-migrate.min.js
google-analytics.com/analytics.js
ga\( ‘
ga\(‘
/gtag/js
gtag\(
/gtm.js
/fbevents.jsDelay Javascript execution:
/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
/dynamic_avia/avia-footer-scripts-(.*).js
var avia_is_mobile
/enfold/js/avia.js
/enfold/js/shortcodes.js
/enfold/config-templatebuilder/avia-shortcodes/
/enfold/js/avia-compat.js
layerslider
google-analytics.com/analytics.js
ga\( ‘
ga\(‘
/gtag/js
gtag\(
/gtm.js
/fbevents.jsFeel free to tweak depending on your theme setup. You may have to exclude some plugins from this. You can keep google analytics from loading until interaction if you want but this may through your metrics off slightly if you live in the US and do not need to ask users to opt-in to cookies (bounce rate).
Media
Enable lazyload for images
Enable for iframes and videos
Add missing image dimensionsPreload
Activate PreloadHeartbeat
Control heartbeatAll other aspects I normally deal with manually or using a different plugin including loading fonts locally.
Thanks Gunter I’ll give this a try.
I will re-visit the site again and see if I can get this working.
I have delivered face to face training to the client’s staff and created a simple user guide – In hope that they dont break anything!
@navindesigns
A lot to unpack here
I specialise in optimised Enfold sites.
Enfold with a handful of plugins is capable of scoring 90+ in web vitals without premium plugins or a CDN.
Using WP-Rocket and their delay execution of JS and defer JS feature will see most Enfold sites score 95+/100 if the rest is done correctly.It looks like all of the options under Enfold > Performance are turned off.
JS is being loaded first
No minification
Imagery loads after all other scripts
Multiple tracking codes and third party resources loaded.My recommendation would be to enable all Enfold performance features and re-test. Assuming your host offers server side caching you wont need a caching plugin.
The popup you have on pageload will also affect load times.Otherwise I recommend WP-Rocket to users who are not familliar with speed optimisation because it does all of the work for you.
They also provide bespoke exclusions specifically for Enfold on their support pages.If you use Google tag Manager to manage multiple tracking metrics then this can impact speed scores especially if they all fire ahead of pageload.
I hope this helps.
I currently have 50+ enfold sites scoring 90+ under lab conditions on mobile and 100 on desktops.
Some of the sites I design and host below if you wanted to run your own tests.
https://www.stanspals.co.uk/
https://www.forensic-testing.co.uk/
https://www.thehealthworkshop.co.uk/
The three above do not use WP-Rocket but I am expecting to add this on a developer license very soon.I must add – Always run a few test. Especially if you are using page speed insights via your browser and not in chrome dev tools. You will not always get a clean test run.
To add some more info:
From another client site:https://www.midlandfiresecurity.co.uk/news/
https://www.midlandfiresecurity.co.uk/advice-and-guidance/an-introduction-to-bs-5839-part-6/
The first entry is a post that uses the advanced layout builder. It has automatically stuck a Read More button after the first paragraph when viewed on the news page.If we can make the example in the private content (previous post) do this by default it would solve the problem.
Thanks in advance.
Yes please close this out.
Really pleased this is working actually. I have always used the quick css but due to WPML on this one style.css is the right place for it.
Cheers All.
@ismael
It appears to be a caching issue – Although all caching is off. I think the timestamp on the my_custom.css didnt update right away so my browser was loading a version of the site with the old my_custom.css.I am now using the child theme style.css having dequeued the my_custom.css and it is working as expected.
Sorry this thread has become a bit of a nothing thread.
I have always used the Quick CSS box but this particular site uses WPML which means duplicated CSS that is used by both language versions of the site if I use Quick CSS.
I have now emptied quick CSS, copied it all into style.css and dequeued my_custom.css (Disabled the function above).
@ismael
Sorry that was a typo. I have just edited my original post.If you place any CSS in the child theme style.css it is ignored or not given high enough priority to overide the theme/plugin css.
Using my_custom.css seems to work OK for most CSS but some still gets ignored unless it is in the quick css box.
Ok I have found the answer.
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . 'css./my_custom.css', array('parent-style') ); }@aussiedropbear
Hey I put this together a year or so ago. It uses enfolds menu building tools. It also has woocommerce for bakery sales.
https://www.thehoneypotcompany.co.uk/
https://www.thehoneypotcompany.co.uk/menu/If you have not already seen it there is a demo of a restaurant.
https://kriesi.at/themes/enfold-restaurant/Hi Rikard,
Really sorry about this – I think I have found the cause. I am on a fixed IP and I have a 2 year old son who loves youtube.
I think we have too many devices connected to youtube at once so it is failing to display the video due to too many connections.
I think it may have been a blip in service from youtube.
Sorry to have wasted your time. Thank you for looking for me.
How to re-produce the issue:
Just click play on a few of the video embeds.
You may have to browse through a couple of pages to see the issue occur.
Thanks Yigit,
It really depends on how far you want to take features in this area. Other themes have taken a simillar approach and include merge, minify and critical css generation just because it can be done with greater logic and efficiency from within the theme.
The ideal options as I see it:
Scripts merged and minified
OR
Scripts minified only
OR
Optimised merge and minify – Framework and elements above the fold loaded first (More than one merged file to keep the file size down – with a prioritised load order to avoid cls shift and render blocking issues)Then we may as well consider:
Critical CSS
A built in Critical CSS system based on the actual Enfold elements would be brilliant. This is the route a lot of the other themes have gone down rather than using a generator that scans the page and guesses what is above the fold.We already have a Post-xxx.css file generated. We also already have the option for Enfold to only load used elements – Why not generate critical css using the same kind of process. Taking a scan of the first 6 elements on the page and outputting the CSS for them for example. DIVI by Elegant themes does this. It provides 3 options to tell it how tall you want the critical css to be.
I will add. Not all sites need critical css depending on the modules used but it just helps smooth out FCP and LCP scores on sites that use lots of enfold features. I have noticed only a marginal improvement with critical css turned on in Divi for example.
It’s your call but it would be good to have an option of minify only OR an optimised minify and merge. The critical CSS on top would be the ultimate setup – considering that the elements to make it happen almost already exist in the current performance settings.
I thought that might be the case. Glad it worked for you.
I have used Rikards solution on a few sites before.
Actually loading the CSS inline rather than post css can be faster on first pageload but second pageload will be quicker with the post css file.So the Post CSS is the right route if you can keep it activated.
if you use any kind of caching you need the timestamps turned on (the default setting) and leave query strings turned on.
@Ismael
Regarding the tooltip – This is what I thought as well.
The client has flagged an issue in their SEMRush report. To be honest I think this might be a false positive.I’ll see if I can put a function together that overrides the default function so that the title and alt are displayed.
Thanks Ismael
What version of Enfold are you using?
As far as I am aware this issue was addressed a few versions ago. Originally the Post-xxx.css files did not have a version query at the end. They do in the current version of Enfold.If you have remove query strings turned on then the cache wont ever update. The team at Enfold made it so that the built in remove queries excludes the post css folder. But other plugins or even server side caches may be set to remove query strings.
Hi Ismael,
I have just copied the file from the parent theme to the child theme into the following folder > Includes > helper-social-media.php and it is being ignored.
If I change the title=” and replace it with
title='{$name}’ alt='{$name}’It only seems to work in the parent theme. In the child theme it is ignored.
Can you confirm where in my child theme I should be saving helper-social-media.php?
When added to child theme > includes > helper-social-media.php it is ignored completely.Following my initial message:
The system already scans the site for used shortcodes and only loads the CSS and JS associated with them.
Does the load order of the CSS get recalculated depending on the modules used?
For instance you would want
The core layout, grid, base etc. first
Then the CSS for an above the fold slider to load first for example.I know that DIVI by Elegant Themes works with way in their last performance update. But as a critical CSS scanner. It inlines the CSS for any elements that are above the fold as far as I am aware rather than using a critical css generator that scans pages – Because the system already knows what modules are used – It just loads that CSS and JS first inline
If you use FTP you can directly replace the current theme. However it is good practice to keep a copy of the previous release.
If you wish to not have more than one copy. You can take the new copy of the theme, unzip it first on your PC/Mac then upload the files via an FTP client. It will give you the option to overwrite the existing files.
Otherwise it is best practice for FTP uploads to rename the current theme to something like Enfold-Backup-08082022 Then upload the new one and call it Enfold. You can then roll back to the previous version just by renaming the folders.
If you have a license key you can connect it to pull the updates through with other WordPress updates by entering the API key in the panel. See Rikards earlier post.
Have you tried the two methods that Rikard suggested to turn on the auto updates from theme forest?
Glad you have found the issue for Tim.
I will raise a ticket seperately for my issue with updates. I have not been able to re-create this yet. I think it might be something to do with the specific clients host/plesk/cpanel install – I dont know which but I think theme updates had been disabled.
If I encounter the problem on a site where I can show you the issue properly I’ll raise another ticket.
