Tagged: enfold 4.3, loading time
-
AuthorPosts
-
April 25, 2018 at 11:18 am #946518
Hello,
I welcome the new version of the Enfold theme 4.3 very much. The amount of JS an CSS codes were too high. However, it seems the reducing not so hight as you insist because https://testmysite.withgoogle.com/intl/en-gb says the loading page of our website is now 10 seconds! (see the screenshot https://snag.gy/HraoDt.jpg). Although before the last update of Enfold we had (not good), but still better ca 6 seconds. I turned on in Performance settings:
- CSS and JS compression
- Load only used element
- Disable Emoji
- Disable jQuery Migration
- Load Google font in footer
Also, I deleted old CSS and JS files. I thought these settings should help to speed up loading of our website. Nevertheless, Google says something different. We did not use any Cache plugin or Image optimizer plugin because we recorded problems with them. Moreover, I don’t think that using external plugins is the only solution. They may cause problems and it is very complicated to make sure that they don’t cause any problem even we check the website now. I would say the plugins are not a way, the first and main optimization must run through the theme itself. So you carried out but I am interested in Google shows the different (worse) time for our webpages now.
April 27, 2018 at 5:20 am #947611Hey mjakubicek,
Please see the link in private, that test shows your site loading in less than 2 seconds.
Best regards,
RikardApril 27, 2018 at 3:23 pm #947992Hey Rikard,
thank you for sending this tool. But how does Google compute speed loading of our website? I would not like to find a tool which shows better time, I would like to have the best time on Google because most of users come from Google on our website. When Google penalize our website due to the size it may not help us that our website is loaded faster via another tool.
April 27, 2018 at 11:51 pm #948228Test with GTMetrix or webpagetest.org, for the most accurate results. My article covers this. Happy to answer any questions.
April 30, 2018 at 9:29 am #948902Thank you for sending next tool and tips, but I do not need to find a tool which gives us the best time of loading. I would need to have the best time on Google test tool because U guess Google does not take in consideration any other tools. It looks at its tool and if the website does not have a good statistics it penalizes this website. As I wrote in my first post, I do not think that cache or optimizing plugins are a good way because we cannot be sure that caching and optimizing will work for all users in all browsers correctly every time.
May 1, 2018 at 7:14 am #949392Hi,
As far as I know, Google PSI doesn’t display any load times at all? Why that is you would have to ask them about, please try the other tools recommended in the thread if you want to see your actual load times.
Best regards,
RikardMay 1, 2018 at 2:52 pm #949549I do WordPress optimization and SEO for a living. It sounds like you are trying to address both. If that’s the case, I recommend that you educate yourself further on both topics. I’m writing another article (Enfold Theme Release Review) that may be of interest.
Ask anyone that does WordPress optimization and they will tell you they do NOT use the Google speed tools.
May 3, 2018 at 6:03 am #950476May 3, 2018 at 7:54 am #950554Thank you too! I definitely leave Google testing. Anyway, your review shows that Minify JavaScript and Inline small CSS are rated with the grade E in comparison with the preview version 4.2.3 of Enfold. So how can I understand the minification and optimization JS and CSS in the current version of Enfold?
Also, I have noticed that pictures which are resized by Enfold/WP are greater in the size than their original files, even though the modified picture is smaller, e.g.
https://www.sketchengine.eu/wp-content/uploads/cornelsen-min-180×180.png
vs the bigger original picture
https://www.sketchengine.eu/wp-content/uploads/cornelsen-min.png
Best,May 3, 2018 at 2:26 pm #950790I will have to defer to Enfold for your latest questions. The purpose of my article is to track and share my findings, for both the good and the bad. That way, when someone asks me for help, I have centralized locations (e.g. blog posts) to point them to.
May 4, 2018 at 7:21 am #951387Hi,
Also, I have noticed that pictures which are resized by Enfold/WP are greater in the size than their original files, even though the modified picture is smaller, e.g.
The thumbnail is actually smaller than the source or the original image.
https://www.sketchengine.eu/wp-content/uploads/cornelsen-min-180×180.png
vs the bigger original picture
https://www.sketchengine.eu/wp-content/uploads/cornelsen-min.pngBest regards,
IsmaelMay 4, 2018 at 11:11 am #951527Hi Ismael,
you’re right. But I mean the size in bytes. The resized picture has 7 KB, but the original one only 5KB. For greater pictures, the difference is bigger. I would not have e.g. 20% more data due to the fact my pictures are modified by Enfold/WP…
May 4, 2018 at 10:28 pm #951936Hi,
You can always try a third party plugin to optimize the images more on size, for example compress them down so they can work a lot faster.
Best regards,
BasilisMay 9, 2018 at 2:48 pm #953955Hi Basilis,
you don’t solve our problem. The solution is not to use a plugin of the third party, because the pictures are maximally optimized while preserving the quality. The only solution, which I can see, is to upload the image in all dimension we need, but it is not very practical.
The example below shows that automatic modifying of pictures by Enfold does not work very well. I would guess that using another dimension (smaller) from my original one the result size in bytes will not bigger or not too much, but the reality is different.https://www.sketchengine.eu/wp-content/uploads/main-image-5-min.jpg (154 kB; dimension 1500×1000) – original file
https://www.sketchengine.eu/wp-content/uploads/main-image-5-min-1500×1000.jpg (414 kB; dimension 1500×1000) – modified file by Enfold
https://www.sketchengine.eu/wp-content/uploads/main-image-5-min-1210×423 (330 kB; dimension 1210×423) – modified file by Enfold
https://www.sketchengine.eu/wp-content/uploads/main-image-5-min-1500×630 (405 kB; dimension 1500×630) – modified file by Enfold
https://www.sketchengine.eu/wp-content/uploads/main-image-5-min-845×684.jpg (359 kB; dimension 845×684) – modified file by EnfoldMay 11, 2018 at 11:42 am #955192Hi,
Thanks for the update. I think it happens because the theme or WP returns the thumbnails with the highest quality. Please try this filter in the functions.php file.
add_action('after_setup_theme', function() { function av_return_75(){ return 75; } add_filter('jpeg_quality', 'av_return_75'); add_filter('wp_editor_set_quality', 'av_return_75'); });
It will override the theme’s “av_return_100” function.
if( ! function_exists( 'av_return_100' ) ) { /** * Sets the default image to 100% quality for more beautiful images when used in conjunction with img optimization plugins * * @since 4.3 * @added_by Kriesi */ function av_return_100(){ return 100; } add_filter('jpeg_quality', 'av_return_100'); add_filter('wp_editor_set_quality', 'av_return_100'); }
IMPORTANT: You have to regenerate the thumbnails.
Best regards,
IsmaelMay 11, 2018 at 11:55 am #955199Hi Ismael,
it looks like a great solution, but I have got the error
ERROR: Attempted to set image quality outside of the range [1,100].
when I regenerate the thumbnails. I have just exactly copied your code above where the values are 76 and 75 which corresponds to the range 1,100.May 15, 2018 at 12:35 pm #956943Hi,
We modified the code a bit.
add_action('after_setup_theme', function() { function av_return_75(){ return 75; } add_filter('jpeg_quality', 'av_return_75'); add_filter('wp_editor_set_quality', 'av_return_75'); });
Please try it again.
Best regards,
IsmaelMay 15, 2018 at 2:13 pm #957014Hi,
thank you, regenerating works now. But the size was not reduced. My original file has dimension 1500×1000 with the quality 90 and the size 145 kB. https://www.sketchengine.eu/wp-content/uploads/main-image-5.jpg
When I see the thumbnails (the quality 75, I tried also 50 and 5 and there was no difference) the thumbnails have the following sizes:
dimensions 1500×1000 – 414 kB
dimensions 1030×687 – 432 kBIt seems to me that it does not work because the sizes were preserved.
May 17, 2018 at 8:02 am #957983Hi,
Thanks for the update. We should probably override the default function. Please replace the code with this.
function av_return_100(){ return 60; } add_filter('jpeg_quality', 'av_return_100'); add_filter('wp_editor_set_quality', 'av_return_100');
Best regards,
IsmaelMay 17, 2018 at 9:16 am #958039Hi,
I did not find the right format of notation or the code does not work.
The following notations do not work:
function av_return_100(){ return 60; } add_filter('jpeg_quality', 'av_return_100'); add_filter('wp_editor_set_quality', 'av_return_100');
add_action('after_setup_theme', function() { function av_return_100(){ return 60; } add_filter('jpeg_quality', 'av_return_100'); add_filter('wp_editor_set_quality', 'av_return_100'); });
This one works () but after regenerating thumbnails no changes.
function av_return_100(){ return 60; add_filter('jpeg_quality', 'av_return_100'); add_filter('wp_editor_set_quality', 'av_return_100'); };
(I am not sure about it at all)
Can you please find a code which would have an effect?
May 21, 2018 at 5:26 am #959567Hi,
The first one should work because it will override the default av_return_100 function. Could you try it again please? Delete the actual av_return_100 function inside the functions-enfold.php file if it doesn’t work.
Best regards,
IsmaelMay 21, 2018 at 3:14 pm #959803Hi,
no changes happened. I am using the following code in our function.php file within the child folder of Enfold theme:
function av_return_100(){ return 60; } add_filter('jpeg_quality', 'av_return_100'); add_filter('wp_editor_set_quality', 'av_return_100');
and I commented the following code in the functions-enfold.php file within the original folder of Enfold theme:
#if( ! function_exists( 'av_return_100' ) ) #{ # /** # * Sets the default image to 100% quality for more beautiful images when used in conjunction with img optimization plugins # * # * @since 4.3 # * @added_by Kriesi # */ # function av_return_100(){ return 100; } # add_filter('jpeg_quality', 'av_return_100'); # add_filter('wp_editor_set_quality', 'av_return_100'); #}
How can I do so that it works?
May 22, 2018 at 6:21 am #960151Hey!
Odd. How do you regenerate the thumbnails? Please provide the login details and the link to one of the images in the private field.
Cheers!
IsmaelMay 22, 2018 at 10:50 am #960240Just by clicking on the Regenerate thumbnails button for the image https://www.sketchengine.eu/wp-content/uploads/main-image-5.jpg
May 25, 2018 at 2:27 pm #962139Hi,
These are the generated thumbnails when I uploaded the main-image-5.jpg in my local installation.
// https://imgur.com/a/rKXBthQ
The 1500×1000 thumbnail is only 54 kB. I added the filter above prior to the upload. You may need to manually upload the image instead of using the “regenerate” button. Or try to use this plugin.
// https://wordpress.org/plugins/force-regenerate-thumbnails/
Best regards,
IsmaelMay 30, 2018 at 3:13 pm #964306Sorry, I have just re-uploaded the following file https://www.sketchengine.eu/wp-content/uploads/search_form_ruskell.png (1162×202; 27 kB) but when I look at its thumbnail https://www.sketchengine.eu/wp-content/uploads/search_form_ruskell-768×134.png it has 60 kB. I am using the code above in the following format:
function av_return_100(){ return 75; add_filter('jpeg_quality', 'av_return_100'); add_filter('wp_editor_set_quality', 'av_return_100'); };
I cannot see that it will work properly.
June 2, 2018 at 12:13 am #965609Hi,
Please install an Image optimization plugin like Optimus or ShortPixel. This will ensure all your images will be optimized.
The thumbnails should be regenerated after installing the optimization plugin again.Best regards,
Vinay -
AuthorPosts
- You must be logged in to reply to this topic.