reduce page weight of google plus button - javascript

I am currently developing a website and am wanting to include the google plus button. My problem however is that the google plus button adds an extra 300kb to the page weight. A lot of this comes from one single file that the http://apis.google.com/js/plusone.js file calls.
I've managed to keep the page load time down to a minimum by loading it asynchronously but I would like to know if there's any way to adapt the code to minimise the page weight?
Here is the code I am using...
<script>
window.___gcfg = {lang: 'en-GB'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<div id="google-plusone">
<g:plusone annotation="none" size="medium"></g:plusone>
</div>

You shouldn't really worry about it as it doesn't affect your code startup time. Most users will most likely just have it in cache already and load it from there. Trying to provide your own somehow "minimized" copy is actually counter-productive, because it won't profit from being cached from visiting other sites.

Related

Opening web page as I see it in browser with Python

Using the google CSE utilities I've made a HTML file that is a barebones version of Google Search (about 1/10th page size), which is as follows:
<script>
(function() {
var cx = '011947631902407852034:gq02yx0e1mq';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>
I can open this in my browser like C:\Users\Me\Documents\MyWebpage.html?q=MyQuery and it shows something like this:
This is obviously not what's in the HTML file, so I assume it's generated via JavaScript. Indeed, when I look at the page in my browser there's a lot more HTML than is in the actual file. The 1/10th size comment refers to the size of all of this, if I download it using Inspect Element, selecting the topmost node, Edit HTML, and copying all the HTML and placing it in a file.
My question is: how can I read in all of this HTML for a given query with Python?

google custom search engine execute does not show the results

learning web application. I had usually been in firmware and desktop application software development. I have done a few web pages before, but not as intensive to say a competent front end. Back end I might have more confidence.
Anyway I followed the basic in the development like include the script:
<script>
(function() {
var cx = 'XXXXXXXXXXXXXXXXX:XXXXXXXXX';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<div class="gcse-searchbox" data-gname="hobbyinfo"></div>
<div class="gcse-searchresults-only" data-gname="hobbyinfo"></div>
then a button which onclick will call a javascript function that will execute a search.
function doSearch() {
google.search.cse.element.getElement('hobbyinfo').execute('archery');
}
When I test the web application and just put archery on the search box and click search there is a search result showing but when I use the doSearch() nothing is showing. I am just learning google cse, facebook api, and mojolicious. But I think I am implementing the onclick correctly since I am using the simple view page where I can see the html text.
I am not sure if its correct to use "google.search.cse.element.getElement('hobbyinfo').execute('archery')" since I use HTML5 "div class="gcse-searchbox" ..." . Like I said I am not really an experienced Front End developer. Is it still correct to use google.search.cse ... if I use the 'div class="gcse-...' to create the searchbox and searchresults?
I am don't think that its because I am still just working on a virtualbox and have no real web hosting area yet, that the results are showing. Can someone tell me if this is the case?
Although when I manually do a search on the searchbox it does show the search result.

Site content shifts vertically on certain pages

I'm in the process of building a new website for my wife's business, using Squarespace. Don't tell her, since it's one of her Christmas presents. :)
However, I'm experiencing a weird issue. About half of the pages on the site include content from a third-party widget called Healcode. Those pages have a strange jerkiness to them on pageload, where the logo and navbar move around -- ultimately winding up in the right spot, but looking bad while doing so. Pages that don't have a third-party widget don't have this jerkiness.
Example of page that jerks: https://coconditioning.squarespace.com/yoga-classes/
Example of page that doesn't jerk: https://coconditioning.squarespace.com/private-coaching/
The Healcode widget is javascript code that looks like this:
<script type="text/javascript">
healcode_widget_id = "ay12237c4nc";
healcode_widget_name = "schedules";
healcode_widget_type = "mb";
document.write(unescape("%3Cscript src='https://www.healcode.com/javascripts/hc_widget.js' type='text/javascript'%3E%3C/script%3E"));
// Healcode Schedule Widget for Conscious Conditioning L.L.C. : Weekly Schedule New
</script>
<noscript>Please enable Javascript in order to get HealCode functionality</noscript>
Any help would be MUCH appreciated. Thank you in advance!
You could hide the page until the body loads:
<body style = 'display: none'; />
And in your javascript, adding window.onload():
healcode_widget_id = "ay12237c4nc";
healcode_widget_name = "schedules";
healcode_widget_type = "mb";
document.write( unescape("%3Cscript src='https://www.healcode.com/javascripts/hc_widget.js' type='text/javascript'%3E%3C/script%3E"));
// Healcode Schedule Widget for Conscious Conditioning L.L.C. : Weekly Schedule New
window.onload = function()
{
document.body.style.display = 'block';
};
Also, is document.write() the best solution for you?
Don't try to use document.write if possible as with document.write JS parser doesn't know where to put it. at best, the browser will ignore it. at worst, it could write over the top of your current document. Use appendChild
function loadHealCodeScript () {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://www.healcode.com/javascripts/hc_widget.js'
document.body.appendChild(script);
}
window.onload = loadHealCodeScript; // load healcode after page has been loaded
The jittering effect is happening because the healcode is loading its script before the page has completely loaded. If possible place all you javascripts after the body tag rather than head
As suggested by google also https://developers.google.com/maps/documentation/javascript/tutorial?hl=en#asynch

Delaying the loading onset of elements

I have a webpage that is rich in content such as graphics and javascript. Now the problem is that my page loads too slow, especially with slower internet connections. Now at the bottom of my webpage I have a jquery slider, which is the least important item on my website.
now...
Is there a way I can postpone or delay the loading of that whole slider(which has a div ID as parent element) until directly after everything else has loaded on my page, and not alongside the rest of the more important content?
Absolutely, you might want to look up javascript loader like RequireJS or LABjs.
The principle is that you inject the script-tag that loads your javascript. For instance, you could have the following code as the last element before your </body>-tag:
<script type='text/javascript'>
var head = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'url/to/script.js';
head.appendChild(newScript);
</script>

Get alert when external JavaScript is done

I am loading a script from the google plus button only when the user requests it. The code that is used is the following:
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
When I fire this script it will change the placeholder into the google plus button. The placeholder looks like this:
<g:plusone size="tall" annotation="none"></g:plusone>
There are a few other buttons I load like this, only when needed.
Now sometimes the buttons take a while to load. Is there a way get an alert when all the buttons are loaded.
I can then just display a loader until it is fully loaded, and then display it nicely.
I use jQuery as my javascript framework.
Edit
For a better solution check out this question: Invoking handler when all scripts finished loading via $.getScript
A better way to go is using jQueries deffered object. I added a small example and fiddle to the answer.
jQuery provides a mechanism to define a script load handler:
$.getScript( 'https://apis.google.com/js/plusone.js', function () {
// the script has loaded and executed
});
This handler is invoked after the script has executed, so it should suit your needs...
If you want to add the feature without modifying existing content, use the code below:
(function(){
var poller = window.setInterval(function(){//Set poller
if($('g\\:plusone').length == 0){ // When the document doesn't have
clearInterval(poller); // any g:plusone elements, clear
// poller, and execute your code
//Run your code..
}
}, 200); //Checks at a frequence of 200ms
})();

Categories

Resources