CODEWITHSUNDEEP
jqueryhtmlcss
user1934179
user1934179

Reputation: 31

How to improve page loading which includes css and jquery files

I am new to html and css, when I am testing the pages in local server, it takes time to get loaded, I am scared what time it will take on the internet. I include all the files in <head> tag at the top, is there any better way to improve page loading.

some of my page code is here

<?php
    include "check_timeout.php";
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        <script src="js/jquery-1.2.3.pack.js"></script>
        <script src="js/jquery-1.8.2.min.js"></script>
        <script src="js/new_product_page.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/application.js"></script>
        <script src="js/bootswatch.js"></script>
        <script src="js/all_events.js"></script>

        <link href="css/bootstrap.css" rel="stylesheet" media="screen">
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
        <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<?php               
            $qMaxPr_id = "SELECT MAX(prd_id) from prd_list WHERE 1";

            $getMaxPr_id = mysql_query($qMaxPr_id,$con) or die("could not get usr_id : ".mysql_error());

            while($infoResult =  mysql_fetch_assoc($getMaxPr_id))
            {
                $prd_id = $infoResult['MAX(prd_id)'];

            //  echo $usr_id;   

            }
            $prd_id = $prd_id+1;            
?>
        <title>Add Product</title>
</head>

<body>
<?php
    include 'menu.html';
?>
   <form id="form_new_product_page" method="post" action="">
       ...
       ...
   </form>
</body>
</html>

Upvotes: 3

Views: 1249

Answers (4)

Murali Murugesan
Murali Murugesan

Reputation: 22619

Refer Yahoo Performance Tips

  1. Move CSS and JS to seperate file & Minify CSS and JS
  2. Use CSS Image Sprite techniques
  3. Refer JS at bottom just before closing body tag

Upvotes: 0

Ivozor
Ivozor

Reputation: 976

Since you are in a development environment, it can depend on your IDE / deploy mechanism. You may be experiencing deployment delay, not actual loading time! ;)

Also, database access can slow things down a bit, but no worries, just use a loading overlay on your page for the user to know what's happening!

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157284

The best way is link your jQuery library using Google Hosted Libraries

Reason is many websites link to Google Hosted Libraries which increases the possibilities of your users that libraries might be cached when surfing on other websites...

Other things you can do to increase the page load is minify your CSS.. Link scripts to an external .js file, thus increases the chances of cache and next time user wont require the script unless and until it's changed.

For icons on your website you can use sprites, a great way to save multiple HTTP requests

For images, you should host on other websites

There are many more tweaks and tuning which goes on and on...Try searching them on Google, you'll get many

Upvotes: 2

DonCallisto
DonCallisto

Reputation: 29912

  • Minify your css and js
  • If you can, unify css and js into larger files (this result into an unique call to server)
  • For jQuery issue: use Google libraries

These are only the firsts that came in my mind... As other users says to you, there are dozen of things that can slow down your site, you have to investigate and try to understand exactly where your bottomneck(s) is (are)

Upvotes: 1

Related Questions