CODEWITHSUNDEEP
javascriptjqueryhtmlcssweb
Akshat Patni
Akshat Patni

Reputation: 161

Loading stylesheets and JavaScript taking too long

What should I do to decrease load time?

<head>
    <title>NCI SwitchGears</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="menu/styles.css">
    <script src="bootstrap-3.3.4-dist/js/jquery-latest.min.js" type="text/javascript"></script>
    <script src="menu/script.js"></script>
</head>

Upvotes: 0

Views: 5332

Answers (2)

andrew
andrew

Reputation: 2098

Google provides a nice tool to help you speed up the loading times of your pages https://developers.google.com/speed/pagespeed/insights/

Here's another nice online tool.

As a general rule:

  • load 1 js files and 1 CSS file - compressed
  • have your js at the bottom of the page, not in header
  • load social tools/scripts via ajax, after page has load
  • optimize the images/graphics you use on your template
  • set proper expiration headers and caching options

More specific instructions for your pages you can find in the above tools.

Upvotes: 1

Squiggs.
Squiggs.

Reputation: 4474

  1. You're loading jQuery twice. Once locally, and once remotely.
  2. Consider using Require.JS to load your JS on demand
  3. Combine Style sheets to one request. Make sure you are using modular styles and again, load on demand.
  4. JS move to footer where appropriate

Upvotes: 1

Related Questions