Better web performance on mobile devices can be particularly difficult due to more constrained bandwidth. One way to work around that issue is to reduce the number of dependencies in your code as much as possible. This allows the most important elements of the web page to load with fewer data packets transferred.
In addition, you can minimize code using a cool like JsMin or Google Closures, which will combine each piece of code into easier-to-load modules. Finally, add caching as much as possible through the use of ETags.
Delay vs. Async vs. Modular Loading
- Using the HTML5 async tag, when implemented correctly, will execute scripts in parallel, avoiding any blocking behavior that may occur when a browser encounters a script in parsing the document
Load on Mouseover
To add this functionality, simply add “explicit” to the end of each piece of the script. Then, create a loadTag that activates when the Mouseover event occurs.
Define local variables as often as possible
One of the biggest slowdowns occurs when your script has to search the scope chain for variables. If you find yourself using a variable more than once, it is worth defining it locally. For example, changing
- Load-on Mouseover prevents elements from loading until the user needs them
- Reducing dependencies will reduce the bandwidth demanded by a particular web page
- Local variables will reduce the amount of power required to perform an action