Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Speed up your responsive website

responsive websites mobile mobile first seo pagespeed

This topic has been archived. This means that you cannot reply to this topic.
3 replies to this topic

#1 Upstream

Upstream

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 98 posts

Posted 03 December 2013 - 02:19 PM

Speed up your responsive website

In this post I will explain how to speed up your responsive website by adding different social buttons for different types of devices (as measured by screen width). Social buttons are a great tool for getting more visitors. Not only from social websites but also from search engines. But social buttons can also slow down a website. This is especially important to consider when a user is browsing your website via a mobile phone. you might want to consider serving this user a faster and static social button

 

The quick and dirty way: small screen = probably a mobile phone

A small screen (or small viewport to be precise) is a good indicator for the device used to browser your website. The advantage of using screen width is that it can be measured extremely fast. 
Nowadays most high-end smart phones have a larger resolution. Luckily they still advertise a small screen width. As mozilla explains: 'a pixel is not a pixel'

  The preparations

In the head of the html we will first define our viewport.

<meta name="viewport" content="width=device-width">

Then we will measure the screen width. Add this peace of javascript just below the viewport code

var scrwidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
  Faster social buttons

A normal desktop or even tablet user probably has a good internet speed. Therefor we can serve them the normal social code

   
 if($('.g-plusone').length){
        (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);
        })();
        }

Mobile users would probably be better serverd by a faster, static button or link

https://plus.google....re?url=YOUR_URL
  Putting it all together

Now that we have the width of the screen in a javascript variable we can add something like this

if (scrwidht > 640){
/* social button code goes here*/
    if($('.g-plusone').length){
        (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);
        })();
        }
} else {
/* static button goes here*/
if($('.g-plusone').length){
$('.g-plusone')..html('<a href="https://plus.google.com/share?url=http%3A%2F%2Fwww.example.com"'+window.location+'>share on Google+</a>);
}
}

Edited by Upstream, 05 December 2013 - 08:57 AM.
Remove spammy links

"The question of whether a computer can think is no more interesting than the question of whether a submarine can swim." (Edsger Dijkstra)

#2 Upstream

Upstream

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 98 posts

Posted 05 December 2013 - 08:58 AM

Why can I not apply rel=author to my author profile so it adds to my Author Rank? 


"The question of whether a computer can think is no more interesting than the question of whether a submarine can swim." (Edsger Dijkstra)

#3 WingedPanther73

WingedPanther73

    A spammer's worst nightmare

  • Moderator
  • 17757 posts

Posted 05 December 2013 - 09:41 AM

The spammy links were to another external site. If it was just the rel=author, it wouldn't be a big deal, though it was displayed in plain text, not as a proper tag.


Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/


#4 Upstream

Upstream

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 98 posts

Posted 05 December 2013 - 10:18 AM

So I can set the byline of my post (here) or on the blog part of my profile to my Google+ profile with the rel=author relational tag? So when I link back from my Google+ profile so Google Authorship is established for a post? As in http://www.rankwise....kup-Cheat-Sheet and in resulting in http://beta.authorrank.org/ ? 

That would bring my and my programmers back here more often! 


"The question of whether a computer can think is no more interesting than the question of whether a submarine can swim." (Edsger Dijkstra)




Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download