-
Posts
-
Hello ,
Having lot of time at hand due to COVID – 19 , i was tweaking my site for pagespeed and trying to reduce problems and load issues with my site . My website is pretty much static and has no dynamic pages . So i use Enfold’s elements for effects and many of my customer like the way they perform and load .
After checking i found that i am loading many elements only once through out my site . It would be better if i get them to load them inline rather than merging them and loading the whole files on all pages . I am saying this because google considers each page separately and because of that my main keyword pages or money pages which generate me revenue are getting heavily loaded of these scripts which are not being loaded on the same page .
Also after the last update on Google lighthouse project , it seems that laoding everything below 3 seconds is the game , its better if we load such element in inline or a different files and thus not burdening the money pages .
Hey 7thflow,
Thank you for the inquiry.
The theme automatically loads inline scripts and stylesheets in the head to speed up loading of above the fold content. Is that what you’re referring to?
We could also use the avf_force_print_asset_to_head filter to manually add files in the array and print them as inline scripts or stylesheets.
For further optimization, please check the following article.
// https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow
Best regards,
IsmaelThere are many content and media elements in the enfold theme like image with hotspots , animated countdown , etc . The thing is that many of them are only used once on a particular page . What i want to do is , rather than merging it with a single js and css files . I would rather prefer to call it in the location of the place where its used . This i want to do only for the elements that are used once in the the whole website. I think this will improve loading time and performance of my main pages which i get business from as they do not have to load the rest of the code which are there on other non important pages .
Hi,
Thank you for the update
Have you tried setting the Enfold > Performance > Disabling of template builder elements to the second option? With this option enabled, the theme will only load scripts and stylesheets for elements that are actually visible in the page.
Best regards,
IsmaelDear Ismael,
Many thanks for your input , I checked , the feature of Load only used Elements is loading all elements used on complete website and loading on each website page . I want to limit it each page which is using the element their respective files to be called so that i can merge the rest . I dont know about other users but this will definitely help me in speeding up my pages .
Hi,
This is not possible with the theme out of the box, so it will require a few modifications. Unfortunately, this is beyond the scope of support. You could instead make use of the browser caching by defining a longer expiry for the site resources.
// https://gtmetrix.com/leverage-browser-caching.html
Best regards,
IsmaelHi,
That is the intended purpose of the Load only used Elements option. It will only load the assets for elements that are present in the page. Unfortunately, I am not sure if this option works when the File Compression settings is enabled.
Where are you testing this option? Please enable the option and create a test page with only one element in it, then inspect the DOM.
Best regards,
IsmaelI checked , with the option of Load only Used Elements . Created a new page . Still it was loading js and css files from elements used on other pages .
Hi,
Thank you for waiting.
We just only learned that this is the intended behavior. As is common in many website, pages usually contain different sets of elements, so this might also mean that we have to generate a different compressed file for every page, which might cause more problem. This is why the file compression settings, when enabled, overrules the option “load only used elements”. So if you need the page to only load the assets of the elements that are actually in the page, then you have to disable the file compression settings.
Best regards,
IsmaelHello ,
Tried disabling merging and compression of CSS and JS files with “Load Only Used Elements” option selected . Still the all theme CSS and JS which are used on different pages are loaded on each page .
Like the number.css and numbers.js is loading on all pages but its only used on one page .
Hi,
Thank you for the info.
It turned out that that is how the option actually works — the theme will scan all elements that were added in the site, not just the current page, then load all assets in the frontend accordingly. Unfortunately, what you are asking will require modifications that are beyond the scope of support, so you might have to look for additional assistance from external sources.
Best regards,
Ismael
- You must be logged in to reply to this topic.