Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #991988

    Hi
    I have 2 problems with the Fullwidth Easy Slider

    1) The images are higher than the available monitor real estate. You are unable to appreciate the full height of the images. Either you don’t see the bottom part or you scroll down and miss the upper part of the images. [monitor size 2560 x 1600 and 1600 x 1200 px].
    Changing “Slideshow Image and Video Size” does not solve the problem.

    2) Although the first image is only 200 KB it takes a few seconds until it appears. [no slider image is more than 300 KB).
    Update: Unchecking the option to stretch the image seems to fasten loading.

    What can I do?

    Thanks
    Bruno

    • This topic was modified 6 years, 4 months ago by bruwa.
    #992308

    Hey bruwa,

    Thank you for using Enfold.

    1.) The full width slider’s height is based on the size of the slider images inside. This is to avoid distorting the images. Use the full screen slider instead if you want the whole slider to be visible above the fold. Please do note that the full screen slider is going to set the slider images as background. Parts of the images nay get cut off or go outside the background positioning area to keep their aspect ratio.

    2.) That file size is actually big but I know you’re concern about the image quality. Please use an image compression plugin like Shortpixel or EWWW Optimizer.

    // https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow

    Best regards,
    Ismael

    #992315

    can you make the link public? i can not believe that a 200kb image loads that way.
    it it is your photopage – use please original dimensions and not the 1500x1000px croped images.

    One Problem is that the original images are often better compressed than the cropped images of enfold. Because they do not compress those files.
    so from your image: 0411_D1A_5462.jpg (205kb) on original upload it becomes a cropped image 0411_D1A_5462-1500×1000.jpg with 884kb.

    So use for those big images alway your optimized originals.
    Or use those mentioned tools of ismael.

    a 3:2 aspect ration could hardly forced to show on a 16:9 Screen. If you can live with black borders you can choose not to cover but to contain the image – means the full image is shown centered and it depends on image orientation and dimension where those borders are.

    #992324

    Hi Guenni007
    thanks.
    I have just noticed that there still was one portrait image I missed. I removed it from the slider.
    You may have missed my latest update: unchecking the option “stretch image” seems to have improved loading time
    Please have a look https://www.fotowalther.ch

    Regards
    Bruno

    • This reply was modified 6 years, 4 months ago by bruwa.
    #992329

    ja und nimm die Original Bilder: Slideshow Image and Video Size : no scaling

    wenn du möchtest, dass die Bilder oben unten nicht über den Screen gehen. kann man das erzwingen:
    gib der full-width slideshow eine Custom Class. ich habe das mal mit zweien deiner Bilder gemacht, und der Slideshow die klasse: vollehoehe
    gegeben.

    dann habe ich ins quick css folgendes eingegeben:

    .vollehoehe img {
        max-height: calc(100vh - 170px);
    }

    die minus 170px sind dem Header-bereich geschuldet. Da kannst du noch ein wenig dran drehen.
    https://webers-testseite.de/slide-show/

    wenn du es gesehen hast – nehme ich die Bilder wieder raus.

    Wenn du es nur auf der startseite hast kannst du es auch so selectieren:

    .home .avia-slideshow img {
        max-height: calc(100vh - 170px);
    }
    #992336

    PS : dein Home link ist noch der der Test-Installation !!! den musst du noch ändern.

    #992372

    Hi Ismael and Guenno007
    thanks for your comments.

    – I unchecked the option “stretch image”
    – I reduced the size of the original images to 1200 x 800 px (Adobe Lightroom)
    Now the images fit on the smaller monitor (I don’t mind the black area on both sides).
    Unfortunately the relative image size is not adapted accordingly when seen on the larger monitor.
    The images only use 2/3 of the available height on the larger monitor (2560 x 1600 )

    I expected the theme to be responsive to monitor size. Or is there a way to make the slider images’ height fit on variable monitor sizes?

    Best regards,
    Bruno

    • This reply was modified 6 years, 4 months ago by bruwa.
    #992448
    This reply has been marked as private.
    #992453
    This reply has been marked as private.
    #992476

    Hi

    I very much appreciate the input of Guenno007
    He suggested that I add

    .home .avia-slideshow img {
        max-height: calc(100vh - 170px);
    }

    to the Quick CSS / style.css.
    He also set up a demo page for me [kudos] to show the result.

    His CSS code works, provided I use again the larger images (1600x1067px) I deliberately had resized to 1200x800px for the slider only.

    Unfortunately it still takes much too long for the first image of the slider to load.

    Regards,
    Bruno

    #992532

    i can not confirm to that – your page loads on my end fast enough.
    but i have a 200mbit connection

    but see here your results: https://gtmetrix.com/reports/fotowalther.ch/L1YaUTiT

    it seems that you have no gzip compression enabled ! (this is relevant for performance)
    and no leverage browser caching is defined and no expires header is set.

    i do always activate it via the htaccess file ( but it depends on your server) but commonly they serve as an apache server.
    this is a hidden file ( .htaccess) – but a lot of ftp clients can make them visible on default.
    you can download the file ( if you have f.e. a different permalink set – there will be one) via ftp – rename it to htaccess.txt and edit it with a good text editor ( f.e. : sublime text for mac or notepad++ for Windows)

    on default there will be something like this:

    # BEGIN WordPress
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    </IfModule>

    this existing entries have to be be untouched and depends on your settings you made in the dashboard.
    Most of the caching tools put in a lot of entries here.

    My settings for example are in front of that existing entries: ( means in front of # BEGIN WordPress):

    # Secure your wp-config
    # Disallow access to important files
    <FilesMatch "(^\.|wp-config\.php|xmlrpc\.php|(?<!robots)\.txt|(liesmich|readme)\.*)">
       Require all denied
    </FilesMatch>
    
    # secure htaccess-file
    <files ~ "^.*\.([Hh][Tt][Aa])">
    order allow,deny
    deny from all
    satisfy all
    </files>
    
    # Keep-Alive
    <ifModule mod_headers.c>
       Header set Connection keep-alive
    </ifModule>
     
    
    # Gzip
    <IfModule mod_mime.c>
        AddType application/javascript          js
        AddType application/vnd.ms-fontobject   eot
        AddType application/x-font-ttf          ttf ttc
        AddType font/opentype                   otf
        AddType application/x-font-woff         woff
        AddType application/x-woff              woff
        AddType image/svg+xml                   svg svgz 
        AddEncoding gzip                        svgz
    </Ifmodule>
     
    
    # GZip Kompression
    <IfModule mod_gzip.c>
     mod_gzip_on       Yes
     mod_gzip_dechunk  Yes
     mod_gzip_item_include file      \.(html?|txt|css|js|svg|php|pl)$
     mod_gzip_item_include handler   ^cgi-script$
     mod_gzip_item_include mime      ^text/.*
     mod_gzip_item_include mime      ^application/x-javascript.*
     mod_gzip_item_exclude mime      ^image/.*
     mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
    </IfModule>
    
     
    # Browsercache
    <IfModule mod_expires.c>
     ExpiresActive On
     ExpiresDefault "access plus 1 month"
     ExpiresByType text/css "access plus 1 month"
     ExpiresByType text/javascript "access plus 1 month"
     ExpiresByType text/html "access plus 1 month"
     ExpiresByType application/javascript "access plus 1 month"
     ExpiresByType application/x-javascript "access plus 1 month"
     ExpiresByType application/x-font-ttf "access plus 1 month"
     ExpiresByType application/x-font-woff "access plus 1 month"
     ExpiresByType application/x-woff "access plus 1 month"
     ExpiresByType application/xhtml-xml "access plus 600 seconds"
     ExpiresByType application/pdf "access 1 month"
     ExpiresByType image/gif "access plus 1 month"
     ExpiresByType image/jpg "access plus 1 month"
     ExpiresByType image/jpeg "access plus 1 month"
     ExpiresByType image/svg+xml "access plus 1 year"
     ExpiresByType image/svg "access plus 1 year“
     ExpiresByType image/png "access plus 1 month"
     ExpiresByType image/x-icon "access plus 1 month"
    </IfModule>
    
     
    # Deflate by FileType
    <IfModule mod_deflate.c>
     AddOutputFilterByType DEFLATE text/plain
     AddOutputFilterByType DEFLATE text/html
     AddOutputFilterByType DEFLATE text/xml
     AddOutputFilterByType DEFLATE text/css
     AddOutputFilterByType DEFLATE text/javascript
     AddOutputFilterByType DEFLATE image/svg+xml
     AddOutputFilterByType DEFLATE application/javascript
     AddOutputFilterByType DEFLATE application/xml
     AddOutputFilterByType DEFLATE application/xhtml+xml
     AddOutputFilterByType DEFLATE application/rss+xml
     AddOutputFilterByType DEFLATE application/atom_xml
     AddOutputFilterByType DEFLATE application/x-woff
     AddOutputFilterByType DEFLATE application/x-font-ttf
     AddOutputFilterByType DEFLATE application/x-font-woff
     AddOutputFilterByType DEFLATE application/javascript
     AddOutputFilterByType DEFLATE application/x-javascript
     AddOutputFilterByType DEFLATE application/x-shockwave-flash
    </IfModule>
     
    # ETag
    Header unset ETag
    FileETag None
    

    you see here both the older gzip and the more modern mod_deflate module.
    on mod_expires you can set different time settings – optimized for your website.

    After uploading this htaccess.txt file rename the existing .htaccess to htaccess.bak ( to have a fallback)
    then rename the new file to .htaccess(be carefull to set the dot before the file) – maybe it is a good advice to set the file permissions to 640.

    #992534

    on Enfold Options this is a nice thing ( since new Enfold 4.4.1 i deinstalled for example the bwp minify and some caching tools)
    activate Merging css and js files – and maybe load only used elements !
    maybe disable jQuery migrate and emoji – most do not use those features.

    Refresh all browser cache and see what happens on gtmetrix.com

    #992558
    This reply has been marked as private.
    #992695

    Hi,

    Thanks for the update.

    Yes, you can copy that configuration inside the .htaccess file. It’s the same configuration as when you’re installing a cache plugin.

    Best regards,
    Ismael

    #992812

    Hi
    I copied the suggested codes to my .htaccess file just after the title “# BEGIN WordPress” (when I put them before this title, I was unable to login to my site).
    Visually I could not see any change.

    I performed the gtmetrix test.
    – the Performance Score significantly increased from D to B.
    – to my big surprise, the Page Fully Loaded Time increased from 3.3s to 5s

    – I wonder what conclusion I should draw: better performance resulting in increased loading time by 50%?
    – The test recommends optimizing 19 images (those in the slider), resulting in a total reduction of 100KB (5.4KB per image). I doubt that this is of any significance.

    I would appreciate to hear your take on that.

    BTW: Changing the .htaccess permissions from 644 to 640 (as suggested by Guenni007) was apparently not a good idea: I was then unable to login to my site.

    Regards,
    Bruno

    PS
    I replied to some of Guenni007’s comments. When I thought they were not of general interest but rather private (and some in German), I set them as private reply. I assumed that private meant that only he would see these replies. Apparently the inverse was the case. No harm done, but apparently my misunderstanding of “private reply”.

    • This reply was modified 6 years, 4 months ago by bruwa.
    #992934

    by the way i’m a participant as you are so i do not see private content.

    it depends on your hoster – my hosting works fine with 640 but the lines:

    # secure htaccess-file
    <files ~ "^.*\.([Hh][Tt][Aa])">
    order allow,deny
    deny from all
    satisfy all
    </files>

    are a bit of security for that file.

    for some of my customers i have to set the file to 644 too. – sorry

    https://tools.pingdom.com/#!/dNdVKn/https://fotowalther.ch/
    https://gtmetrix.com/reports/fotowalther.ch/0S0UKllk

    but if you take instead a server in Europe see:
    https://gtmetrix.com/reports/fotowalther.ch/euHFHSZv 1,9 sec

    Seems to be ok now. don’t let yourself become a slave to these testing-sites, they just give good hints where to hook.
    The pictures are often criticized there to optimize, but strangely only your logo is too large. Why don’t you take a jpg instead of png which is 1/5th the size.
    The other images have only a 4% reducing amount – it comes from our little calculation to the given screenheight.

    #992937

    did you set the Enfold options to load only used element
    and try to deactivate jQuery-migrate! If you have no films on your page deactivate these setting too (youtube and selfhosted videos) etc.

    Allways empty all cachings. and on Performance checkmark: Delete old CSS and JS files?

    check if your hoster limits your PHP-Memory Limit usage to the installation.
    You can ( if they allow those settings) enlarge it via wp-config.php entries:
    place it f.e. just behind: define('WP_DEBUG', false);

    define( 'WP_MEMORY_LIMIT', '256M' );
    

    check what your hosting supports for you

    #992948

    I missed the “deactivate jQuery-migrate” and the “Delete old CSS and JS files” options.
    I saved 40KB by using a jpg logo file (I think when I started with the Flashlight theme 5 years ago, I had to use a png file – but I could be wrong).
    The PHP-Memory limit has been 265M for years.

    I also administrate my wife’s homepage (ANNA) where I see the same loading issue (and a Google search confirms that I’m not the only one; not necessarily with Enfold, but the key message is “not all sliders are created equal”). There, instead of using a plugin, I recreated the slider images and downsized them to 100KB. I don’t see any change in loading time though.

    My private replies predominantly said THANK YOU SO MUCH for your help. You made my day(s).
    You spontaneously answered all my (private) questions without even having read them – spooky ;-)

    Best regards,
    Bruno

    • This reply was modified 6 years, 4 months ago by bruwa.
    #993147

    Hi,

    Awesome! Glad it’s resolved. Thanks to @Guenni007, as usual. :)

    Best regards,
    Ismael

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