-
AuthorPosts
-
July 31, 2018 at 5:05 pm #991988
Hi
I have 2 problems with the Fullwidth Easy Slider1) 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.
August 1, 2018 at 10:31 am #992308Hey 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,
IsmaelAugust 1, 2018 at 10:41 am #992315can 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.
August 1, 2018 at 10:52 am #992324Hi 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.chRegards
Bruno- This reply was modified 6 years, 4 months ago by bruwa.
August 1, 2018 at 11:02 am #992329ja 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); }
August 1, 2018 at 11:25 am #992336PS : dein Home link ist noch der der Test-Installation !!! den musst du noch ändern.
August 1, 2018 at 12:52 pm #992372Hi 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.
August 1, 2018 at 3:34 pm #992448This reply has been marked as private.August 1, 2018 at 3:50 pm #992453This reply has been marked as private.August 1, 2018 at 4:42 pm #992476Hi
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,
BrunoAugust 1, 2018 at 7:36 pm #992532i can not confirm to that – your page loads on my end fast enough.
but i have a 200mbit connectionbut 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.August 1, 2018 at 7:41 pm #992534on 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
August 1, 2018 at 9:15 pm #992558This reply has been marked as private.August 2, 2018 at 5:40 am #992695Hi,
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,
IsmaelAugust 2, 2018 at 10:55 am #992812Hi
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,
BrunoPS
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.
August 2, 2018 at 5:09 pm #992934by 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/0S0UKllkbut if you take instead a server in Europe see:
https://gtmetrix.com/reports/fotowalther.ch/euHFHSZv 1,9 secSeems 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.August 2, 2018 at 5:21 pm #992937did 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
August 2, 2018 at 6:01 pm #992948I 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.
August 3, 2018 at 10:29 am #993147 -
AuthorPosts
- You must be logged in to reply to this topic.