Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #856898

    Hi,

    I’m optimizing the speed on our website, through the help of gtmetrix and pagespeed Insights of Google.
    Now the image optimizing was no problem, but some picture are scaled on our homepage.
    So the speed is slowing down by this proces. I tried to scale those images, but on the detail view of the images it is also scaled (off course).

    Is there a possibility to have on the homepage through customization another way to show the image without scaling? So that we don’t lose speed on this? And not have scaled images on the detail view?

    #857274

    Hey Pieter,

    You can check this article and learn/apply some tricks to increase the speed of your site: https://wpengine.com/blog/site-speed-make-wordpress-lightning-fast/

    Best regards,
    John Torvik

    #857351

    Hi John,

    Yeah i have done most of them, but “OPTIMIZE IMAGES”: i need a customization on the homepage.
    The images shown on the homepage are scaled images of the portfolio page. So these images are scaled and slowing the proces down.
    I would like that you guys help me with the customization on the homepage, so that the homepage not scaling down the same images.

    #857404

    these optimizations only help if your images are not responsive.
    f.e. the featured-image – allthough you put in the non scaled image – takes the ( on media tab defined) 80x80px.
    this is a scaled image – but much smaller than the original ones.

    But this is not the point gtmetrix critisise.
    If on smaller screens the content rearanges the images shown on your screen are scaled to that amount you gave to them.
    f.e. in a 1/4 container the image could be on maximum at a 1000px wide screen 250px on your mobile this is scaled down..
    etc. pp

    Only on those f.e. floating text elements where an image is placed with a defined height and width to float in that text it makes sense to recalculate it to that dimensions ( or to take a nearby image-size of enfolds predefined sizes)

    I don’t want to give offence to you – but the most reason for image speed is that the uploaded source images are wrong optimized.

    Click on the images to enlarge: and by clicking again on the lightbox image it changes to next slide

    The first one has 389 KB and the second one 156KB
    both have the same dimensions !

    And these are realy hard test-images.
    On other images with real fotos – it might be more extreme to this test.

    On Photoshop f.e. there is an extra export modul for web images. There you can set up a higher compression level and progressiv scan option etc. pp.

    #857408

    and by the way : i like those one-page websites too – but on page-speed reasons ( and gtmetrix test-results) they have great disadvantages i think. Alot of content to load on starting page. Today a good time to load the first site has to be under 3sec.

    a page with over 90% on gtmetrix and over 80% YSlow (the cdn and cookie free domains value is for the most a bad value)
    is a good site.
    reducing the request on that page is a good advice.
    so minifying and combine js and css files is a good thing (use caching tools and minifying tools)

    ___________

    another point: do all wordpress sites need realy comments or emoji ?
    there are two good plugins disable emoji and disable comments

    ___________

    go and have a deeper look to the waterfall results.

    #857411

    Hi,

    I have let my images optimized by the WP SMUSH PRO plugin. So they are al the smallest size possible.

    But if i test my website through GTMETRIX i got this info:
    http://www.graphius.com/wp-content/uploads/2014/10/cataloog-02-495×400.png is resized in HTML or CSS from 495×400 to 199×161. Serving a scaled image could save….
    So the images are scaled.

    In hummingbird this info: Compressing and resizing http://www.graphius.com/wp-content/uploads/2014/10/cataloog-02-495×400.png could save….

    –> If any images in the list above recommend “Compressing and resizing”, that means their dimensions are scaled down in your content compared to the actual file dimensions. You can crop or scale those images using the WordPress image editor to match the embedded size in your content.

    I have tried to crop or scale them, but then they are not shown correctly on the portfolio page and detail page.
    I don’t know what i could do more to help this. I need a better pagespeed.

    #857448

    so if you don’t want to make your gtmetrix public – you have to wait til mods are here.

    by the way php7 is a resource monster :lol. sometimes – if you can test to switch to 5.6 try.

    #858355

    Hi,

    Where are you using the image? Is this from a portfolio grid element? Please edit the element then set the “Portfolio Grid Image Size” option to manual or the second option. You’ll be able to select the thumbnail size afterwards.

    Best regards,
    Ismael

    #858389

    Hi Ismael,

    The images are shown on a portfolio pages with indeed a portfolio grid.

    But the images are also shown on the homepage, ad random, in a post slider.
    This post slider loads the portfolio items in.
    And in this post slider the images are scaled down… and has a negative effect on the pagespeed.

    If you are looking at the homepage: http://www.graphius.com/en/ at the products section under the news. These are the images that are scaled down.

    Kind regards
    Vincent

    #858608

    look to the waterfall results if this is realy the case – allthough yslow critisise those images – because browser resize is something these speed tools do not like – maybe these are not so weighty reasons.

    On your slider there are two images
    the one is much more bigger thant the other slider images : slide_thefineartofprinting
    and one is a png (2_background) – which could be done as a jpg because of less transparency options
    both image have than together 118kb. instead of 400px on your upload !
    Here you can save more image size than on 14kb images !
    Pagespeed says that you can save space of 60kb on the three images you mentioned

    And by the way if you setup the f.e. featured image size : 1500 x 430 option and your images does not have that dimension – enfold upscales the images and crop them afterwards.
    Better is to upload bigger images than 1500px x 430px

    by the way the second: your response header time is very high – nearly 2s

    • This reply was modified 6 years, 7 months ago by Guenni007.
    #858666

    Hi,

    You may actually need those images to be larger for retina display. If you really want the images to be the same exact size as its parent container to satisfy the gmetrix tool, edit the portfolio grid element then set the “Portfolio Grid Image Size” option to manual or the second option. Select the thumbnail size manually. You can also control or adjust the size of the existing thumbnails with the following plugin.

    // https://wordpress.org/plugins/simple-image-sizes/

    Best regards,
    Ismael

    #858711

    you can add new image sizes on enfold by this code in functions.php of your child-theme:

    add_image_size( 'new-size', 261, 174, true );
    add_filter( 'image_size_names_choose', 'my_custom_sizes' );
    
    function my_custom_sizes( $sizes ) {
        return array_merge( $sizes, array(
            'new-size' => __( 'New Size' ),
        ) );
    }

    this part here: __( 'New Size' ), you can name as you like

    all new uploaded images will then have that new size to choose – if you only want these three images on the starting page to handle then a new upload is easier than a regenerate thumbnail plugin.

    #858740

    this is the concerning code in functions.php (parent theme):

    $avia_config['imgSize']['widget'] 	= array('width'=>36,  'height'=>36);						// small preview pics eg sidebar news
    $avia_config['imgSize']['square'] 	= array('width'=>180, 'height'=>180);		                 // small image for blogs
    $avia_config['imgSize']['featured'] 	= array('width'=>1500, 'height'=>430 );						// images for fullsize pages and fullsize slider
    $avia_config['imgSize']['featured_large'] 	= array('width'=>1500, 'height'=>630 );						// images for fullsize pages and fullsize slider
    $avia_config['imgSize']['extra_large'] 	= array('width'=>1500, 'height'=>1500 , 'crop' => false);	// images for fullscrren slider
    $avia_config['imgSize']['portfolio'] 		 = array('width'=>495, 'height'=>400 );						// images for portfolio entries (2,3 column)
    $avia_config['imgSize']['portfolio_small'] 	= array('width'=>260, 'height'=>185 );						// images for portfolio 4 columns
    $avia_config['imgSize']['gallery'] 		 = array('width'=>845, 'height'=>684 );						// images for portfolio entries (2,3 column)
    $avia_config['imgSize']['magazine'] 	= array('width'=>710, 'height'=>375 );						// images for magazines
    $avia_config['imgSize']['masonry'] 		 = array('width'=>705, 'height'=>705 , 'crop' => false);		// images for fullscreen masonry
    $avia_config['imgSize']['entry_with_sidebar'] 	= array('width'=>845, 'height'=>321);		            	// big images for blog and page entries
    $avia_config['imgSize']['entry_without_sidebar']= array('width'=>1210, 'height'=>423 );						// images for fullsize pages and fullsize slider
    $avia_config['imgSize'] = apply_filters('avf_modify_thumb_size', $avia_config['imgSize']);
    
    $avia_config['selectableImgSize'] = array(
    	'square' => __('Square','avia_framework'),
    	'featured'  => __('Featured Thin','avia_framework'),
    	'featured_large'  => __('Featured Large','avia_framework'),
    	'portfolio' => __('Portfolio','avia_framework'),
    	'gallery' 	=> __('Gallery','avia_framework'),
    	'entry_with_sidebar' => __('Entry with Sidebar','avia_framework'),
    	'entry_without_sidebar'	=> __('Entry without Sidebar','avia_framework'),
    	'extra_large' 	=> __('Fullscreen Sections/Sliders','avia_framework'),
    	
    );

    you see that there is allready an image size which could fit for your site (see comment: // images for portfolio 4 columns) – but it is not selectable ( portfolio_small)
    so maybe that is enough to make it selectable:

    add_filter( 'image_size_names_choose', 'my_custom_sizes' );
    function my_custom_sizes( $sizes ) {
        return array_merge( $sizes, array(
            'portfolio_small' => __( 'Portfolio Small' ),
        ) );
    }
    #859132

    Hi Guenni007,

    Activating the “Portfolio Small” size did the trick.
    I will test this on a retina display, but normally i would be good also!
    Many thanks

    Regards
    Vincent

    #859191

    Hi Vincent,

    Thanks for the feedback. Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.