document.write() Intervention!

The use of document.write() has always been a bad “code smell” in JavaScript. Most web performance guides such as WebPageTest and Yahoo Exception Performance have warned against this practice.

In most cases, document.write() can be replaced by inserting innerHTML into an empty element after the rest of the page loads. This approach also allows the developer to “think” about how the page might react in cases where JavaScript is disabled or not available on the client.

Google has recently changed the default behavior, such that when on a slow (currently 2G) connection, but discussions have also leaned toward including any slow connection.
As such, right now, the following will occur on slow (2G) connections:

  • Chrome 53+ (warning displayed in debugger console)
  • Chrome 55+ (blocked – code will not execute, warning message will appear in debugger console)

For users on slow connections, such as 2G, external scripts dynamically injected via document.write() can delay the display of main page content for tens of seconds, or cause pages to either fail to load or take so long that the user just gives up. Based on instrumentation in Chrome, we’ve learned that pages featuring third-party scripts inserted via document.write() are typically twice as slow to load than other pages on 2G.


My advice – remove all use of document.write() for required content in your code now, as your users MAY NOT see that content if you do not.

REFERENCES:

Google Chrome installation for Ubuntu

With a few simple steps, Google Chrome can be installed on Ubuntu.


wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -


sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'


sudo apt-get update


sudo apt-get install google-chrome-stable

or…


sudo apt-get install google-chrome-beta

IPv6 DNS configuration

As an IT professional, I’ve long been aware of the impending IPv4 exhaustion. To the layperson, this can easily be compared to phone numbers… there are now so many devices connected to the Internet that the size of the number used to identify and reach each of them uniquely is impossible.

IPv6 is a newer addressing system that supports a drastically increased number of addresses/numbers for use. Unfortunately, like Digital TV (in the US), adoption and migration of users and websites is slow.

To do your part as a user, you can change the settings in your gateway/router/modem to allow for IPv6 DNS lookups as most providers already support IPv6 traffic.

You can test your connection here:
http://www.test-ipv6.com/

Here are a few common values, I’ve also provided the Comcast/Xfinity values for reference:

OpenDNS IPv4:

  • 208.67.222.222 (resolver1.opendns.com)
  • 208.67.220.220 (resolver2.opendns.com)
  • 208.67.222.220 (resolver3.opendns.com)
  • 208.67.220.222 (resolver4.opendns.com)

OpenDNS IPv6:

  • 2620:0:ccc::2
  • 2620:0:ccd::2

Google IPv4:

  • 8.8.8.8
  • 8.8.4.4

Google IPv6:

  • 2001:4860:4860::8888
  • 2001:4860:4860::8844

Comcast IPv4:

  • 75.75.75.75
  • 76.76.76.76

Comcast IPv6:

  • 2001:558:feed::1
  • 2001:558:feed::2

REFERENCES:

Google and Facebook bypassing P3P User Privacy Settings

I wrote about P3P a very long time ago, and have implemented it on several websites. Some history, the W3C crafted the P3P policy.
Microsoft introduced P3P support in IE6 (in 2001) and it remains implemented in all current versions of the browser. The primary intended use is to block 3rd party cookies within the browser on behalf of the user.

Interesting enough, Microsoft has had been a bit of a struggle with Google and Facebook, which send the following HTTP response headers.

Google’s Response:

P3P: CP="This is not a P3P policy! See http://www.google.com/support/accounts/bin/answer.py?hl=en&answer=151657 for more info."

Facebook’s response:

P3P: CP="Facebook does not have a P3P policy. Learn why here: http://fb.me/p3p"

REFERENCES:

Install Google mod_pagespeed for Apache HTTP

Website network performance is usually a very complicated process. Over the years, I’ve outlined many development techniques that can be used toward this goal. I’d heard about mod_pagespeed for some time, but never had the opportunity to experiment with it until recently. My first impression is that it is a VERY EASY means to gain performance improvements without reworking your existing website to implement techniques for establishing far-future expires, cache-busting, minification and static file merging.

Out of the box, most common techniques are automatically applied to your assets and a local server cache is created to utilize them.

Default installation is trivial:

  1. Download the latest version for your server architecture:

    wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb

    OR

    wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_i386.deb

  2. sudo dpkg -i mod-pagespeed-*.deb

  3. sudo apt-get -f install
    (if required)

  4. sudo service apache2 restart

NOTE: Using tools like Firebug will enable you to see an HTTP Header indicating the version being used for your requests.

If you need to modify configuration from the default:

sudo vi /etc/apache2/mods-available/pagespeed.conf

For VirtualDomains, you can selectively enable and disable PageSpeed and many of it’s settings in your appropriate configuration files with:

<IfModule pagespeed_module>
ModPagespeed on
</IfModule>

NOTE: Appending ?ModPagespeed=off to your URL will disable functions for that request.

REFERENCES:

Adding meta “viewport” for WordPress

Google recently changed their search algoritms to better recognize and weight “Mobile” support. This term is loosely defined in general, but to get your Google search “juice” you simply need to add a “viewport” meta tag. Unfortunately, unless you have the knowledge and want to edit your WordPress theme manually, there’s not an obvious way to add this.

Adding the “Definitely Allow Mobile Zooming” plugin makes this painless in WordPress without any additional configuration.

HTML code required (in <head>):

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

PHP required (for manual addition):

<?php
function set_viewport() {
?>
<meta name="viewport" content="width=device-width" />
<?php
}
add_action('wp_head', 'set_viewport');
?>

REFERENCES:

Google ChromeFrame

There was some debate back when this was first revealed in 2009, but the use of ChromeFrame is still relevant for some organizations that are stuck on older browsers for legacy applications.


<meta http-equiv="X-UA-Compatible" content="chrome=1" /><!-- this is for all versions of IE -->
<meta http-equiv="X-UA-Compatible" content="chrome=IE6" /><!-- this is for IE6 and lower -->
<meta http-equiv="X-UA-Compatible" content="chrome=IE7" /><!-- this is for IE7 and lower -->
<meta http-equiv="X-UA-Compatible" content="chrome=IE8" /><!-- this is for IE8 and lower -->
<meta http-equiv="X-UA-Compatible" content="chrome=IE9" /><!-- this is for IE9 and lower -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE6" /><!-- this is for IE9 and lower, passes Edge to others -->

NOTES:

  1. Installation can be done without Administrative rights on the Windows OS.
  2. Installation will append the ‘chromeframe’ version to the ‘User-Agent’ HTTP header sent by the browser to allow it to be parsed.

REFERENCES:

Google Web Fonts

The use of non-traditional web fonts was once a very challenging task due to various browser specific implementations. Thankfully Google WebFonts have made this easy enough for most developers to add in a cross-browser manner in a matter of minutes.

WARNING, there are a few considerations to make here…

  1. Some browsers displays a blank space in place of the text that uses the font.
  2. … and then re-render text in the web font once it has loaded

Method 1: (most compatible, but cross-browser loading behavior varies)

<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css' />
<style type="text/css">
h1,p { font-family: 'Ubuntu', sans-serif; }
</style>

Method 2: (requires javascript, but is consistent cross-browser)

<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Ubuntu Mono','Ubuntu' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<style type="text/css">
h1 { font-family: 'Ubuntu Mono','Courier New',monospace; }
p { font-family: 'Ubuntu','sans-serif'; }
</style>