I wish to add ads to my webpage: https://www.gamestegy.com, however there is an issue. Once I added the script tag suggested by the adsense, my page score dropped by 10-20 points. Moreover, I started receiving these issues from Pagespeed analysis:
I am using nuxt js application (if that has any effect) and my script tag for getting AdSense looks like this:
<script data-n-head="ssr" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" data-ad-client="ca-pub-3965267899600337" async="" defer="" data-checked-head="true"></script>
I tried to use defer and no defer but that had the same effect. What are my options here to improve the score? Or how can I better understand the issue here?
Regards,
Rokas
The defer script attribute causes Javascript to execute just before the page loads. You can use the code below to load AdSense after the page loads.
function adSense() {
var e=document.createElement("script")
e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
e.setAttribute("data-ad-client","ca-pub-XXXXXXXXXXXXXXXX")
document.body.appendChild(e)
}
window.addEventListener("load",adSense)
This doesn't fix PageSpeed score, however it significantly improves Document Complete time in WebPageTest.
Related
I am trying to add bootstrap-select to my Flask app and I keep running into the error "TypeError: $(...).selectpicker is not a function". Everything I've read says this only occurs if you load jQuery again after loading bootstrap-select.js, so I went through and cleaned up my scripts, ensuring that jQuery was being loaded before all my other JS scripts, like so:
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"> </script>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
However, I was still getting the same problem. I decided to take a look at the order of loading in the chrome developer tools window, and now I think my problem is this: jQuery is being queued for loading before bootstrap-select, but it's not actually starting the download until after bootstrap-select has already finished. I suspect this is because of the difference in size between the two.
Is there any way I can force my other scripts to delay loading until after jQuery has already loaded? Or if I figure out how to cache a copy of jQuery in my static directory, will that help?
Edit: Wow, okay, I got a lot of comments on this! To try and clarify as much as possible, I'm just going to make some notes:
After thoroughly checking all my scripts, I can confirm that only one copy of jQuery is being loaded.
This is not an https page, I'm running it locally on a Flask development server.
I checked the bootstrap-select url I have in my code and it is the correct one. Sorry, I'm not sure why it left out the dash when I was copy-pasting. I have corrected the question accordingly.
I have been using the Network tab in chrome's dev tools to check loading successes/times.
I moved my jQuery to the very beginning of the file to ensure it would load first, and I can now confirm it is finished loading before bootstrap-select loads.
Despite all this, I'm continuing to get the same error, so if anyone has other suggestions I would appreciate them. I'm completely out of ideas at this point.
You should put defer at the end of both script tags, so they are loaded in order no matter what, like this:
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous" defer></script>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrapselect/1.13.1/js/bootstrap-select.min.js" defer></script>
Try changing the URL for your bootstrap select library to:
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js
I have the solution and it's dumb as heck.
I was adding my scripts to the same place the previous developer added theirs, in the base template that all my other templates extend. The thing is, they added theirs to the end of the page, after the body tag was closed (presumably to make page loading faster). The little bit of jQuery which was using selectpicker was in the body, and was thus trying to load the function prematurely.
Thanks for all your answers!
The situation
I have been attempting to create a react application. The index page that is loaded first contains a basic CSS and HTML loading animation and then the external scripts and CSS in a blocking order right before </body>, with the last script removing the loader animation and showing the page.
The intended purpose of this is to load a very small page (2KB in total) containing a loading animation and then load the 8MB of scripts, stylesheets and images, creating a more seamless user experience.
<html>
<head>
...
[loader css]
</head>
<body>
<div id="loader">...</div>
<script src="..."></script>
<script src="..."></script>
<link href="..." type="text/css" rel="stylesheet" />
<script> [remove #loader] </script>
</body>
</html>
The problem
This works great in Chrome, as it immediately renders the page (loading animation) and then the external dependencies. But because safari has weird, inconsistent, and ostensibly non-deterministic loading practices:
Safari starts loading the contents of the new web page, but does not start rendering it until it has loaded a sufficient amount of information.
this approach does not work; it'll just show the address bar loading indicator (for the dependencies above the closing body tag) and a blank page instead of rendering the HTML straight away.
If anybody has a solution that:
won't change the order in which things are loaded on the page
works on as many browsers as possible
is safe from cross-site scripting vulnerabilities
that would be enormously appreciated. Thank you!
The real problem is that browsers cannot be certain your JavaScript is safe to skip over until it's been loaded, parsed, and executed. If you were to add the defer attribute to your scripts the page will load and display without waiting for the assets to download - but the removal of the loader will also execute without waiting.
Consider a combination of adding defer to the external scripts and making the loader removal script itself an external defer script. According to some defer scripts are supposed to execute in the order they were specified. (Also take note of the references to async and DOMContentLoaded on that comment.)
React.js might also provide come callbacks that could be used more reliably than DOMContentReady.
In React.js's tutorial it shows that its javascript files need to be within the <head> which doesn't allow the page to render until it has finished loading.
It seems from this quick test that any website that requires react.js does not bode well with google's pageSpeed as it throws this issue "Eliminate render-blocking JavaScript and CSS in above-the-fold content"
My questions are:
does this actually effect page speed
does this issue mean google page ranking will also be effected
To expand on #Bojangels comment: You're better off loading React in a script tag just before the </body> closing tag as follows:
<html>
<head>
<title>This is my app!</title>
</head>
<body>
<!-- Your body content -->
<script src="https://fb.me/react-0.13.3.min.js"></script>
</body>
</html>
Putting the script at the end will allow the rest of the html and your css rules to render before the script tag is reached and react-0.13.3.min.js is loaded.
Also as mentioned, you could add a defer attribute to the script tag like so:
<script src="https://fb.me/react-0.13.3.min.js" defer="true"></script>
By adding a defer attribute you would accomplish the following (source: mdn):
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed.
As far as your second question about whether page load speed effects google search ranking, Moz (an SEO firm) wrote a post about page speed and ranking and concluded:
Our data shows there is no correlation between "page load time" (either document complete or fully rendered) and ranking on Google's search results page.
There is an npm that will help you Extract & Inline Critical-path CSS in HTML pages using webpack.
Critical Webpack Plugin: https://github.com/nrwl/webpack-plugin-critical
This helped me in React.js and to resolve Optimize CSS Delivery after the Google's pageSpeed insights.
I'm trying to run a Content Experiment, so the basic structure of the <head> should look like the following:
<head>
<!-- Content experiments code (CE) -->
***
<!-- End CE code -->
*** Standard <head> code: title, meta, CSS, JS, etc. ***
<!-- Google Analytics code -->
***
<!-- End GA code -->
</head>
But, here's the issue:
Amongst the various JS being loaded is Google Tag Manager:
<script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-***"></script>
This file dynamically loads another script:
<script type="text/javascript" async="" src="//www.googleadservices.com/pagead/conversion_async.js"></script>
Unfortunately for me, it does this by inserting it before the first <script> tag using the following method:
...
getElementsByTagName('script')[0].insertBefore(newScriptObject);
...
Incase it isn't obvious why this is a problem, the Content Experiment script should be the first element in the <head>. But, because this script is inserted before the first script element, it isn't.
To compound this, other scripts (also outside of my control) are also loaded by this method. So, even though in the document the Content Experiment code is first, after the JS executes and updates the DOM, there are numerous script elements placed before it.
So, does it matter?
Am I right in thinking that this doesn't actually matter? As on page load, the first script element will be the one loading the content experiment script (which is correct) as the other files haven't been dynamically inserted yet.
Will the CE script be loaded and run before the rest of the scripts are loaded?
Apologies for a slightly long winded way of asking a quite straight-forward question, but, well, yeah.
Thanks for the help,
Tom
This is a standard practice on the net and totally fine. Good digging in and debugging though! Content Experiments just wants you to load the script close to the top of your head so that they can redirect people away from the control url with as little impact to performance as possible.
Edit: AND so that they don't get a lot of support tickets when people accidently include CE AFTER google analytics.
After I read pagespeed (chrome) suggestion to defer javascript, I modified the javascript link tag for three files, not all files.
However, when I load the website, pagespeed continues to suggest that I defer javascript, and the modified files continue to appear under the suggestion's list.
I have attached two images, one shows that pagespeed is suggesting I defer these javascript files, and the other is showing the pagesource, which lcearly shows that the javascript link tag includes the defer attribute.
PAGE SPEED IMAGE
WEB PAGE SOURCE CODE
For live website: http://redesign.com.s136249.gridserver.com/
Do you have any insight as to why this is happening (perhaps this files are not being deferred?) do you have any suggestions of what can I do to have pagespeed reflect the deferral of these javascript files?
Update:
Consider using the defer attribute!
Old Answer:
The concept is, that a script loading should be deferred, that is, it should appear after all of your contents.
Like just before the closing </body> tag, and that's the right way of saying it as deferred.
For now, what you have done, is just like ordering scripts.
And why is it asking you to defer it?
Whatever external files you specify in your code, needs an extra call to be loaded.
Until that call is resolved, the rest of the content of your page cannot be rendered by the browser, and have to wait, until your scripts are loaded.
Making this call in the initial part of the code, makes your site appear a bit slow.