-
Posts
-
Hello support team,
I have set up a new website and I am having some problems implementing the desired layout.
I have set this up as an AJAX portfolio for the portfolios. However, as soon as I click on an element, it takes a very long time for it to appear in ‘large’. Is there a way to speed this up? It takes so long that I think both Google and the user don’t like it and leave the page or think there is a mistake there.
Here is my example page:
Hey klick-design-rbh,
Thank you for the inquiry.
There should be a loading icon displayed while the associated images in the portfolio AJAX item are loading. You can see this behavior in the demo: https://kriesi.at/themes/enfold-2017/portfolio/portfolio-4-columns-centered-ajax/
Did you happen to disable the loading icon or modify any of the theme templates?
Best regards,
IsmaelThank you very much Ismael,
Yes, I disabled the loading icon because it always looks unprofessional when it appears, even on all other pages. I have enabled it now, but it doesn’t change the fact that it takes a long time to load. So it’s no fun for the user to click through the products later if he has to wait a very long time each time. An image has around 64k, which is not that much. Are there any other settings to speed up the process?
Thank you very much.
BR, MatthiasHi,
One thing that could probably help speed things up a bit is to preload the images used in the portfolio AJAX preview. This way, the images will be ready prior to opening the portfolio item. Another is image compression and general site or page optimization. Please check the links below for more info.
— https://www.wppagebuilders.com/preload-images-wordpress/
— https://gtmetrix.com/wordpress-optimization-guide.html
— https://wpengine.com/resources/improve-wordpress-site-speed/We also noticed that the images are in webp format. Are you using a plugin to convert them? Does it make any difference when this plugin is disabled?
Best regards,
IsmaelHello everyone,
I have found out where the problem lies. Yes, it is the loading times of the images. But the main problem is the Mac. It executes the scripts in the browser instead of in the Java Console as on the PC. Is it possible to influence this?
Thank you very much… unfortunately it has taken a little longer now.
MatthiasStill a great theme!
Hi,
Thank you for the update.
We’re not entirely sure what you mean by “Java Console”. Could you kindly clarify or share a screenshot to help us understand better?
Best regards,
Ismaelcan we influence the image shown in the ajax preview ( that img insided avia-gallery-big ) – it seems to use the recalculated “large” image.
But as you know this might be bigger in file size than the original uploaded image!
I can not find a filter to adjust it.or could we influence it by
$params['preview_size'] = apply_filters( 'avf_ajax_preview_image_size', 'gallery' );i can find this in portfolio.php
// create array with responsive info for lightbox $img = Av_Responsive_Images()->responsive_image_src( $attachment->ID, 'large' );bring it to full will often reduce file-size – as you know that Enfold standard compression leads to bigger file-sizes on large image.
ok – i found the place to change in gallery.php (line 757)
$prev = wp_get_attachment_image_src( $attachment->ID, $preview_size );if we would use :
$prev = wp_get_attachment_image_src( $attachment->ID, 'full' );looking to his page f.e.:
the krebs-treppen-systeme-gelaender-system30-3.jpg is 121kb
but krebs-treppen-systeme-gelaender-system30-3-1030×839.jpg is 268kbthe whole page got over 112MB images – and could be reduced to a half size.
PS : you should use for the thumbnails in the grid recalculated smaller images e.g.
you are now using the full image (no-scaling).ok – this seems to be enough inside child-theme functions.php:
add_filter("avf_ajax_preview_image_size", function($size) { $size = "full"; return $size; }, 10, 1);now – thanks for the admin permissions.
i did what i mentioned above: for the thumbs in grid i take the portfolio size (495×400)
using that snippet to have original images in the ajax preview image ( on imagify you have choosen to have no compression – so original image might be of less file-size than the recalculated large image-size )
and disabeling the enfold option to use lazyloading ( maybe the option of wp-rocket is better )but with these changings – you can see a much better loading performance.
in additon – i decided to show on lightbox the full image ( because your large recalculated images are much bigger in file-size than the full one )
and to have no scroll on background – on opend lightbox.
- You must be logged in to reply to this topic.