消除渲染阻止JavaScript

Question

I want to improve the performance of a web page on mobile devices by eliminating render blocking javascript from above the fold content as advised by google page speed insights. All the javascript files the page uses are for a text box towards the top of the page where users select ingredients :

jquery-1.8.2.js, textext.js, home.js

I tried moving all these files to the end of the html, but it caused the textbox to break. I also tried using the async attribute for the scripts but this had the same effect. Is there any way I can fix this problem? The page is here .

Answer 1

A possible direction can be finding the specific blocking functions (for example, alert ). Then overriding those with non-blocking ones, by implementing them before the current code is executed.

For example, you can implement alert as a modal, allowing the rendering to continue fluently.