Im Allgemeinen verwenden wir auf unserer Website Social-Sharing-Buttons, um Inhalte unserer Website auf verschiedenen sozialen Netzwerkplattformen zu teilen. Diese Social-Sharing-Schaltflächen fügen Ihren Webseiten einige zusätzliche Byte hinzu. Wenn jemand mit einer langsamen Internetverbindung auf dieser bestimmten Webseite surft, wird dies zu Unordnung führen. Um dies insbesondere bei Responsive Designs zu vermeiden, können Sie Social-Sharing-Buttons bedingt laden und das Laden auf mobilen Geräten stoppen, um Unordnung zu vermeiden.
So laden Sie soziale Widgets bedingt:
Unten ist eine einfache Technik, mit der wir die Breite des Browsers berechnen und wenn die Breite eine bestimmte Breite überschreitet, sagen wir nur 480px, dann werden die Social-Sharing-Buttons angezeigt.
Das Beste daran ist, dass wir sie nicht mit CSS verstecken, sondern das Laden vollständig vermeiden, was viel Ladezeit spart, wenn jemand von mobilen Geräten aus surft.
Um das bedingte Laden auf Ihrem Blog / Ihrer Website zu implementieren, fügen Sie zunächst alle erforderlichen sozialen Widgets wie gewohnt zu Ihrem Blog hinzu. Besuchen Sie zum Beispiel facebook.com um Code für den Like-Button zu generieren, während dev.twitter.com wird Codes für die Tweet- und Follow-Widgets von Twitter bereitstellen.
Entfernen Sie das JavaScript aus diesen generierten Codes – alles, was dazwischen steht tags – and add everything else to your website template. Then copy-paste the following snippet before the closing tag of your website template.
(function(doc, script, minimum) {
// Calculate the width of the 's screen
var browserWidth = window.innerWidth
|| doc.documentElement.clientWidth
|| doc.body.clientWidth;
// Load JavaScript only if the site is being viewed on a wide (non-mobile) screen
if (browserWidth > minimum) {
var js, frag = doc.createDocumentFragment(),
// Credit : Stoyan Stefanov of phpied.com
js_queue = function(url, id) {
if ( ! doc.getElementById(id) ) {
js = doc.createElement(script);
js.src = url; js.id = id;
frag.appendChild(js);
}
};
// These are the most common social widgets, remove the ones you don't need
js_queue ("https://apis.google.com/js/plusone.js", "googleplus-js");
js_queue ("//platform.twitter.com/widgets.js", "twitter-wjs");
js_queue ("//connect.facebook.net/en_US/all.js#xfbml=1","facebook-jssdk");
js_queue ("//platform.linkedin.com/in.js", "linkedin-js");
js_queue ("//assets.pinterest.com/js/pinit.js", "pinterest-js");
var fjs = doc.getElementsByTagName(script)[0];
fjs.parentNode.insertBefore(frag, fjs);
}
// Set the minimum width here (default is 480 pixels)
} ( document, 'script', 480 ) );
Der obige JavaScript-Code lädt asynchron alle gängigen sozialen Widgets – Twitter, Facebook, LinkedIn, Google+ und Pinterest – aber Sie können die js_queue-Aufrufe für Widgets entfernen, die Sie nicht auf Ihrer Website verwenden möchten. Speichern Sie die Änderungen und Sie sind fertig.
Das ist es! Sie sind langsam und erfolgreich zu den fortgeschrittenen Strategien des Bloggens und SEO übergegangen. Dieses Kapitel wird Ihnen definitiv helfen, die Ladezeit des Blogs zu verkürzen, was einer der entscheidenden Aspekte bei On Page SEO ist.
