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:
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:
A relatively new HTTP Header that is supported by most modern browsers (except MSIE) is the “Referrer-Policy” header. There have been previous attempts to implement similar protections through use of the ‘rel’ (or ‘rev’) attributes on links to external websites. The latest approach takes a different approach and prevents leaking of internal URLs, and in some cases parameters, to external websites. This is important from a security perspective as you might maintain some sensitive information in your page urls, that would otherwise be inadvertently shared with an external website.
Clearly, you’ll need to determine your own level of security based upon your needs. Example: ‘no-referrer’ would be the most strict and would prevent the browser from sending the ‘Referer'(sic) header even to your own websites pages.
Example header values:
Referrer-Policy: no-referrer
Referrer-Policy: no-referrer-when-downgrade
Referrer-Policy: origin
Referrer-Policy: origin-when-cross-origin
Referrer-Policy: same-origin
Referrer-Policy: strict-origin
Referrer-Policy: strict-origin-when-cross-origin
Referrer-Policy: unsafe-url
Implementation can be accomplished in many ways, the most simple being and addition to your HTTP server configuration similar to the one shown below for Apache 2.x:
Header always set Referrer-Policy strict-origin
REFERENCES:
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:
REFERENCES:
In addition to dns-prefetch, you can take browser performance one step further by actually creating a new connection to a resource.
By initiating an early connection, which includes the DNS lookup, TCP handshake, and optional TLS negotiation, you allow the user agent to mask the high latency costs of establishing a connection.
Supported in:
<link rel="preconnect" href="//example.com" />
<link rel="preconnect" href="//cdn.example.com" crossorigin />
REFERENCES:
I often get into some fringe areas of micro-optimizations of website performance, DNS prefetching is another one of those topics.
To understand how this can help, you must first understand the underlying concepts that are used within the communications used to build your web page.
The first of these is a “DNS Lookup”, where the domain name (www.example.com) is converted into a numerical address, the IP address of the server that contains the file(s).
In many websites, content is included from other domains for performance or security purposes.
When the domain names are known in advance, this approach can save time on the connection as the lookup can fetched in advance, before it is required on the page to retrieve assets.
This can be particularly useful for users with slow connections, such as those on mobile browsers.
<link rel="dns-prefetch" href="//www.example.com" />
Supported in:
REFERENCES:
SortSite is a popular desktop software for testing of web applications for broken links, browser compatibility, accessibility and common spelling errors. It is also available as a web application known as “OnDemand“.
You can generate a free sample test of your website at:
http://try.powermapper.com/Demo/SortSite
REFERENCES:
I’ve previously given steps to prevent phone numbers (and other elements) from being automatically reformatted by Skype Toolbar and IOS Safari, there is still a small segment of the user population that uses Blackberry devices that can similarly benefit from a little code.
The following stops auto detection and formatting of phone and email addresses on devices with the BlackBerry Browser.
HTML:
<meta http-equiv="x-rim-auto-match" content="none" />
WML:
<meta name="x-rim-auto-match" http-equiv="x-rim-auto-match" forua="true" content="none" />
REFERENCES:
OpenSearch is a relatively obscure topic that I’ve only crossed a few times, here is the premise.
A simple tag can be added to your content, in this case HTML, but a feed can also contain this element.
<link rel="search" href="http://www.giantgeek.com/opensearchdescription.xml" type="application/opensearchdescription+xml" title="giantgeek.com" />
That link refers to a file that resembles the one below, in it you can specify the URL to the search facilities on a website, or as in the case below, use the parameters for a Google search of your website.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE OpenSearchDescription>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<ShortName>GiantGeek.com</ShortName>
<Description>Use Google to search our web site.</Description>
<InputEncoding>UTF-8</InputEncoding>
<Tags>giantgeek skotfred</Tags>
<Contact>[email protected]</Contact>
<Image width="16" height="16" type="image/x-icon">http://www.giantgeek.com/favicon.ico</Image>
<!-- NOTE: this uses Google, you can give your own search url instead -->
<Url type="text/html" method="GET" template="http://www.google.com/search?q=site:giantgeek.com {searchTerms}"/>
<Url type="application/opensearchdescription+xml" rel="self" template="http://www.giantgeek.com/opensearchdescription.xml"/>
</OpenSearchDescription>
Many modern browsers that provide a ‘search box’ in the browser interface, can then add the capability to perform a search of your website even when the user is not there already.
REFERENCES and Additional Reading:
Here’s an odd one…. I’ve found that if you use the common method of using Conditional Comments to separate MSIE specific CSS, you’ve likely added a performance problem without knowing it… that is, in addition to the network connection and time required for the different CSS files.
It turns out that the standard use of this approach blocks the other downloads until the main CSS is loaded.
The solution is both simple and painless to implement…. a quick solution to this is to add an empty conditional comment early on, that is, before the main content (CSS) is loaded.. This works for all approaches, such as those where comments surround the <body> or various <link>, <style> or <script> tags.
UPDATE:
Personally, I like to do this immediately after the DOCTYPE and before the <html> tag. Additionally, since IE10 dropped support for this technique, I’ll just target IE 9 and below for any developer that comes after me.
<!DOCTYPE html>
<!--[if lte IE 9]><![endif]-->
<html lang="en">
...
REFERENCES: