CODEWITHSUNDEEP
jquery
Erasus
Erasus

Reputation: 706

Google PageSpeed Insights results jQuery slows down loading

I'm trying to speed up my website by applying google PageSpeed Insights recommendations, but some things don't make sense to me.

Results that I get: https://goo.gl/GSQ6Zs

It says that above the fold content couldn't be loaded without a delay because of jQuery, my jQuery script reference is placed before closing body tag, what is really interesting is that if I copy/paste source code from jQuery file and put it directly into index.html as inline code it works perfectly, but this solution looks dirty to me. What are fast ways to determine what javascript/css files are responsible for displaying above the fold content? I also have many css files and it's really inconvenient to go through every file and determine which parts are responsible.

Any suggestions are welcome

Upvotes: 3

Views: 8078

Answers (2)

Sahil
Sahil

Reputation: 3358

First step will be to move google fonts link on top of <link rel="stylesheet" href="/components/com_rsform/assets/calendar/calendar.css" type="text/css"> so that the font request is sent at the earliest, and make a single request instead of three:

<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic|Droid+Serif:400,400italic|Tangerine" rel="stylesheet" type="text/css">

Then minify all your js(JS Minifier), css(CSS-Minifier) to reduce bytes. Start caching in js files which are mentioned in google page speed test.

Add defer attribute on inline script tags which you think can be executed after everything has loaded on page. for example:

<script defer>
//your code
</script>
  • If the css files are too small and are not needed on multiple pages then try making them inline as it helps in making less number of requests.
  • Merge multiple css files into one if possible as they are coming from same domain, it helps in reducing the number of critical resources as well as requests.
  • Separate out media queries into different css files, as it reduces time in rendering your page.
  • Keep external css files above all external js files
  • You can directly download the optimized CSS, JS and images from page speed insights, its present in the last section of Speed.

Upvotes: 2

Matt
Matt

Reputation: 2869

First read the two articles:

https://developers.google.com/speed/docs/insights/BlockingJS https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

The problems you have are with the following files: enter image description here

Render blocking Javascript

You can do a few things to fix this such as Inline JS, using async or in most cases putting your .js files at the bottom of your script below everything else.

Inline JS

Simply copy the .js from the file into your .html file with <script> tags around it.

Using async

I wouldn't suggest this if you're loading jquery as it may try to run the jquery code on your page before the script is loaded causing errors.

Putting the script at the bottom of your page

Although this isn't on the google page, doing this normally fixed your problem although the script still needs to be loaded for the page to fully load. Someone may need to correct me on this.

Optimize CSS Delivery

This pretty much is so that you don't fetch a bunch of separate css files before your page can load.

Inline CSS

Copy and pasting the css into your html file seems to fix the issue as it loads as the page loads. Personally I've read that this may cause the page to load a bit slower, but it'll give you a higher pagespeed score.

Add the css with javascript on page load

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

Upvotes: 4

Related Questions