Google PageSpeed Insights results jQuery slows down loading -


i'm trying speed website applying google pagespeed insights recommendations, things don't make sense me.

results get: https://goo.gl/gsq6zs

it says above fold content couldn't loaded without delay because of jquery, jquery script reference placed before closing body tag, interesting if copy/paste source code jquery file , put directly index.html inline code works perfectly, solution looks dirty me. fast ways determine javascript/css files responsible displaying above fold content? have many css files , it's inconvenient go through every file , determine parts responsible.

any suggestions welcome

first read 2 articles:

https://developers.google.com/speed/docs/insights/blockingjs https://developers.google.com/speed/docs/insights/optimizecssdelivery

the problems have following files: enter image description here

render blocking javascript

you can few things fix such inline js, using async or in cases putting .js files @ bottom of script below else.

inline js

simply copy .js file .html file <script> tags around it.

using async

i wouldn't suggest if you're loading jquery may try run jquery code on page before script loaded causing errors.

putting script @ bottom of page

although isn't on google page, doing fixed problem although script still needs loaded page load. may need correct me on this.

optimize css delivery

this pretty don't fetch bunch of separate css files before page can load.

inline css

copy , pasting css html file seems fix issue loads page loads. i've read may cause page load bit slower, it'll give higher pagespeed score.

add css javascript on page load

as stated in answer here, you'll avoid pagespeed issues if add css through javascript rather fetching bunch of css files.


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -