Optimize your mobile item!
Optimizing your item is as vital as having a good product, and we know first hand how difficult it may be to have a powerful item that runs perfectly yet sometimes it falls short of the expectations in speed! Here is how you make things run smooth and fast, at least a few tips we’ve learned along the way!
1. Resources and Images!
If you’re running a image gallery or simply have a couple of images to load, the way they load and they way they are optimized can greatly improve or destroy the user experience. There are a lot of great tools online to optimize your images but we from our experience recommend and use the following.
LazyLoad ( Free jQuery Plugin )
Lazy load loads images fast, and keeps empty placeholders where images aren’t present, that gives you the ability to load them as you scroll down the page, making the initial load time significantly increase if you are running a gallery for example, and even if you have just a couple of images, LazyLoad is an absolute must!
TinyPNG and TinyJPG will compress your images down without destroying their quality, it uses smart lossy compression techniques to reduce the size of your file by selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size! Check out TinyPNG and use it!
3. Content, content, content!
Nothing is more beautiful than having a tone of effects on a page, but that can lead to a disaster in speeds. It doesn’t matter if you’re using Framework7, jQuery, Ionic or Angular or jQuery Mobile, if you load 50 image sliders and 50 toggles, plus some nice fade in effects, you can be running the iPhone 10 and chances are the page will still start snagging. Plus, you must remember that not all of your users have the latest generation device with 5 gigs of ram and a 64 bit processor. TRY to keep as few sliders and as few effects on one page if possible, and where it’s not possible, you can expect some small performance issues.
4. jQuery Effects.
jQuery effects are no doubt awesome, but what you can do with jQuery you can most certainly do with CSS3. Always try to replicate an effect using CSS3 before using JQuery to take full advantage of devices Hardware Acceleration. The effect will be the same, but the speed will be a lot faster!
5. But I’m running Cordova / Phonegap
It doesn’t matter, at the end of the day, deep down inside your app, you still have to take the above into consideration because you’re not running a native app, that’s using native code. If you want to take advantage of your devices potential while using a conversion system, optimize, optimize, optimize!
More coming soon!
Those are just a few tips we have and we will post comebacks to this post, be sure to subscribe and leave your comments on what else you believe needs optimizing on a page and we’ll come back to them and offer even more tips!