Use of lower-case HTML5 DOCTYPE as a network micro-optimization

TLDR; using lowercase in markup improves the compression as the dictionary for the algorithm will be smaller. Most HTML/JS/CSS is case insensitive and can be optimized as lowercase.

micro-optimizations can be fun… or an utter pain.

I’ve been on both sides of this debate at times, at one time had sub-second SLA’s for a web based customer service app that ran out of a UK data-center with users in South America.

This helped build a thorough understanding of how to best use the browser cache, progressive page loading, and optimization of image and network compression.

Webserver extensions like Google mod_pagespeed definitely help automate some of this stuff on the output, but nothing is ever robust as just building the application with performance in mind.

As a java shop (at that time), JSP exposes a lot of config to eliminate white-space in generated output, that often saved up to several K per page. I’m always amazed when I find large companies that still do not utilize those features, as “bandwidth is cheap” for the provider… but not always for the end user.

REFERENCES:

alexaVerifyID meta header?

This was once a service to aid webmasters with SEO, to claim a website you had to add content to your HTML. While Alexa still provides this service as a subscription, the use of the META tag is no longer required as support was dropped in May 2016!


<meta name="alexaVerifyID" content="your-verification-id-here" />

HTML5 Hyperlink Auditing (ping attribute)

This was a browser feature that was relatively unknown until recently when several browsers announced that they would be removing support.  It is useful to track instances when a user clicks on a link, as it could be recorded by the server for analysis of user activity.   As it was done out-of-bounds, there was no additional code, such as javascript, required on the client-side for this to occur.

<a href="..." ping="https://example.com/pingreporter">Example link</a>

References:

HTML5 download attribute

Example

The download attribute allows for the downloaded filename to be specified to be something different than the name in the url.

This is available only on the A tag when an href attribute is already specified and works similarly to setting the header as:
Content-Disposition: attachment; filename="filename.pdf"

NOTE: this is not currently available in IE, Edge(prior to 13) or IOS Safari.

References:

Microsoft Silverlight

Silverlight was a browser extension that was backed by Microsoft’s .NET product on many platforms, it provided media capabilities similar to Macromedia/Adobe Flash.  Similar to Flash, it has had it’s own share of security problems over the years.

Introduced in 2007 and currently in a deprecated state. Once supported on Windows XP (IE6) to Windows 10 (IE11), MacOS and Ubuntu. Now only supported in MSIE. Edge never provided support. Modern versions of Chrome, Firefox, Safari, and Opera no longer support.

HTML Markup example:

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="MySilverLightControl.xap"/>
</object>

REFERENCES:

https://en.wikipedia.org/wiki/Microsoft_Silverlight

https://www.microsoft.com/Silverlight/

https://docs.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/mt788654(v=msdn.10)

Using comments to ‘hide’ SCRIPT tag content – please stop this obsolete practice

Many years ago, when HTML3 and 4 were still widely used in the mid to late 1990s, it was a common practice to place HTML style comments, or in some cases CDATA comments inside the SCRIPT tag in an attempt to hide that content from browsers that could not process it. In those browsers the content (javascript source code) would sometimes be displayed on the page, making it quite a mess.

This practice is now obsolete, and often problematic as there are very few of those browsers in use today – primarily only for testing of legacy functionality.

Example of old approach

<script type="text/javascript">
<--
// some script
-->
</script>

NOTE: for XHTML or XML documents, the use of a CDATA style comment is still required.
<script type=”text/javascript”>
//<![CDATA[
…code…
//]]>
</script>

REFERENCES:

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:

CSS font-smoothing

You might be tempted to use the full capabilities of your browser to do things such as font-smoothing, but it’s not a good idea as it is often overused and the Browser/OS will generally do it’s best.

Both Firefox and Safari have support of this CSS attribute as follows:

font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;

NOTE: If you’re using something like Glyphicons (included with Bootstrap) you might have some use for this because of the way that fonts are used for icons.

REFERENCES:

HTML5 autofill using autocomplete

Once in a while, the web development community reintroduces old ideas in a new way. Years ago, there was a concept called ECML (E-Commerce Markup Language) that added an HTML attribute to identify values in a FORM that could be auto-filled from a users “virtual wallet”. Sadly, while it was implemented on a variety of websites (mine included), it was not widely supported and disappeared.

The concept has been reintroduced as values in the ‘autocomplete’ attribute in HTML5. Traditionally this attribute was only used to prevent auto-filling of values, now it can identify which values it is related to for pre-fill.

The usual payment, address and demographic fields (and variations of each) are supported.

EXAMPLE:

^<input type="text" name="ccnum" autocomplete="cc-number" value="" />

REFERENCES:

HTML5 Link Prefetching

Link prefetching is used to identify a resource that might be required by the next navigation, and that the user agent SHOULD fetch, such that the user agent can deliver a faster response once the resource is requested in the future.


<link rel="prefetch" href="http://www.example.com/images/sprite.png" />

<link rel="prefetch" href="/images/sprite.png" />

Supported in:

  • MSIE 11+/Edge
  • Firefox 3.5+ (for HTTPS)
  • Chrome
  • Opera

REFERENCES: