last time i put this custom disable browser back button (Javascript) in my AMP websites page ( websites ).
I use this script to reduce the bounce rate in seo. But after requesting indexing in google search console i got some problem with "There is a required attribute missing from the HTML tag" in this script.
Does anyone know what is the solution to disable this browser back button script on AMP Pages?
<script type = "text/javascript" > history.pushState(null, null); window.addEventListener('popstate', function(event) { history.pushState(null, null); }); </script>
By the way, my page is fully custom html AMP page, so all my css, html, scripts are concatenated inside index.html file.
Websites: luckysanto.com
Is it a valid AMP page? As I can see your script is non-AMP so probably it's deleted by amp sanitizer. You have to run your custom JavaScript in a Web Worker in order to have a valid AMP page. Here is amp-script component documentation.
Since you can only run JS in the web worker (in other words isolated DOM), you cannot manipulate anything outside of it, most likely browser history too.
I am using gatsby js to build my static amp page and you can see the final html output in the search console. You can see that the generated html passes amp validation. That test passes because I copy and pasted the generated html.
However the website fails because on page load the official amp script <script async src="https://cdn.ampproject.org/v0.js"></script> adds ineligible tags. If I remove the script, the html stays the same. There are other scripts but I am 99% sure it's ^ one because I tried removing them one by one.
The script adds things like amp-version i-amphtml-sizer in the css and changes other things on the page. I am not sure why it would add these tags because v0.js is recommended by amp.
You can see the failing page here.
https://search.google.com/test/amp?id=aClwacaTtbw5q7-Dm3glPg&skip_amp_follow=true
If someone can point me to the original amp v0.js I will be truly grateful. The CDN version is uglified+transpiled and it's really hard to debug my issue.
This was caused by amp cache. I had to follow this guide to invalidate the cache for all my amp pages.
https://developers.google.com/amp/cache/update-cache.
I'm trying to follow the AMP guidelines suggested by Google (ampproject.org)
but as soon as I add their js script, the jQuery scroll stops working
Does anybody knows why and how to fix it?
The script tag is prohibited in AMP HTML unless:
The type is application/ld+json
It is the mandatory script tag to load the AMP runtime
It is a tag to load extended components
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#html-tags
A list of available extensions, such as amp-carousel, can be found here.
You can also use custom elements and web components according to this page.
"AMP components may have JavaScript under the hood, but it is
coordinated with other AMP components, so its composition into the
page doesn’t cause performance degradation."
The only way to include JQuery scroll is to pull it in via an AMP-IFRAME tag. But that will only give you access to it within the context of the amp-iframe so most likely that will not help you. What are you trying to accomplish with the JQuery scroll? AMP pages are meant to be simple and for displaying information very quickly. Best examples for the use of AMP pages are news sites. If you open CHROME debugger and click on the mobile view icon and then do a search for say "Trump", you'll see the carousel of AMP pages at the top. You'll notice that they are all simple news stories. Nothing to fancy.
Do you have an example of what you are trying to do that we can look at?
I am working on vivvo template. Which is completed, now I have to integrate Accelerated Mobile Pages (AMP) in it. To reference amp js file use this
<script async src="https://cdn.ampproject.org/v0.js"></script>
but this file did't included in pages. And all reference files css and js after this line didn't loaded. I followed this link to use amp
Create Your First AMP Page
What am i missing. Please help. Thanks
Well for a start you can't use any other CSS files (inline CSS only) nor Javascript.
What do you mean "this file did't included in pages"? That piece of javascript is mandatory on an AMP page (it's what makes it an AMP page).
Also have you used the #development=1 option in Google Chrome? Append that to your URL and then reload the page with Developer tools open and look at the console to see errors.
I've blogged my own experiences creating AMP pages here: https://www.tunetheweb.com/blog/implementing-accelerated-mobile-pages/ as there were a few funnies I didn't realise until I started implementing them.
I am about to embark on a new web project and I plan to put some JavaScripts in the <head> and also some before </body>, using the following scheme:
Scripts that are essential for the UX of the page: in the <head>. As I've picked up perusing the web - scripts in the <head> is loaded before the page loads, so it would make sense to put scripts that are essential to the user experience there.
Scripts that are non-essential to the design and UX (Google Analytics scripts etc.): before the </body>.
Is this a sensible approach?
Another approach would be to put all the scripts in the <head> and add defer attributes to the non-essential scripts. However, I read that older versions of Firefox don't pick up the defer attribute.
I think a lot of developers run JavaScript just before the </body> so that it is run after all the elements have been rendered.
However, if you organise your code correctly, the position on the page doesn't matter.
For example, when using jQuery, you can ensure the code isn't run until the page and its elements are fully rendered by doing the following:
$(document).ready(function(){
//Code here
});
Then the script reference can be put in the head tag.
Script tags should be referenced just before </body>. This prevents render blocking while the scripts load and is much better for site perception speed.
No obtrusive JavaScript should be used when using this technique.
JavaScript code should be placed at the end of the document so that it doesn't delay the parallel loading of page elements. This does then require that the JavaScript code is written in a specific way, but it does improve the speed of page loads.
Also, ideally you could host references like this under a different (sub)domain. References to jQuery should be pointed to Google's CDN too.
See Best Practices for Speeding Up Your Web Site for more information.
One of the reasons you'd want to put scripts before the </body> is if they manipulate the DOM without user interaction, so you'll need the DOM to be loaded in order to be manipulated. Another way to do that is to add an event listener and run the scripts when the page has loaded, but this will require additional code, which might get complicated if you have a lot of scripts, especially ones you haven't written yourself. Putting them at the end of the page also will speed up page load, though in the case of DOM manipulating scripts you might get some not-so-pretty results from that.
I'd say that's perfectly sensible. As you said, as long as you don't move essential scripts (e.g. jQuery, Modernizr, etc., etc.) out from the <head>, you shouldn't have problems.
Moving non-essential scripts to the bottom of the page should help with the perceived loading speed (that and minimizing / concatenating scripts).
It all depends on what you mean by "essential for UX". I agree with having Modernizr appear early for example, but not everything needs to load straight away. If you're trying to avoid a flash of unstyled text (FOUT), that's a good reason. Similarly, if you have scripts that affect how the page looks before the user does anything, you should load those early.
Don't forget though, speed is part of UX. There's no advantage in having some jQuery interaction ready to run when the user can't see the content it applies to yet. The difference between loading the scripts at the start of the end is a matter of seconds. If you let the page load first, the user will be using those seconds to take the page in, allowing you to load scripts unobtrusively.
Your page will load faster if you move scripts to the bottom of the page, and that makes a difference to your pagerank these days.
Also, some versions of Internet Explorer will throw errors if you try to run a script before the element it refers to has loaded.
Like Ed says, your scripts should be stored in a separate file, and in as few files as possible.
Put the JavaScript code in a separate file and place a link to it in the head part of the HTML.