Visualizing the Social Media Overhead - by Benjamin Spiegel

Posted: February 22nd, 2012 by Benjamin Spiegel

We all know how important site performance is for Organic Rankings as well as the impact it has on paid spend and Quality Score. We have spend a large amount of time over the  past few months working with our brands and their agencies to optimize their sites performance. A primary Quality Indicator we use is the Google Page Speed Tool.

So as an example i will use this site as a benchmark. I follow all the Tips and hints google gives you and archived a Score of 95 Points. This included a lot of Server Side Modifications, moving my media to Amazon AWS, my database to RDS and compressed all my HTML, CSS & JS. I also created some odd Slices and and codes. But hey i got a higher score now. So how do i get the remaining 5 Points, by looking at the Errors i see:

As you can see above, all my “negative” page speed scores are from Social media, the funny part is that google says you should do XYZ and google themselves is not doing it….

For example:
The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources: And whats the first thing that shows up: http://apis.google.com/js/plusone.js
So google, please change your own code, so you give me a higher score, so i rank better so i pay less on a CPC base….

As you cant see the reaming errors are all offsite at the API’s and Social Media Sites themselves.. Twitter Images to large. Google JS not minified…. Google serving same content form separate URLs….

So all this social icons and share things are creating a huge overhead in external calls, media to be loaded, queries to be run. I mean, don’t forget when you open a URL on my site, it goes and asks Google, Twitter, Facebook etc how many times this page has been rated shared etc… Lots of overhead.

So everybody likes and loves Charts, so i tried to come up with a Way to visualize this, and the best one i have found so far is a new Feature in Firefox 12:

Firefox 12 3D Code Inspector


What is this? This 3D Visualization shows the depth of page elements, basically how many items are they wrapped in. Back in the day we switched from Tables to CSS to avoid having code this badly/deeply nested. But it seems we are moving back to it.
Based on the Image above, you can clearly see that the biggest overhead is from Facebook, then Google, then Twitter and oddly LinkedIn is the most optimized.
Just for kicks, below is the same Visualization from our own site:

Soo what?
It seems that we try to optimize, clean and sharpen our code/designs and content on a Daily base to please Search Engines and other algorithms, in order to archive better rankings, higher social indicators and an overall better user experience. BUt in order to stay on top of social trends we load ourselves up with sharing icons and social widgets.
I think with such a wide use of sharing tools & Widgets we need to ask social network companies to optimize their code and offer solutions with a smaller overhead!

UPDATE:
just one more, this could become an art ;)

No Comments »

Apple’s web designer starting to slack off - by Benjamin Spiegel

Posted: June 7th, 2011 by Benjamin Spiegel

Apple Homepage on Safari

Apple Homepage on Safari

I have to admit that personally i always have been a “Apple Fan Boy” and have actually been called much worse, but lately i am less and less proud off apple’s work. Escpecially when it comes to its web design practices.
Usually  apple has always been on the forefront of web development and usability, but lately some odd things have happened in their web development team.
Images are not being cut correctly, PNG icons with over 100kb in file size, and the latest stunt is the new homepage.
While it does look beautiful on all major browsers, they did forget to test it in their highly praised mobile safari.

I would forgive this mistake to any company, but come on, your own homepage, in your own device on your own browser….

1 Comment »

AdLib, new iPad Javascript Framework for iPad web Development - by Benjamin Spiegel

Posted: April 7th, 2010 by Benjamin Spiegel

DOWNLOAD LINKS
DOWNLOAD UNCOMPRESSED ADLIB.JS and the IPAD INTRO.JS
Done21 reports on the curious discovery of a new Web-based framework used in the iPad that allows web pages to behave in ways much more akin to native applications than previously observed. The framework, dubbed ‘AdLib’ by the report’s author after the name of the file containing the code, was first noticed in action when navigating to Apple’s iPad User Guide using the iPad’s mobile version of Safari. It allows the user guide, which is simply a web page, to be offered in a split-pane view with scrollbars and with a native app-like feel.
What’s particularly interesting is that it does something that shouldn’t really be possible in Mobile Webkit: It includes scrolling panes that can be manipulated with a single finger, complete with the signature iPhone OS “scroll bars” and elastic transitions. If you have ever worked with Safari on the iPhone, you know that having scrolling boxes of content is sort of possible, but requires a special two-finger gesture to scroll.
Curiosity got the best of me, so I loaded the page in Safari on my laptop (and changed Safari’s user agent to mimic the iPad) and got to work with the developer tools. After extracting the JavaScript and de-minifying it, my suspicions were confirmed. Apple was manually reading the touch events, calculating the inertia of the scrolling, and manually drawing the scroll bars. It was incredible that it worked so smoothly in the browser.
The framework, which weighs in at about 4,300 lines of code, permits Mobile Safari to display the native-like user guide simply using HTML, CSS, JavaScript, the basic web technologies supported by the iPhone and iPad. It appears similar in some respects to the PastryKit framework described by John Gruber last December, although AdLib appears to be a more advanced version that incorporates iPad-specific references.
It remains to be seen whether Apple will release the custom API for use by third-developers, but despite an absence of documentation, the report notes that the framework is “extremely well thought out and complete” and could be of significant utility to developers.

