I have a SPA (Angular 1.4.8).
On start up, the client has to download many files while also performing authentication and bootstrapping.
Therefore I have a splash screen, which contains a simple GIF and few text lines that are updated according to the current loading stage.
I've noticed that the GIF smoothness depends on the browser/computer you open the page in.
On a very fast computer, the GIF's animation runs as smooth as my eye can notice, while on other computers, slower ones, the animation is chunky (low FPS).
I'm assuming that this has to do with the load on the browser that has to do many things when loading my application, causing low FPS on the GIF's animation.
This is just an assumption, according to my tests.
What can I do in order to ensure that the browser sacrifice all the required resources for playing the GIF right?
Thanks
Do not use gif. Use CSS animated spinner like these. CSS animated spinners like these are not affected by the jam on main thread of the browser which executes your JS and updates the UI.
However, there is currently a bug on Blink that does cause the CSS animated spinner to pause with the jam on main thread.
Google Chrome compositor-driven animation affected by jam in main thread
But that should be fixed soon.
Related
I am trying to build a Wordpress website using a theme I purchased, unfortunately the maker of the theme doesn't seem to respond to any support requests.
After creating a few pages I noticed that performance is much worse on Safari compared to any other browser. I tested this on a few computers and few versions of macOS.
Example page is https://sochacki.info/proj/nepal-manaslu-circuit/
I realise that photos on the website are quite big (4000px each), but that is exactly what I want. I am happy with how quickly the pages load and how the galleries work, in Chrome, Firefox or Opera. When you click on a picture it loads PhotoSwipe JavaScript gallery so you can see them in full size, and then you can also click in top right corner to go full screen as well, or to leave the PhotoSwipe viewer. Switching between photos, going full screen or leaving PhotoSwipe are instant.
However when I load the same page in Safari, any action after clicking on a photo is slow. Switching between photos, going full screen, leaving full screen. It all takes a second or a few seconds. I can also see in Activity Monitor that CPU is used way more in Safari.
I tried a couple of things:
the theme I am using uses a custom plugin made by the same author to create these galleries, place photos and it includes PhotoSwipe files inside. Those files were one version behind (4.1.2 instead of latest 4.1.3) so I updated them, but the performance issues are the same.
I installed some other gallery plugins which use PhotoSwipe to display photos, and they did not have the performance issues, so I am not blaming it on PhotoSwipe, probably some other part of the plugin is causing the issues.
I have no real experience with JS or web development, are there any tools that could help me find what is causing the slow performance?
I checked the website speed - as I can see the Theme-Loading-time is okay. But as you already mentioned the Photo-sizes are really unfortunate as we can see in google page insights (https://developers.google.com/speed/pagespeed/insights/?hl=de&url=https%3A%2F%2Fsochacki.info%2Fproj%2Fnepal-manaslu-circuit%2F)
Try to resize the Photo-sizes in normal view (not the HeightxWidth > the kB)
I have an image manager that shows a fixed sized grid of images. The thumbnails are relatively small already so I can't really make them smaller. I implemented lazy loading and using a debounce function to check if the images on in the visible region. This increased the speed of launching my image manager. However, if I scroll while the new batch of images are being loaded, the scrolling becomes very slow. Is there anyway around this or to further optimize loading images?
EDIT:
Is there a way to prevent scrolling while a new batch of images are coming in? Kind of like how Youtube just keeps bouncing when we try to scroll to see more comments while they are still being loaded?
Try not to load all the images at once (which I guess you've implemented with Lazy loading), I'm aware that the users online have a high tendency to scroll fast.
I would suggest, few things here:
First
Implementing the Lazy loading in a correct way is essential. here is a list of few best techniques, make sure which works best for you.
You've mentioned, that the thumbnails are relatively small, however I assume only specifying smaller dimensions is not sufficient, I hope you have covered this ground, Else maintain two folder one for Actual images and another for Thumbnails on your hosting server.
Even though we take utmost care, users upload tons of heavy images on our server, if that is the case, you need to resize the images on client end and then upload on the server, one copy in Actual images and another for Thumbnails
If you are talking about product images, keep the PNGs, Why, because they are far better then BMPs and JPGs. Also you can compress them with online tools like https://tinypng.com/ OR with softwares like https://pngquant.org/
Hope this helps resolve your issue, coz it did to resolve mine.
--N Baua
It turns out the slow scrolling was due to me calling getBoundingClientRect() to find new visible images while there were some images still being loaded. That caused a reflow which bogged everything down.
I changed it to load images in batches so that getBoundingClientRect() isnt called when there are images being loaded.
I have an image of a vine of leaves I'd like to load slowly from left to right after a delay (after the site fully loads) to underline and emphasize a slogan of website I'm working on. I don't want to animate the image, just make it seem as though it is growing by loading it slowly.
Is there a CSS solution or would it be easier to use Jquery?
Thanks so much in advance for any help!
I don't believe there is a CSS solution to your query. In photoshop you can save a jpeg or png as progressive (interlaced) so that it downloads progressively but on anything but the slowest link a regular size file will appear to load quickly.
I would have thought your easiest option was an animated gif - the opacity and apparent size could be tightly controlled and you can set it only to run once per visit. You could bind the image to the jQuery(document).ready() callback for the "after the site fully loads" part of your request.
I've been given a design for a commercial affiliate-related website where the homepage has 2500+ images on it. Two directions I'm thinking about to ease the loading of the images is to utilize a lazy image loading script.
I've been messing with the jQuery JAIL (Async Image Loader) script. I have it set so that it loads all the visible images when the page loads. Then after a couple seconds it begins downloading all the rest of the images on the page that are below the fold. This is typically like 2400+ images.
The problem is that when the browser is told to download 2400 images it basically freezes up, or at least freezes up the scrollbar until it's done.
Are there any jQuery image loading scripts that are similar to the JAIL but that allow for some type of throttling? Anything really to help from freezing up the page.
I'm also looking into css sprites but for various technical reasons and time constraints it might not be feasible.
Use this jQuery plugin. Example here
It delays loading of images in long web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them.
Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.
If the images are small, you might consider combining them into fewer large images and loading them all at once, displaying them all as <div> elements with their background image set. Example:
http://jsfiddle.net/XXRwD/
I'm working on a web page with an animated background. I'm using MooTools to crossfade a series of images that are of a decent size (like 1100px x 750px).
I think since the browser is having to do so much rendering work crossfading these images, when you make the page fullscreen, the crossfade animation will become choppy.
In looking for ways to overcome this, I'm already planning on rewriting the slideshow in the most efficient JavaScript I can muster.
Does anyone have any other ideas on how to have the animated background run smoothly at large browser window sizes?
Crossfade effect is expensive and you'll get very low frames per second at that resolution. Instead of a crossfade I'd try a slide up/down/left/right or wipe effect. I'm a big fan of the jQuery tools Scrollable plugin.
AS you said yourself, this is probably a rendering issue, and not really an issue with the speed of your javascript, especially since there is a performance difference between fullscreen and non-fuulscreen.
I doubt optimizing your js will have any real effect.