Unfortunately for me, Meta Slider WP plugin does not support lazy load, but it's perfect for what I need -- well almost. Here's why:
I have a ton of images (per slider) that will be displayed in multiple sliders using this WP Meta Slider plugin. All sliders will use the Flex Slider option, not the other options they have available. And, as you can imagine, the page load time is awful.
I looked up lazy load and came across this site:
http://www.appelsiini.net/projects/lazyload
It seems to be the perfect solution for what I need, but where do I need to input the snippet of coding in Meta Slider files to get this plugin to stop loading all the images at one time? What's happening is when a visitor comes to the site, this plugin loads every single image you have uploaded to it at that first-time page load which is causing the page to load awfully slow.
Additional info:
The images are pngs, 120x220 and under 50kb. I have found that converting them into jpgs instead of gifs compresses the file size to be between 12kb and 15kb, but anything lower, the images begin to lose color quality and the image color quality is extremely important.
END OF ADDITIONAL INFO
Anyway, my image database is growing and I need the images to only load upon the visitor scrolling up or down to reduce the page load time as much as possible so visitors will not be turned off and leave the site.
Thanks!
Oh, here's the plugin, I'm using:
wordpress.org/plugins/ml-slider/
Related
There is any possibility to upload a file with different sizes in DropzoneJs?
I'm using vue-dropzone which is made with dropzonejs and i have to upload the same file with different sizing for srcset.
Example:
I want to upload the file test.png which is 1000x500 px. There is any possibility to upload it at the same time in original resolution and also in 500x250px?
Image resizing in the browser has been a seat-of-the pants experience for a long time. Web assemblies are the way of the future for processing-intensive tasks in web apps. I came across this project the other day. It looks fantastic and I really can't wait to strip out our home-baked image resizing with canvas and replace it with this.
The usual reason for doing this is to avoid large uploads. It's a little bit weird to want to resize in the browser then upload the original. You might be better resizing on the server. You'll save bandwidth and the server libraries will be more mature than what's available on the client.
Along with the original image object you can add one more your custom resized image to the array of images by using resize config of dropzone. You can do the above on drop event or adddedFile event of dropzone.
According to Google PageSpeed Insights, defer offscreen image is taking >10sec to load a page. I want to know how to handle/fix this issue in the coding section. I think it it can be done by using media queries but HOW?
I have already compressed images and adjust images dimensions.
My page speed is 10/100 for mobile and 65/100 for desktop.
"https://withambience.com/collections/all-time-favorites/products/royalwinterleggings"
Thanks
I recommend lazy loading your images. Here's a quick tutorial that uses the lazysizes library. And here's a more general optimization article from the shopify team. Best of luck.
I have a component which consists of a FlatList and a Modal-component. This modal component has several Image-components. The images are set by the source-attribute to an external url.
I switch die visibility of the modal-component by changing the visible attribute.
The problem:
Everytime I open the modal (at the beginning or after closing it) the images are loaded from the server. So there are no images for maybe 1 second.
Are the images deleted from the cache if I set the visible of the modal to false??
Caching of images can be related to multiple things. The most effective one is probably the Cache-Control header sent from the server when you request the image. You can check the headers to see if the request has a low time on cache.
The other thing is that, while development process, building or hot-reloading of the app can result in clearing the cache for the app.
Another reason can be the low storage in device might be triggering the OS to delete cached images.
In iOS you can control caching. More info can be find here.
Its hard to tell without any sample code but, if you are mounting and then unmounting Modal when you set the visibility of it, you can try to prefetch images before mounting the Modal. If the caching control is right when you mount the Modal they should be served from the cache. If the images you are trying to show are large it might be a performance issue or they might be taking long time to load from the disk. You can debug this with a less number of item in modal with smaller images.
Hope the information above is going to be enough.
you can use react-native-img-cache
or react-native-cached-image to cash your images
and yes the images in react native are not cached by default
also to preload images you can use react-native-fast-image
I have been applying custom html/css layout to hippo. in homepage-main.ftl I have an image which is 1366x518 and ~400KB in size. Here's how it's implemented.
<img src="<#hst.webfile path="/images/homebanner.jpg"/>"/> However, when I run Hippo CMS it doesn't load (404 error in Chrome dev tool console) the banner image but it shows all the other images. I checked cms.war and i found this image inside cms->WEB-INF->lib->[projectname]-bootstrap-content-[snapshot version].jar. I put a small size image instead of homebanner.jpg and it worked. I am not sure whether this is an issue on Hippo CMS or Tomcat 8 configuration. any answer would be really appreciated.
Simple answer:
Webfiles are limited to 256kb by default, it won't pick up anything bigger.
See also: http://www.onehippo.org/library/concepts/web-files/web-files-configuration.html if you want to change the max file size.
I would reccomend looking at making your banner configurable from within the CMS and using Imagesets for larger sizes.
I am dynamically creating some controls in a page. it will become slow when we have some fifty controls.
what are the code optimization techniques/ guideline used in extjs?
Is there any specific methods which will slow down the entire loading?
Sencha has great posts:
Ext JS 4.1 Performance about:
Network latency which affects initial startup time heavily, but also data store load time.
CSS processing.
JavaScript execution.
DOM manipulation.
Optimizing Ext JS 4.1-based Applications about optimization tips and the Page Analyzer tool.
My tips are
Use Ext.container.Container rather than Ext.panel.Panel.
Instead of adding ext components, use XTemplate with data view to load similar controls.
if you are using many images then use image sprites - An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth.
http://css-tricks.com/css-sprites/