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>
You're loading jQuery twice. Once locally, and once remotely.
Consider using Require.JS to load your JS on demand
Combine Style sheets to one request. Make sure you are using modular styles and again, load on demand.
JS move to footer where appropriate
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.
Related
I recently started working with Tailwind-CSS as my framework, and I finished my first practice project using it. However, when I try to open the .html file (index.html for example) in my browser, it loads the HTML file without loading the CSS. Why does that happen?
How can I deliver a project in Tailwind-CSS to a client if the CSS does not load?
Here is the index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/dist/output.css" rel="stylesheet" type=".text/css"/>
<title>Manage Landing Page</title>
</head>
<body>
It may be worth noting that I have 3 projects done with Tailwind-CSS using VS Code. None of my three projects load any CSS when opened in browser, despite two being done by following tutorials on Tailwind-CSS on YT. They only load CSS when I open them through the Live Server extension for VS Code.
Server side includes don't work here since it's not traditionally "served".
I'm trying to import the head content from a shared file to reduce shared code (I'm doing this with other shared elements across all pages just fine), but because it includes the styles, it's causing a flicker in the form of unstyled elements.
I'm using jQuery at present to load the content asynchronously (which isn't optimal, but I haven't found a synchronous solution that actually works), but I'm more than open to a vanilla JS solution so there's not the overhead of having to load jQuery first (to reduce the delay despite it being locally hosted).
Here is the existing code:
plan.html:
<head>
<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
<script>$(function(){ $("head").load("head.html") }); </script>
</head>
head.html:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Styles/Fonts-->
<link href='//fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link href="styles/marketing-plan-normalize.css" rel="stylesheet" type="text/css">
<link href="styles/marketing-plan-styles.css" rel="stylesheet" type="text/css">
<!--IE Compatibility - Modernizr-->
<script type="text/javascript" src="scripts/modernizr.js"></script>
<!-- Adding the favicon -->
<link rel="shortcut icon" type="image/png" href="images/js-logo-small.png"/>
<title>Sales and Marketing Planner</title>
Use document.write()
<head>
<script type="text/javascript">
document.write('<link href="/use/abs/path/here/styles/marketing-plan-normalize.css" rel="stylesheet" type="text/css">');
</script>
</head>
It fails to work with <base> element in some browsers, so better use absolute urls.
In Chrome it triggers a console warning referring to https://developers.google.com/web/updates/2016/08/removing-document-write even if there's no script insertion. This situation may change in the future.
EDIT: Oops, I haven't paid enough attention to your case. I'm afraid it's not possible without combining document.write and sync AJAX. Please don't do that.
What I was trying to do is to make my ember app load faster, the index.html file looks like this
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Jobber</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
{{content-for "head"}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/custom.css">
{{content-for "head-footer"}}
</head>
<body>
{{content-for "body"}}
<script src="assets/vendor.js"></script>
<script src="assets/custom.js"></script>
{{content-for "body-footer"}}
</body>
</html>
The size of vendor.js and custom.js together before uglify is 11mb, after uglify from ember-cli is about 4mb.
Then I tried to profile it in chrome Timeline(5x CPU throttling) to see if there is a noticeable difference. And here is what I got, top 3 charts are summaries after being uglified, bottom 3 are without uglify.
My question is will uglify really make it load faster? The only difference I can tell is the time spent in category Other is less, the Scripting part is very close and sometimes even longer.
I did a closer look into the time segmentations, seems like the compile time have decreased a lot but in total there is no much difference, if it does save time, where is the time being saved?
I am building a web page and I do some JS calculations and styling to make fancy things. However, I am stuck with FOUC. First I call the required styles, then depending on JS calculations I change some paddings and margins on divs. This leads to some kind of flashing of the page. To ommit this, I want to set display:none or visibility:hidden to the body element until the calculations are done, then show the page.
HTML
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<!-- These meta tags come first. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Theme Example</title>
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/styles.css" rel="stylesheet">
<script src="assets/js/modernizr-custom.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('body').hide();
// ... do calculations and styling ...
$('body').show();
</script>
</head>
Do this affect SEO? Any other ways of getting around that problem?
As long as you are not hiding keywords or spamming with content there should be no issue.
For more you can check this topic on Google Webmaster Central forum:
"Merely using display:none will not automatically trigger a penalty.
The key is whether or not there is a mechanism - either automatic or
one that is invoked by the user - to make the content visible.Google
is becoming very adept at processing JavaScript to find and interpret
such mechanisms.If you use valid HTML, CSS, and JavaScript you have
nothing to worry about. Good luck!"
Hope this helps.
Here is my index.html for posterity's sake:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<base href="/" />
<title>Cart</title>
<link href="content/external/bootstrap.css" rel="stylesheet" />
<link href="content/external/bootstrap-theme.css" rel="stylesheet" />
<link href="content/external/font-awesome.css" rel="stylesheet" />
<link href="content/external/angular-toastr.css" rel="stylesheet" />
</head>
<body ng-app>
{{3+4}}
drfg
<script src="scripts/external/jquery-1.9.1.js"></script>
<script src="scripts/external/bootstrap.js"></script>
<script src="scripts/external/angular.js"></script>
<script src="scripts/external/angular-ui-router.js"></script>
<script src="scripts/external/angular-resource.js"></script>
<script src="scripts/external/angular-mocks.js"></script>
<script src="scripts/external/angular-toastr.tpls.js"></script>
<script src="scripts/external/angular-animate.js"></script>
</body>
</html>
Whenever I hit run in webstorm to open in chrome, I get a 404 for every single javascript and css file. However, if I scope to the project directory and run node's http-server, my site loads just fine. I can't seem to find anything in settings related to this. Any ideas?
the problem is caused by tag in index.html:
<base href="/"/>
that tells the browser to resolve all URLs in the page relative to the web server root (localhost:63342 when using built-in webserver). Obviously no resources can be found there, as the built-in webserver serves files from http://localhost:63342/<project root>
So, you need to comment out '<base href="/"/>' to get your code working. Or, modify your hosts file to make webserver serve files from http://<some name>:63342 - see http://youtrack.jetbrains.com/issue/WEB-8988#comment=27-577559