I have a website and it has a slider that contains a video tag. It worked on desktop well but it's so slowly on mobile.
In mobile, it's playing smaller(MB) video but it's so slowly. The problem website is https://www.drapebutik.com/
What can I do to speed it up?
I would compress the video or use a caching mechanism, this way it would require fewer resources to load and be processed efficiently.
Seems like you are loading all assets on page load making the total size almost 40mb. I would implement some sort of lazy loading of images and videos outside of the viewport. Also if you use Vimeo for serving your videos you would get the added benefit of adaptive bitrate.
Related
I have a site that I load images only when these are in slightly below the view point.
This way, the site first loads without the images then determine what images are needed to be loaded based on the viewpoint.
When user scrolls, and the image is just below the viewpoint, then it loads them.
It works fine on desktop. No laggy, no stutter.
However on mobile web, when I scroll, it stutters as the images are loaded.
Once everything is loaded, the site scrolls up and down smoothly. Also images are resized on the fly to minize file size.
The question that I have is that, what is the best way to load lots of images?
I am loading them only after the site is loaded, then only if they are just bit below the view point.
Do you think I should load them all to avoid stuttering especially on mobile?
I googleed smooth image loading but I don't think I am searching correct terms.
Anyway suggestions will be much appreciated.
Thank you.
Here is a simple and lightweight JS lazy loader library. It's straight forward and easy to understand.
BLazy.js
There is a walk through example from their site.
<script src="blazy.js"></script>
<script>
(function() {
// Initialize
var bLazy = new Blazy();
})();
</script>
Then in your HTML you would setup your images like this. Give it a b-lazy class and a data-src attribute that points to the image.
<img class="b-lazy" data-src="image.jpg" />
ebLazy.js – A lazyload image script
blazy.js examples
Ok, so its been a while since I've built a website, and I'm trying to blow out the cobwebs, so to speak.
I have built the following website: http://pinkgiraffecakes.tk/
As you may have noticed, it takes a long time to load the Title Bar. I am aware that you can pre-load images using Java and CSS, but the solutions provided all seem to be for use on other pages (i.e. pre load images on the home page so they are quicker to appear on other pages).
What I would like to do, is to pre-load the title bar and all the other associated images, store them to the cache, THEN show the homepage.
Is this possible? If so, could someone please provide sample code or a link to a tutorial on how to achieve this.
Thanks.
First and foremost, you should scale and optimize your images before resorting to lazyloading, preloading and shenanigan-loading. I ran pingdom on your site and almost choked.
The main title weights 3.5MB, but it can be optimized lossless to 185Kb
The facebook button weights 3.5MB too, and it can be optimized lossless to 68Kb.
I just shaved over 7MB from your home screen.
Besides that, you're serving 1280x720px images as 150px x 75px buttons. You really need to display a scaled version instead of using the raw image with fixed height and width.
I have a <video> element at the top of my page playing an animation in the background (very similar to the one found on the Google Hangouts page). On most computers, the video plays smoothly and it seems fine, but on older hardware there is a lot of lag and the browser slows down quite a lot.
Is there anyway to detect the performance of the video playback? I'd like to either replace the video with a static image or pause the video if performance is an issue.
Use the video metrics if available in your browser. Here's an example using webkit prefixed DroppedFrameCount.
http://git.chromium.org/gitweb/?p=chromium.git;a=blob;f=chrome/test/data/media/html/media_stat_perf.html
See also: http://wiki.whatwg.org/wiki/Video_Metrics for the Moz prefix.
You could use Get the timestamp of loaded page to determine how fast the user loads the page, then if their bandwidth is below a specified threshold, supply an image rather than the variable.
I have a lot of images incorporated on one of my pages, Pinterest would be the best thing to compare it to, and I noticed that scrolling especially in Chrome is really jerky and not smooth. Is there a way to achieve smoother scrolling? Would I do this through JavaScript or is it a CSS property?
The reason scrolling on Pinterest is smooth is because of a few things:
Images are lazily loaded. They are also probably cached on the server side for faster serving.
Images are cleared if they are sufficiently far from the viewport (the images at y=0 should be cleared if you're THRESHOLD pixels down). This clears up memory and provides a smoother experience (this is similar to how a UITableViewController works in iOS).
My suggestion?
Cache images on your server.
Clear the images that are THRESHOLD pixels away from the viewing port.
Lazy load images.
Use a good infinite scroll plugin.
P.S. - If you are serving really large files (by size), you're going to get a slow experience (depending on how fast your internet connection is).
id' suggest to use js to load all pictures in the visible area of your browser and a bit further and if the user scrolls down then you load some more pictures. scrolling gets really bad when there are to many pictures from the beginning.
What's the best way to show an animation from after effects on a website onload?
It needs to play like a load screen in all major browsers and iOS devices.
What's the best way to show this?
I tried html5 and the auto play didn't work on iPad. I don't want to use flash. The animation is too complex for just JavaScript. Is it worth trying to make a high quality animated GIF?
Well, your main problem with virtually any onload video is going to be load and buffer time, especially on a mobile device. If the splash screen takes half a minute to load, the experience will be very subpar, and there's virtually nothing you can really do to reduce that load time short of making the video low quality (a large animated gif will have the same problem).
My recommendation would be to try coding the animation using pure HTML5 animation effects if possible. They will render faster, use only static images, javascript and CSS, and will be more widely compatible with modern desktop and mobile browsers.
Unfortunately, it is not possible to auto-play html5 video on an iOS device. At least as of iOS 5, Apple has disabled both auto-play and pre-loading, presumably to save bandwidth for users who may be on limited or expensive mobile data plans.
Unless you're willing to skip the video, the only workaround is to get the visitor to click or touch something on the page. Mobile Safari will allow you to play a video using Javascript methods (as opposed to the native player controls), but the first call to .play() has to come from a "click" or "touch" event handler.
You can limit this requirement to iPads and still allow desktop browsers to auto-play, but there doesn't appear to be any kind of reliable feature-detection method, so you have to parse the User Agent string (navigator.userAgent).
There isn't much documentation on the strange, non-standard things Mobile Safari does with video, but this article has some very good, detailed information and some code samples:
http://blog.millermedeiros.com/html5-video-issues-on-the-ipad-and-how-to-solve-them/
Edit: And then there's this elaborate and absurd workaround that Apple uses on its own site.
https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI