I purchased a new license just to get help with this question.
It takes my site about 14 seconds to load. I have customers leaving the site thinking it is broken. My advertising on Facebook is not converting because the site isn't loading fast enough. What can I do to speed up the performance? Tried changing the "Performance Mode" but didn't seem to make a difference. All graphics have been optimized. Please help. Thanks!
You can enable Enhanced Lazy Load by default but I am not sure that your page loading time is slow just because of LayerSlider. I can see requests of 69 different CSS files, 35 different JS files and a huge amount of SVGs. Every single request to your server can slow down the page loading time. I recommend you to use an optimizer plugin (which can - for example - merge your css and js files into one single css / js file, etc.) If you would like to have fast page loading time from all over the worlds, it would be very important to use a CDN service.
If you open Google Chrome DevTools, under the Network tab you will find all the request/files. (Please check the Disable cache option and refresh your site after you've opened the DevTools.)
All SVGs are copies of six shapes. Can you verify that these 6 shapes are Layer Slider shapes? and if so, is there a way to combine them so they are only 6 files and not hundreds of SVGs.
my website is made of 10 layer sliders. Is there a way I can turn them all off, then turn them on one-by-one to see which one is introducing all those SVGs?
I'm not sure how you've embedded those sliders but you can remove the shortcodes and insert them back one-by-one for example. But I don't think that the main reason of the slow loading time are these SVGs. I'm not sure why is your page loading so many css and js files if there is nothing but LayerSlider sliders on your website.
1. Why does it sometimes load the same assets twice. See "double.jpg"
2. What are all the "ls-project.." files? It seems they are freeze-frames of some of the slides. Some are even freeze-frames of a version of the slide that has since been modified. Please see "ls-project.jpg". Are they generated on the fly? Where do they exist? They are not in the Wordpress media. Can they be deleted?
3. I have two versions of each slide. One for the desktop OR tablet, AND one for phones. I am controlling which is shown through the "hide below NNN/show above NNN" functions. I do this because the options given to automatically show and hide on devices only allows for the same version to appear on phone OR tablet AND one for desktop. a) Is there a better way to do what I want other than the "hide below NNN/show above NNN" functions? b) Even if I am seeing it on desktop and I do not resize the browser small enough to trigger my "phone" version, will it still load the asset for the phone version? Is there a way to prevent it?
There can be several reasons why you can see double requests to the same files, but it doesn't mean that these files use that much bandwidth. The browser is intelligent and can continue to download file-parts, etc. And not all double-files are related to LayerSlider - for example style.min.css
The ls-project.... files are the thumbnails of the slides. On every slide change the browser is accessing to the current and the next slide thumbnail image but these are also loaded only once.
If you are using the same images and videos inside the desktop/tablet and the mobile version of the slider, the browser will download those asset only once, so that should not affect page loading time.
Are "ls-project...." files generated on the fly? Where do they exist? They are not in the Wordpress media. Can they be deleted?
I amusing different assets for phone/tablet and desktop. a) Is there a better way to do what I want other than the "hide below NNN/show above NNN" functions? b) Even if I am seeing it on desktop and I do not resize the browser small enough to trigger my "phone" version, will it still load the asset for the phone version? Is there a way to prevent it?
No, they are generated when you click to the Capture Slide button under Slide -> Slide Thumbnail
There is no better way in the current version and if you are using the same assets, they won't be loaded twice. If you are using completely different images for example in the phone version, those images will be also loaded, but with a lazy loading method.
You cannot disable them, but you can remove them. Unfortunately this must be done one-by-one in all slides of all your sliders. Open the slider, go to Slide on the right sidebar and scroll down to slide thumbnail. If the picture box is not empty, there is a slide thumbnail set to that slide. Click on the menu icon in the upper right corner of the picture box and choose Remove Image from the dropdown menu. This must be repeat for all the slides with thumbnail, in all your sliders.
Thank you George. I was able to figure it out. If you remove the thumbnail, nothing uploads, but then you are left with just the name of the slider as an identifier when looking at all your layer sliders in the Wordpress dashboard. My solve was to make my own thumbnails for each slider that are just a few kilobytes each.
My question is if when visiting the website, the layer slider does not display the thumbnail on the visitors screen, then why does it push it to the browser and force the user to download it? What purpose does delivering the thumbnail to the browser serve?
I have a slider way down on the page that is not visible on the initial page load. How can I set it to be complete and visible when the user scrolls down to it? I don't want it to load and animate once it appears in the browser viewport, but as soon as the page loads.
"My question is if when visiting the website, the layer slider does not display the thumbnail on the visitors screen, then why does it push it to the browser and force the user to download it? What purpose does delivering the thumbnail to the browser serve?"
LayerSlider is using those thumbs for the thumbnail navigations (and loads them even is you are not using a skin with thumbnails).
"I have a slider way down on the page that is not visible on the initial page load. How can I set it to be complete and visible when the user scrolls down to it? I don't want it to load and animate once it appears in the browser viewport, but as soon as the page loads."
Under Project Settings -> Slideshow, please disable the Start only in viewport setting.
Thank you George, the Start only in viewport setting worked perfectly. If I may suggest a future feature is to give the user an option if they want to upload the thumbnails or not. Their options presently are to delete the thumbnails from the file and have no visual way of identifying their sliders other than the name, or include thumbnails that are uploaded even if the skin does not use thumbnail navigation. None of my sliders use thumbnail navigation but I am forced to upload almost 5MB of them.
I purchased a new license just to get help with this question.
It takes my site about 14 seconds to load. I have customers leaving the site thinking it is broken. My advertising on Facebook is not converting because the site isn't loading fast enough. What can I do to speed up the performance? Tried changing the "Performance Mode" but didn't seem to make a difference. All graphics have been optimized. Please help. Thanks!
Hello Daniel,
You can enable Enhanced Lazy Load by default but I am not sure that your page loading time is slow just because of LayerSlider. I can see requests of 69 different CSS files, 35 different JS files and a huge amount of SVGs. Every single request to your server can slow down the page loading time. I recommend you to use an optimizer plugin (which can - for example - merge your css and js files into one single css / js file, etc.) If you would like to have fast page loading time from all over the worlds, it would be very important to use a CDN service.
.
Attached files: open-layerslider-settings.png
layerslider-settings-enhanced-lazy-load.png
Best Regards,
George | Kreatura Dev Team
thank you George. Can you tell me the name of the SVGs? The site doesn’t use any. How can I obtain a list of them or thumbnails. How can I check this?
Hello Daniel,
If you open Google Chrome DevTools, under the Network tab you will find all the request/files. (Please check the Disable cache option and refresh your site after you've opened the DevTools.)
Best Regards,
George | Kreatura Dev Team
thank you. There are many items that begin with “ls-project-(number)-slide-1.jpg. Are these generated by layer slider or should I delete them?
Also, I see many files that are “data:image/svg+xml;…” I have no idea what these files are. How can I show where they’re being used?
No, please do not delete any files.
It is possible that many SVG files are icon layers in LayerSlider. But the rest of them.... I don't know.
Best Regards,
George | Kreatura Dev Team
All SVGs are copies of six shapes. Can you verify that these 6 shapes are Layer Slider shapes? and if so, is there a way to combine them so they are only 6 files and not hundreds of SVGs.
Attached files: 6-shapes.jpg
Sorry, I am not sure about that. I am not know every single icons in LayerSlider - there are thousands of them :-(
Best Regards,
George | Kreatura Dev Team
my website is made of 10 layer sliders. Is there a way I can turn them all off, then turn them on one-by-one to see which one is introducing all those SVGs?
I'm not sure how you've embedded those sliders but you can remove the shortcodes and insert them back one-by-one for example. But I don't think that the main reason of the slow loading time are these SVGs. I'm not sure why is your page loading so many css and js files if there is nothing but LayerSlider sliders on your website.
Best Regards,
George | Kreatura Dev Team
I don’t know either. They are the only things on the page except the brown header bar at the top with links. All else is Layer Slider.
Which theme are you using?
Best Regards,
George | Kreatura Dev Team
Kalium
I think, you should switch to a default theme that doesn't try to load many unnecessary assets.
Best Regards,
George | Kreatura Dev Team
Hi George. A few questions.
1. Why does it sometimes load the same assets twice. See "double.jpg"
2. What are all the "ls-project.." files? It seems they are freeze-frames of some of the slides. Some are even freeze-frames of a version of the slide that has since been modified. Please see "ls-project.jpg". Are they generated on the fly? Where do they exist? They are not in the Wordpress media. Can they be deleted?
3. I have two versions of each slide. One for the desktop OR tablet, AND one for phones. I am controlling which is shown through the "hide below NNN/show above NNN" functions. I do this because the options given to automatically show and hide on devices only allows for the same version to appear on phone OR tablet AND one for desktop. a) Is there a better way to do what I want other than the "hide below NNN/show above NNN" functions? b) Even if I am seeing it on desktop and I do not resize the browser small enough to trigger my "phone" version, will it still load the asset for the phone version? Is there a way to prevent it?
Attached files: double.jpg
ls-project.jpg
Hello Daniel,
There can be several reasons why you can see double requests to the same files, but it doesn't mean that these files use that much bandwidth. The browser is intelligent and can continue to download file-parts, etc. And not all double-files are related to LayerSlider - for example style.min.css
The ls-project.... files are the thumbnails of the slides. On every slide change the browser is accessing to the current and the next slide thumbnail image but these are also loaded only once.
If you are using the same images and videos inside the desktop/tablet and the mobile version of the slider, the browser will download those asset only once, so that should not affect page loading time.
Best Regards,
George | Kreatura Dev Team
Are "ls-project...." files generated on the fly? Where do they exist? They are not in the Wordpress media. Can they be deleted?
I amusing different assets for phone/tablet and desktop. a) Is there a better way to do what I want other than the "hide below NNN/show above NNN" functions? b) Even if I am seeing it on desktop and I do not resize the browser small enough to trigger my "phone" version, will it still load the asset for the phone version? Is there a way to prevent it?
No, they are generated when you click to the Capture Slide button under Slide -> Slide Thumbnail
There is no better way in the current version and if you are using the same assets, they won't be loaded twice. If you are using completely different images for example in the phone version, those images will be also loaded, but with a lazy loading method.
Best Regards,
George | Kreatura Dev Team
Are the "ls-project...." JPEG files used to render the webpage? Can I disable these thumbnails from uploading? Collectively, they take up 4.7 MB.
You cannot disable them, but you can remove them. Unfortunately this must be done one-by-one in all slides of all your sliders. Open the slider, go to Slide on the right sidebar and scroll down to slide thumbnail. If the picture box is not empty, there is a slide thumbnail set to that slide. Click on the menu icon in the upper right corner of the picture box and choose Remove Image from the dropdown menu. This must be repeat for all the slides with thumbnail, in all your sliders.
Attached files: slide-thumbnail.png
remove-thumbnail-image.png
Best Regards,
George | Kreatura Dev Team
Thank you George. I was able to figure it out. If you remove the thumbnail, nothing uploads, but then you are left with just the name of the slider as an identifier when looking at all your layer sliders in the Wordpress dashboard. My solve was to make my own thumbnails for each slider that are just a few kilobytes each.
My question is if when visiting the website, the layer slider does not display the thumbnail on the visitors screen, then why does it push it to the browser and force the user to download it? What purpose does delivering the thumbnail to the browser serve?
Hi George.
I have a slider way down on the page that is not visible on the initial page load. How can I set it to be complete and visible when the user scrolls down to it? I don't want it to load and animate once it appears in the browser viewport, but as soon as the page loads.
"My question is if when visiting the website, the layer slider does not display the thumbnail on the visitors screen, then why does it push it to the browser and force the user to download it? What purpose does delivering the thumbnail to the browser serve?"
LayerSlider is using those thumbs for the thumbnail navigations (and loads them even is you are not using a skin with thumbnails).
"I have a slider way down on the page that is not visible on the initial page load. How can I set it to be complete and visible when the user scrolls down to it? I don't want it to load and animate once it appears in the browser viewport, but as soon as the page loads."
Under Project Settings -> Slideshow, please disable the Start only in viewport setting.
Best Regards,
George | Kreatura Dev Team
Thank you George, the Start only in viewport setting worked perfectly. If I may suggest a future feature is to give the user an option if they want to upload the thumbnails or not. Their options presently are to delete the thumbnails from the file and have no visual way of identifying their sliders other than the name, or include thumbnails that are uploaded even if the skin does not use thumbnail navigation. None of my sliders use thumbnail navigation but I am forced to upload almost 5MB of them.
You are right, thank you for this feedback.
Best Regards,
George | Kreatura Dev Team