Google PageSpeed Insights says 'remove render blocking js file' - javascript

This is my site: http://vani.valse.com.my/pixel
I tested in https://developers.google.com/speed/pagespeed/insights.
It asks to remove render blocking js file which is "js/jquery-1.7.1.min.js".
But I don't have this file anywhere in my site and all js files are compressed and placed at the footer.
I even defer the page from loading but nothing works. Below is my defer code:
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "js/jquery-1.7.1.min.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
Can anyone advise why does the error shown even when the file is nowhere to be found?Many thanks.
HTML (index.php)
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Pixel Marketing - Home</title>
<link rel="stylesheet" href="css/foundation.min.css">
</head>
<body id="home">
<div class="row collapse">
<div class="menu">
<?php
include('inc/menu.php');
?>
</div>
</div>
<!--content here-->
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>

It seems path not provided correctly in
element.src = "js/jquery-1.7.1.min.js";
Either you write the path correctly
element.src = "full-path-to-jquery/jquery-1.7.1.min.js";
you can pull it from CDN
element.src = "https://code.jquery.com/jquery-1.7.1.min.js";

It's best practice to include all the scripts at the end of the page, just right before closing the body tag. This is because when the browser finds a script tag, it downloads and executes it before continuing reading the page, hence "blocking" the page from loading.
You are actually including jquery near the top of the page:
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
And it does give an error in the console when loading the page because yes, you don't have that file. Remove it and the script right after it if you don't need it, and you should be fine.

Related

Make same <head> available to all pages

My web app routes amongst several html pages. Instead of uniquely defining the head for each file i.e. typing:
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/css/interface.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/6873aa3c17.js" crossorigin="anonymous"></script>
...
</head>
everytime, can I load all of these scripts programmatically across all the HTML files? (JQuery and Vanilla acceptable)
One method I tried was creating a include.js which would be a loaded script in each head with the following contents:
[
'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',
'https://kit.fontawesome.com/6873aa3c17.js'
].forEach(function(src) {
var script = document.createElement('script');
script.src = src;
document.head.appendChild(script);
});
(And probably a similar solution for links) but this did not work
Thanks in advance
If your website is a static HTML site without server-side logic, I'd recommend using parcel with posthtml-include
https://github.com/parcel-bundler/parcel
https://github.com/posthtml/posthtml-include
https://github.com/parcel-bundler/parcel/issues/915#issuecomment-369489539
You will be able to include html files like that:
<!doctype html>
<html>
<body>
<include src="title.html"></include>
</body>
</html>

Does loading scripts dynamically block the rendering?

I'm trying to load bootstrap.min.js file.
I have two options.
The first one is to load it from a remote server:
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='utf-8'>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
The second one is to load it from my server:
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='utf-8'>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
In the first case the script will load asynchronously which means the rendering of my page won't be blocked.
In the second case the script will block the rendering of my page. Am I correct?
How will blootstrap.min.js be loaded (async or sync) if I try to do this :
<!DOCTYPE html>
<html lang='ru'>
<head>
</head>
<body>
<script>
var bootstrap = document.createElement('script');
bootstrap.src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js";
var head = document.getElementsByTagName('head')[0];
head.appendChild(bootstrap);
</script>
...
</body>
</html>
And this:
<!DOCTYPE html>
<html lang='ru'>
<head>
</head>
<body>
<script>
var bootstrap = document.createElement('script');
bootstrap.src = "js/bootstrap.min.js";
var head = document.getElementsByTagName('head')[0];
head.appendChild(bootstrap);
</script>
...
</body>
</html>
I have a hunch that in both cases the rendering won't be blocked. What do you think? Thanks!
If you put the source-loading code at the end of your <body> tag, the rendering won't be blocked, even though the new script tags are appended to the head. That's because most of the rendering is already done when you get to that part.
In newer browsers, you can add an async attribute to the script tag, which will not block rendering. So I suspect loading the file asynchronously via JS will not block rendering either, even if you do it near the top of the file.

Checking a variable in js that is directly in html file

I have one file, that is external from my index.html page, named code.js with this code on it:
function parse() {
if (a === 1)
alert("a equals 1");
}
(function() {
parse();
})();
As I said, that file is called code.js.
Now, I have an index.html file that is in the same folder/directory as the code.js file. Now, this is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="code.js"></script>
<script type="text/javascript">
var a = 1;
</script>
</head>
<body>
<h1>Javascript</h1>
</body>
</html>
So I want to be able for the code.js file to use the variable from my javascript that is in the index.html file. I am doing this because I am going to make my own javascript library, but I need to do learn this first. Any solutions?
Switch the order of your script tags:
<script type="text/javascript">
var a = 1;
</script>
<script src="code.js"></script>
This way, the global variable a will be initialized before the parse method in code.js is called.
To add on to what Robby said, browsers load a page in order from top to bottom, left to right, because that is how they are written (sort of). This means in your supplied code, code.js is loaded and run before you set a=1. As Robby mentioned, you can easily switch the order of your <script> tags and be fine.
This applies to other elements as well, so any other elements will not be accessible before their place in the HTML document. For example, a <div> in the body cannot be referenced by code run in the head, because the body has not been loaded yet. You can circumvent this by adding a <script> tag at the end of your HTML document, to be run after the main document has been loaded, but not necessarily all other external data like images (external scripts should be fine, however). The snippet below is what I have found works best:
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Any script here could be anywhere (embedded/external) and in any order -->
<script>
function ready() {
document.getElementById('a').textContent = 'a = ' + a;
}
</script>
<script type="text/javascript">
var a = 1;
</script>
<!-- <script src="code.js"></script> - load external code here -->
</head>
<body>
<h1>Javascript</h1>
<div id="a">a = ?</div>
<script>ready(); // Runs code after document is initialized</script>
</body>
</html>

Script loading in span with help of jQuery with any action

I'm trying to load a javascript script link in div/span. Script must come inside span when I run the page. Once page get loaded script content will be shown in span.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<script src="https://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<style>
</style>
<script>
$(document).ready(function()
{
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "test.js"; //https link
// Use any selector
$(".loader").append(s);
});
</script>
</head>
<body>
<span class="loader">
</span>
</body>
I am open to other solution also.
The only problem I saw in your code that is the source of jquery is incorrect because it is using https and the order parameters of the script tag
Try substituting the following:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>

write some html and js to a iframe,not working in IE:$ is not defined?

I write some html and js to a iframe,not working in IE7/8/9,the error message is:$ is not defined?
My code is:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8" />
<script type="text/javascript">
window.onload=function(){
var data='<html>\
<head>\
<meta charset="utf-8">\
<title>Demo</title>\
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><\/script>\
<script type="text/javascript">\
$(function(){\
alert("abc");\
});\
<\/script>\
<\/head>\
<body>\
</body>\
</html>';
window.frames["code_result"].document.open();
window.frames["code_result"].document.write(data);
window.frames["code_result"].document.close();
}
</script>
</head>
<body>
<iframe id="code_result" frameborder="0" class="frame_result" name="code_result"></iframe>
</body>
</html>
who can tell me why?thanks
update
this error only show in IE78/9,it work well in Chrome and FireFox
It's not the code loading the I frame content. It's ie's loading order. Simply wrap your I frame script in a window onload function so it allows jquery to load first. Tested and working in ie.
Add:
$(document).ready({
alert('123');
});
You will need it load jquery in the I frame before running code. JQuery hasn't loaded yet.

Categories