Done21 reports on the curious discovery of a new Web-based framework used in the iPad that allows web pages to behave in ways much more akin to native applications than previously observed. The framework, dubbed ‘AdLib’ by the report’s author after the name of the file containing the code, was first noticed in action when navigating to Apple’s iPad User Guide using the iPad’s mobile version of Safari. It allows the user guide, which is simply a web page, to be offered in a split-pane view with scrollbars and with a native app-like feel.

What’s particularly interesting is that it does something that shouldn’t really be possible in Mobile Webkit: It includes scrolling panes that can be manipulated with a single finger, complete with the signature iPhone OS “scroll bars” and elastic transitions. If you have ever worked with Safari on the iPhone, you know that having scrolling boxes of content is sort of possible, but requires a special two-finger gesture to scroll.

Curiosity got the best of me, so I loaded the page in Safari on my laptop (and changed Safari’s user agent to mimic the iPad) and got to work with the developer tools. After extracting the JavaScript and de-minifying it, my suspicions were confirmed. Apple was manually reading the touch events, calculating the inertia of the scrolling, and manually drawing the scroll bars. It was incredible that it worked so smoothly in the browser.

The framework, which weighs in at about 4,300 lines of code, permits Mobile Safari to display the native-like user guide simply using HTML, CSS, JavaScript, the basic web technologies supported by the iPhone and iPad. It appears similar in some respects to the PastryKit framework described last December, although AdLib appears to be a more advanced version that incorporates iPad-specific references.

It remains to be seen whether Apple will release the custom API for use by third-developers, but despite an absence of documentation, the report notes that the framework is “extremely well thought out and complete” and could be of significant utility to developers.

What was more interesting is that there was an entire framework running this web application. The framework weighed in at 4,300 lines of code, and was unmistakably an Apple-born API. Every class and constant was prefixed with the letters “AD” and some of the classes include ADTabBarController, ADScrollPane, ADViewController, ADView, ADToolbar, and dozens more.

What does the AD prefix stand for? I don’t know. The framework itself was contained in a file called AdLib-ug-ipad.js, so for the time being let’s call it AdLib. I also appreciate the sense of humor the developers seem to have about the name. The accompanying application code that utilizes the framework is about 1,500 lines and offers a few clues as to how to use the AdLib framework. There is no documentation in the code or anywhere online, and the local variables are shortened to a, b, c, etc… If you want to know more about how it works, take a look at the code linked below.

Is AdLib a framework that Apple plans to release for the public? I sure hope so. The framework looks to be extremely well thought out and complete. Perhaps this will be a framework to support a future release of Dashcode, an application for writing dashboard widgets and Safari/iPhone web apps. Maybe we’ll hear something about it this Thursday at Apple’s event for iPhone OS 4.

8 Comments »

Google Redesigned (Google 2.0) - by Sean Ward

Posted: November 29th, 2009 by Sean Ward

So i have been browsing around, and all the sudden i came across a piece of code, using that cookie code, you are able to see a new version of google, its some kind of redesign or draft. Nothing fancy, nothing special, but check it out anyway, one feature defiantly like is the visible sidebar and options.

How to: When you paste the following into the address bar of your browser when on google.com and hit return, you should find yourself as new participant of Google’s latest and more all-encompassing prototype test – the one with a new logo, buttons, and always-visible left-hand pane in results. Please note I needed to sign out first for this to work.

Google Redesigned

Read the rest of this entry »

1 Comment »