So, my assets folder in Angular app has a size of about 1GB where images are close to 134MB and a video of 738 MB. A component which displays these images take about 3-4 seconds to render in local, and it takes more than a minute on a application which is deployed to PCF(even after using AOT).
Strange thing is that the components renders just in fraction of
seconds if we revisit it.
I have tried using lazy loading for images by using deferload. But,
still the problem not resolved.
Could someone share their thoughts on this.
Mostlikely fetching such big images causes the app to load slow.
It is probably unnecessary to have such big image size. You could try to resize the images with something like lambda resize image.
Also if you revisit the site all the data is already cached in the browser. You could try to disable cache in the network tab and it should be slow on every visit of the site
You can use npm install package ng-lazyload-image
Fine the url for description and usage docs
https://www.npmjs.com/package/ng-lazyload-image
Related
I'm in the process of building my website and have come across something I want your opinions on.
I've noticed that even though I've compressed my photos A LOT (18mb to 500kb or so) they take a while to load when I display them through my site. That being said, if I pull random photos from the web and use the link to display them, they load almost instantly.
With that being the case, would uploading all my photos to Flickr, then pulling the image URL and using that as my img src be better than using the actual file from my server as my img src?
Pros and Cons?
Obviously if Flickr ever went down I'd be hurting, but if it means that the other 99.99% of the time my photos load faster I'd be all for it.
Thoughts?
Usually those images are hosted on a CDN, which means they are on multiple servers throughout the world, while images on your site are only on one. That's why theirs load faster.
I have a Magento website and I have been noticing an increase in warnings from Catchpoint that various images, CSS files, and javascript files are taking longer than usual to load. We use Edgecast for our CDN and have all images, CSS, and JS files hosted there. I have been in contact with them and they determined that the delays happen when the cache for the resource has expired and it must contact the origin for an updated file. The problem is that I can't figure out why it would take longer than a second to return a small image file. If I load the offending image off our server (not from the CDN) in my browser it always returns quickly. I assume that if you call up an image file directly using the full URL to the image file (say a product image, for example), that would bypass any Magento logic or database access and simply return the image to you. This should happen quickly, and it normally does, but sometimes it doesn't.
We have a number of things in play that may have an effect. There are API calls to the server for various integrations, though they are directed at a secondary server and not the web frontend. We may also have a large number of stale images since Magento doesn't delete any images even if you replace them or delete the product.
I realize this is a fairly open ended question, and I'm sorry if it breaks SO protocol, but I'm grasping at straws here. If anyone has any ideas on where to look or what could cause small resource files, like images, to take upwards of 8 seconds to load, I'm all ears. As an eCommerce site, it's getting close to peak season, and I can feel the hot breath of management on my neck. Any help would be greatly appreciated.
Thanks!
Turns out we had stumbled upon some problems with the CDN that they were somewhat aware of and not quick to admit. They made some changes to our account to work around the issues and things are much better now.
I have some image urls which I want to cache locally and save so that I don't need to make a web request again and again as needed.
Now, I am confused whether there is any significant benefit of using webclient's openreadasync method over bitmap for fetching the image for first time for saving it to IsolatedStorage.
For me, I think bitmap would be a better option as I would be able to get a event for progress.
This post gives good info on various image caching options.
http://blogs.msdn.com/b/swick/archive/2011/04/07/image-tips-for-windows-phone-7.aspx
Matt mentioned the fact that default image caching only works per session. So if you are implementing your own Image caching, then you will have to implement a image downloader for which the WebClient OpenReadAsync provides a way to store file locally
If you were't considering a local cache, UriSource would have been the choice.
If you want to cache images beyond the current application instance lifetime, have a look at http://blogs.msdn.com/b/delay/archive/2010/10/04/there-s-no-substitute-for-customer-feedback-improving-windows-phone-7-application-performance-now-a-bit-easier-with-lowprofileimageloader-and-deferredloadlistbox-updates.aspx which will show a way of saving the images to IsolatedStorage and then display it from there. This means you won't have to get it over the network each time the app is run.
If you're using this for lots of images be sure to manage the images you save as well so you don't fill up the disk with lots of old images you'll never need again.
I am using the avalanche theme and make use of the homepage slider.
The images are added to the site via a section in the admin panel and they are stored in
media/banners/default/slidex.jpg
I notice that these images are not being cached and loaded directly from their location. Is there any way to include images such as these in the magento image cache in order to reduce load time?
As these are large banner images you would expect them to take longer to load, however in the pingdom tools analysis for my home page it indicates that the server side wait is much longer than the time it actually takes to receive the files.
I had a similar problem witch was caching a resized brand logo slider images.
I solved the problem by storing the resized images in media/product/cache/resized_images - with Mage::getBaseDir('media'). So, you just need to check if the cached image exists before regenerating it.
Everything in this folder is deleted when flushing image cache in admin.
I hope it helps.
I am setting up a site in Drupal 7 for a photographer which includes uploading a large number of photos to the server. My problem is that image upload is extremely unstable. Sometimes it works, sometimes it does not. It seems I am hitting some kind of memory or bandwidth limit, but I don't get any errors.
I created a custom content type for photo albums, with each category (e.g. "portrait", "wedding" etc.) as a node with a number of attached images that I display using views slideshow. Everything works on the front end.
Image upload is handled by an image field and the Media file selector widget. The problem is that sometimes during upload the page will just refresh and the image does not show up in the list of attached images.
I also tried using the Plupload widget that allows uploading several images at once. With this I get a slightly different behavior. The images will "break" after two or three images meaning that they show up as corrupted images with part of the image missing. Sometimes refreshing the page or clearing all Drupal caches will allow me to upload maybe four images at once.
It looks like this
What is strange is that the same exact image file will sometimes upload, and sometimes not.
I am not uploading huge images. They are all manually resized to less than 1600x1600px before uploading, with file sizes between 200 and 600 KB.
Drupal 7.14
Plupload library 1.5.4
Plupload integration module 7.x-1.0
Plupload widget 7.x-1.0-alpha1
PHP settings:
PHP version 5.3.10
Max upload size: 5M
Memory limit: 1024M (increased from 128M using ini_set() in settings.php)
Any help will be greatly appreciated! I have been googling for days trying to solve this.