If I have a website project with:
reset.css
remote bootstrap lib
master.css
remote font awesome CSS
two google fonts
JQuery lib
main.js
Consider the best loading speed and possible override. What would be the best order to link them in <head>
I know what is added later will override the same rule with same priority previous style sheets applied and browser rendering from top to bottom, <head> first then <body>
I also learned from google that there is something called prefetch in the modern browsers.
Personally, I would do reset.css, font awesome, google font, bootstrap lib, master.css, Jquery lib, main.js. Universal rules first, lib first. But I don't know exactly how to deal with font since they are stylesheet as well.
I would like to point out that the orders suggested in previous answers are not fully in sync with the developers' best practices as suggested by Google and MDN.
CSS should be loaded first in the head followed by font stylesheets or google font stylesheets so that the layout doesn't appear broken for a while especially on slow connections.
So, Bootstrap css can be loaded into head while Bootstrap js should be loaded later after jQuery.
JS, jQuery and its dependencies can be moved to the bottom of the page to promote faster page loading because JS code can affect the content and layout of a web page, browsers delay rendering any content that follows a script tag until that script has been downloaded, parsed and executed.
And as bootstrap js has jQuery as a dependency. So, jQuery should be loaded first followed by boootstrap js and main js file.
So, the correct order in accordance with best developer practices:
<head>
1. Bootstrap CSS
2. Reset CSS
3. Master CSS
4. Google Font CSS
5. Font Awesome CSS
</head>
<body>
Your content goes here
<!-- add js files to the bottom of the page-->
6. jQuery
7. Bootstrap js
8. Main js
</body>
It is important to load jQuery before Bootstrap and all custom CSS after bootstrap. It is better to load the google font stylesheet in the beginning.
The order should be libraries first followed by custom scripts and styles. Since bootstrap depends on jQuery, jQuery should be loaded before loading the Bootstap's JavaScript file.
google font
fontawesome
JQuery lib
remote bootstrap lib
reset.css
master.css
main.js
Loading the JavaScript files at the end of the body (just before </body>) will improve site loading speed when compared to having JavaScript files between the head tags.
Since you question is in terms of performance. below are some of my views
1. load google fonts aysnc
you can load the font asynchronous, so then it will not block the rendering of the page. you can use the javascript font loader, https://github.com/typekit/webfontloader
2. load css first
the below method may be the best way to go
fontawesome
JQuery lib
remove bootstrap lib
reset.css
master.css
i also suggest you merge reset.css and master.css since i believe sending a separate request for reset.css is useless and merging those small codeset with master.css will be a better approach.
3. load JS
finally load the master.js file, its better you load this file in bottom of the body tag, since then it will improve page load performance effecting the critical rendering path.
note: please read about critical rending path, which may explain in-depth about page-load performance.
Related
I need some advice on CSS placements for the sake of website load times
I read that it's best to have 'critical CSS' in the head and the rest can be placed in their respective page's body via the tag.
Is it good practice if I loaded all the CSS or at least the 'Generic' styles that many pages share while I kept page specific styles in a tag in the page's body?
One side question, some of my pages use jQuery, should I only load that at the bottom of those pages or leave it in the template head?
I tried both and the site loads just fine, but I know under the hood results may vary. I'm not sure how to even check. I tried websites that test a website's load performance and I got mixed results. So I'm not sure how to optimize my website's performance.
Usually all CSS files are called in the head, one thing you can do to improve performance is to modularize, let's say that you have the global styles in one file called global.css and it contains your font specs, global components used in all pages such as navbar, footer, layouts, etc... And in another file you can only put the styles regarding your specified page such as contact section that's another page called contact.css and there you can have overrides to global file and specific styles that you only use in this page.
This way you can serve less heavy files regarding the page that user's requiring.
Regarding you jQuery question I suggest that don't load jQuery library if you're not using it, it's useless. Only load it in the pages that you're using the library. Hope it helps!
I am little new to web development and when I was searching internet about other topics, I have seen many people has put popular JS Libraries in Different Places of their websites.
eg: Inserting JS Libraries on the Very Beginning or Start of the <head> </head> section. (Before loading any JS Code or a CSS File)
eg: Inserting JS Libraries on the End of the <head> </head> section. (After loading all JS Codes and CSS Files)
eg: Inserting JS Libraries on the End of the <body> </body> section. (After loading all JS Codes, Texts, Images, Videos, CSS Files etc...)
So my question is this.
What is the best practice for inserting (where) following JS Libraries, Plugins and CSS Style Sheets to a web page for the most faster loading times and other advantages? - Please mention the reason -
JQuery and it's Plugins
Bootstrap 3.js
Modernizr.js
Angular.js
And another widely used JS Libraries which I couldn't mention here...
Normalize.css
reset.css
bootstrap.css + more
Thank You..!
There is no so called "standard" method. The choice of where to put the lines boils down to one question: When will I need the library?
You see, web files loads line by line, let's take the following as an example of what I mean:
<script>
document.getElementById("target").innerHTML = "changed"
</script>
<p id="target">unchanged</p>
#target isn't altered because the script was loaded before the element did. Web files loads procedurally. When the line of JavaScript is loaded. It is executed immediately, but the target element isn't. So it couldn't change the element.
Even with jQuery, there is the same problem:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#target").text("changed");
</script>
<p id="target">unchanged</p>
Therefore, we often use $(function(){}).
Back to the loading problem
People who put their <script> tags or <link> tags in the body (in front) or in the head, wanted to execute the script immediately, sometimes they won't use $(function()) or document.onload
People who put their <script> tags or <link> tags in the body (in the end) wanted to ensure all elements are loaded then execute the script or load CSS.
Conclusion
You should load independent resources such as jQuery first, then load dependent resources such as jQuery plugins. Then you try to decide when you want the resources to start loading, then put the lines in places.
You should put CSS links in the <head> tag because you don't want visitors seeing unstyled content before loading the CSS files.
If you can't decide or don't care about the time, put every <script> and <style> tags in the <head>.
Here is another post you might be interested in: Load and execution sequence of a web page?
CSS can added inside header tag & but put all JS Libraries and custom files just before closing closing body tag
<body>
//other tags
<script> All Scripts here </script>
</body>
By doing so you wont have to check if DOM content has loaded.
It decrease page loading time.Otherwise a js need to be completely loaded before DOM loading.
It also makes sure that all events are attached properly to DOM element.
I think this address all your concern specially the third one
CSS Sheets go in the < head >. The order of the CSS files matter so libraries should be put in first then you can put in the specific ones you have.
Javascript links go in the < body > but place them at the very end. That way your HTML content loads first then the JS loads and it will recognize all your selections. It is more efficient to do it this way.
The most important thing to note when placing your css and script tags is that the order you place them determines the order they are loaded in and if style or code is loaded later it over writes the code written before. So if you have css styling that assigns different styles to the same attributes of the same element then it is the one loaded later that takes effect. And with script tags it's important to remember that for dependency reasons. You should load the dependencies first so that they are there for the other scripts to use. Aside from that normally css tags are in the head and script tags at the bottom of your body element
I'm trying to make my front-end design process more modular, and am exploring webpack. It supports a style loader, which allows you import a css file and inject it in the document like so:
require("style/url!file!./file.css");
// => add a <link rel="stylesheet"> to file.css to document
However, my main focus is on websites and not webapps1, so it feels weird to add the css through javascript. But I might just be old fashioned, so I'm wondering: is the loader meant to be used for all css, or is it only meant to load small, conditional parts of css?
And if it can be used for loading all css, would there be any penalties when using a webpack generated bundle.js to inject the css as opposed to directly linking a css file in the html? Besides it obviously breaking if javascript isn't enabled?
1: The difference being that I have very little dynamic content, javascript plays only a minor role in these websites, and that I'm not routing with javascript but have static .html files for pages
Where possible, include CSS with the HTML itself. Modern browsers will begin fetching the CSS as the page is parsing, sometimes before the JavaScript has even begun to download. You're going to get an improvement in page rendering speed doing major pieces outside of a loader.
Additionally, if you stick to a major "core" style, you can benefit from caching, which will again load faster than JavaScript can.
http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/
In your example, I've done it by splitting it into multiple pieces and using loaders & bundlers for the specific elements I've got loaded in the page. The application look & feel, branding, etc is loaded from markup, and the behavior that controls my specific UI (say, layout for a particular form) is done with a bundler or packer.
I have developed a mobile application which loads 3 css and 7 javascript files. Problem is if the wifi signal is very slow, HTML loads before all javascript and stylesheets are loaded. Since stylesheet is not loaded, HTML looks disturbed and after few seconds (i guess after css and js are loaded properly), HTML structure automatically take correct format but I dont want to show the disturbed format and to do that I need to make sure that all js files are loaded first then only HTML should display.
If you have any idea how can this be achieved ?
You can do using Cache manifests. Read these resources:
http://appcachefacts.info/
http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5
https://developer.mozilla.org/en/docs/HTML/Using_the_application_cache
Alternatively - ensure your resources are loaded before the body by placing them in the right place (head tag).
You should link to your external css stylesheet at the top of your webpage in the header like this:
<link rel="stylesheet" type="text/css" href="http://whiterootmedia.com/css/example.css" />
or insert your <style> element in the header. Likewise this should be done for your JavaScript if it effects your initial layout. Keep in mind that if you are using an external JS file, the browser will stop rendering your page at the point in your code where your external JavaScript file is referenced, to load that external JavaScript file. If you're using a lot of JavaScript, place it at the bottom of your page (contrary to what most people do) or use an onload() function.
The webpage is loaded top-to-bottom, so the problems you're having should be related to the order of your css (most likely).
This type question has been asked a number of times, but I can't find a solution that fits exactly what I am looking for..
I have a large App based in Ajax. Ajax responses includes HTML and JavaScript files used to build pages, widgets and so on.
I would like to load the CSS for these widgets on the fly via the ajax JavaScript calls. There can be any number of CSS files loaded dynamically as and when required. The most commonly accepted way (from what I can see) is to place an id on the link tag and target that, but as i am including an undetermined number of external style sheets, this will not work..
Any suggestions on how to solve this problem would be appreciated..
I am using Dojo to power the app, if that it of any help..
Thanks
We load as well many widgets on the fly in our app.
Each widget is an HTML + JS + CSS that is loaded with an IFRAME.
Once the IFRAME is loaded, you can loop on the LINK in the HEAD and import them in the main page.The same apply for the HTML, in our case it is a set of pure.js templates.
The JS extend automatically at load time a global object in the main page.
Be careful about dynamically loading CSS. CSS is loaded asynchronously so you can get race conditions with widgets that do layout in Javascript such as BorderContainer.
You can put all your necessary CSS in a file with import statements. For example, from claro.css
#import url("../dijit.css");
#import url("../../icons/commonIcons.css");
#import url("Common.css");
...
and then use the build tool to compact everything for production.