How can i decrease the page load time when using multiple CSS and Javascript files.
In my website home page i have used about 6 javascript and 3 css files i know these many files can cause the page load to take time.
files which i used are :
js
<script src="js/jquery.slides.min.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/respond.js"></script>
<script src="js/lightbox.js"></script>
css
<link href='css/style.css' rel = 'stylesheet' type='text/css' media="screen">
<link href='css/reset.css' rel = 'stylesheet' type='text/css' media="screen">
<link href='css/lightbox.css' rel = 'stylesheet' type='text/css'>
How can i reduce the page load time without removing any files?.
you can use jsCompressor to compress and minify multiple JavaScript files
and CSS Compressor to compress/minify multiple Css files into one file.
You can do other things as well like converting your links to base64 to reduce http requests.
Use W3 total cache plugin for wordpress and minify JS and CSS both from W3 Total Cache
Related
I have built a static website which i am currently hosting
I have given my current order of linking css , JavaScript and all other files in the html code below
I would appreciate a lot if someone can confirm if i am placing them all at the most ideal place . Consider the best loading speed and possible override. Not just regarding placement , any recommendations to improve overall performance is also welcome
As you can see there are total 9 linkings happening in my html , lemme give short summary of them
Head -
1) Google Font
2) My Main CSS File
3) Font awesome Css file
4) Jquery Library
5) JS file for modal windows
6) JS file for navigation bar
Body -
Those 3 you see at bottom are related to the navigation bar as well
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Name</title>
<link href="https://fonts.googleapis.com/css?family=Lato|Raleway&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/modal.js"></script>
<script src="js/responsive-nav.js"></script>
</head>
<body>
< -- Content -->
<script src="js/fastclick.js"></script>
<script src="js/scroll.js"></script>
<script src="js/fixed-responsive-nav.js"></script>
</body>
</html>
CSS and JavaScript files operate completely independently from one another; loading a CSS file or a JavaScript file first makes absolutely no difference whatsoever in terms of performance.
Still, there are a few points worth noting:
External CSS files like Google's Fonts and Font Awesome should be loaded before your own CSS file(s), as the order in which you load CSS files affects their specificity. You're going to want to override the framework fonts with your own CSS - not the other way around.
JavaScript files that depend on other files must be loaded after their dependencies. I assume that several of your plugins depend on jQuery, so you'll want to load jQuery before those plugins.
Placing <script> tags at the bottom of the <body> element improves the display speed (as opposed to referencing them in <head>), because script interpretation slows down the display.
So, in short, I would recommend the following:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Raleway&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!-- Content -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/modal.js"></script>
<script src="js/responsive-nav.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/scroll.js"></script>
<script src="js/fixed-responsive-nav.js"></script>
</body>
Here is a few points:
<head> is loaded before <body> because of the placement
*.js is loaded synchronously and sequentially
*.css is loaded asynchronously
It is not enough to maintain optimal loading speed by order of placement
To sum up:
*.css should be in <head>
Larger *.js should be at the bottom of <body>
Small *.js should be in <head>
As long as it doesn't affect the order in which some variables are defined
In the page's head tag I use 3 external files (CSS, Font, jQuery Library):
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> <!-- Poppins font -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
As I use all the 3 - Page loads very slow. If I omit one of them (no matter which one) - page loads immediately. Why is that?
This is because the scripts are being loaded synchronously one after the other.
How to make them load faster?
If there is no dependency between the scripts and links load them asynchronously:
Asynchronously loading JS scripts
For that you can use async attribute.
From the docs:
When present, it specifies that the script will be executed
asynchronously as soon as it is available.
Example:
<script src="demo_async.js" async></script>
Like #IvanS95 mentioned below - you can also use defer.
Asynchronously loading CSS links
You can use preload.
Fro the docs:
Resources loaded via are stored locally in the
browser, and are effectively inert until they’re referenced in the
DOM, JavaScript, or CSS. For example, here’s one potential use case in
which a script file is preloaded, but not executed immediately, as it
would have been if it were included via a tag in the DOM.
An example:
<link href="style.css" rel="preload" as="style">
Try loading the js file at the end.
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> <!-- Poppins font -->
</head>
<body>
...
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
My recommendation would be to run your site against - https://www.webpagetest.org/ excellent resource.
Also, I would cache the data for 365 days that way they do not have to call your external scripts again.
To learn about caching check out this site - https://www.codebyamir.com/blog/a-web-developers-guide-to-browser-caching
And you can always use your F12 Browser tools to see the waterfall effect of loading all the elements of your Web page.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have created some Restaurant website, that's got single Menu page containing different food items. The problem is that above mentioned page is loading too slow on first load. Firstly, i thought that when u enter the Menu page, all items with appropriate images (about 200 images) are loading and this is the root cause of the problem, but then i set up JS trigger which clicks certain menu-item on page-load and loads only 6 images. However, it didn't help. So please, describe some ways of optimizing my page for fast loading.
Thanks a lot in advance! :)
Even if only 6 images are loaded, depending on the size of the images, it'll be slow.
COnsider resize your images to optimize the speed.
You can do it using Gimp / Photoshop or this website: https://tinypng.com
[EDIT]
Don't use all these separated files in Production:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-lightbox.css">
<link rel="stylesheet" href="css/nivo_themes/default/default.css">
<link rel="stylesheet" href="css/hover-min.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/style.css">
the CSS inside the HTML
And do you really need THAT many JS files?
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/isotope.js"></script>
<script src="js/imagesloaded.min.js"></script>
<script src="js/nivo-lightbox.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.parallax.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/custom.js"></script>
Don't use in this way, minify all and be sure that you are using the minified version of jquery, not the jquery.js.
Check it here: https://code.jquery.com/
Give a try to Grunt to help you with the automation and minification of the code: https://gruntjs.com/
Or just use this website: https://www.minifier.org/
You should optimize you all images:
You can use online tool for this:
Compress jpeg
url : https://compressjpeg.com/
Compress png
url: https://compresspng.com/
You can upload many picture on it and this will zip folder of compress images.
After optimize all images you site speed will increase.
Use java script ajax and create pagination for listing. i.e you will get data from database and display only 10 values at once. and for images.. pick some of your common images and create sprite .. these 2 things help you the most. in your every single project..
I'm running into a race condition when using Modernizr to load a CSS file. On my local and staging environments, it loads the CSS file below another stylesheet in the head. This is what I want it to do, so the rules defined in the asynchronously loaded file override the styles in the file that's not asynchronously loaded. But, on production, the asynchronously loaded file get's placed above the other stylesheet which makes the overrides in the asynchronously loaded file not work.
The question is, is there a way to tell Modernizr where to load the async file? I've looked through the docs for Modernizr and the yepnope library that Modernizr uses to load files, but I'm not seeing anything.
Side notes:
I realize I can add more specificity or use the !important on the rules in the asynchronously loaded file, but want to avoid doing that.
Also, I know there are other ways to accomplish this, for instance using jQuery to add the stylesheet after the last in the head, but I want to first see if this can be accomplished using Modernizr.
Example:
Local & Staging (what I want)
<link rel='stylesheet' href='main.css' type='text/css'>
<!-- Loaded asynchronously with Modernizr -->
<link rel='stylesheet' href='overrides.css' type='text/css'>
Production (not what I want)
<!-- Loaded asynchronously with Modernizr -->
<link rel='stylesheet' href='overrides.css' type='text/css'>
<link rel='stylesheet' href='main.css' type='text/css'>
After looking at Modernizr and the yepnope.js code, currently the yepnope.js library (what Modernizr uses to load code) appends the scripts after the parent of the first script tag in the document. So right now, there's not the ability to give the scripts a weight using either the Modernizr or yepnope.js library.
For now, I've settled on using jQuery to add the stylesheet after all others:
$( "head" ).append( "<link rel='stylesheet' href='overrides.css' type='text/css'>" );
with yepnope it should be something like
yepnope.injectJs("main.css", function () {
<link rel='stylesheet' href='overrides.css' type='text/css'>
});
maybe this can help http://www.phpied.com/preload-cssjavascript-without-execution/
Put it outside head tag. Browsers will do the rest:
How To:
<html>
<link rel='stylesheet' href='main.css' type='text/css'>
<head>
<!-- Modernizr loading css script -->
<script src="Modernizr.js"></script>
</head>
<body></body></html>
Browsers will show:
<html>
<head>
<!-- Moved by browser -->
<link rel='stylesheet' href='main.css' type='text/css'>
<!-- Loaded asynchronously with Modernizr -->
<link rel='stylesheet' href='overrides.css' type='text/css'>
<!-- Modernizr not working now -->
<script src="Modernizr.js"></script>
</head>
<body></body></html>
I've got a strange problem. I'm coding a website and inlcuding jQuery and some plugins, that are stored in 'js' folder. When I try to open it through a browser jQuery, plugins and all my custom scripts aren't working. Maybe it's somehing with my code, but don't think so. Of course when I inlude jQuery externally (Google API's) it works, but got some plugins and scripts which aren't hosted elsewhere. Here's my 'head' tag.
<title>TOMTRANS - International Transport</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!-- S3Slider CSS -->
<link rel="stylesheet" type="text/css" href="css/s3slider.css" media="screen" />
<!-- jQuery -->
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<!-- jQuery Effects -->
<script type="text/javascript" src="js/functions.js"></script>
<!-- S3Slider -->
<script type="text/javascript" src="js/s3Slider.js"></script>
<!-- S3Slider Init -->
<script type="text/javascript">
$(function() {
$('#s3slider').s3Slider({
timeOut : 3000,
});
});
</script>
<!-- HTML5 Shiv -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
By locally do you mean a local web server (i.e. http://localhost:12345/) or the file system (i.e. file:///C:/Users/John/Desktop/hello.htm)? If it's the latter, then it's probably the security settings. Some browsers block scripts from the file system by default.
Try to do
"./js/..."
I think it will work as with external jquery.
Thanks
Ok I have solved my problem. It's my IDE fault - Aptana Studio 3. This bug occured because I didn't upload hidden .project file, while I copied it through default file browser (Ubuntu's Nautilus). When I used built-in AS3 ftp manager it also copied .project file, and now it works.
I know this thread is old, but I have't found the answer to this very annoying problem so I am adding my solution.
If your physical folder path includes an underscore, it will fail.
So, if you dropped your website to lets say C:\MyRoot\MyFolder_2\WebSite1\ then it won't work. however, if you remove the underscore and it becomes C:\MyRoot\MyFolder2\WebSite1\ it will suddenly work and jQuery will suddenly be loaded.