HTML5 DNS prefetch

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:

  • MSIE9+ (MSIE10+ as dns-prefetch)/Edge
  • Firefox
  • Chrome
  • Safari
  • Opera

REFERENCES:

Brotli Compression

If you look at HTTP Headers as often as I do, you’ve likely noticed something different in Firefox 44 and Chrome 49. In addition to the usual ‘gzip’, ‘deflate’ and ‘sdhc’ , a new value ‘br’ has started to appear for HTTPS connections.

Request:

Accept-Encoding:br

Response:

Content-Encoding:br

Compared to gzip, Brotli claims to have significantly better (26% smaller) compression density woth comparable decompression speed.

The smaller compressed size allows for better space utilization and faster page loads. We hope that this format will be supported by major browsers in the near future, as the smaller compressed size would give additional benefits to mobile users, such as lower data transfer fees and reduced battery use.

Advantages:

  • Brotli outperforms gzip for typical web assets (e.g. css, html, js) by 17–25 %.
  • Brotli -11 density compared to gzip -9:
  • html (multi-language corpus): 25 % savings
  • js (alexa top 10k): 17 % savings
  • minified js (alexa top 10k): 17 % savings
  • css (alexa top 10k): 20 % savings


NOTE: Brotli is not currently supported Apache HTTPd server (as of 2016feb10), but will likely be added in an upcoming release.

http://mail-archives.apache.org/mod_mbox/httpd-users/201601.mbox/%[email protected]%3E

Until there is native support, you can pre-compress files by following instructions here…
https://lyncd.com/2015/11/brotli-support-apache/

REFERENCES:

Firefox 41+ extension signing

In the never-ending quest for browser security, Firefox has started implementing safeguards to only allow signed extensions. I found this out after upgrading to Firefox 41 as my installed version of “Deque FireEyes” stopped working. Thankfully, there is a workaround in Firefox 41, but it goes away in Firefox 42.

  • Firefox 40: warning only!
  • Firefox 41: workaround, via:

    about:config:
    xpinstall.signatures.required = false
  • Firefox 42: BLOCKED! unless signed

REFERENCES:

Website testing with SortSite

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:

Deque FireEyes accessibility testing plugin

I’ve done a lot of accessibility testing and development work over my career. One of the many free tools that I use in that role is FireEyes. Deque also has some commercial packages for developer use.

FireEyes adds a new tab on the Firebug tab bar and adds the ability to analyze a web site for WCAG 2.0 Level A and AA and Section 508 accessibility violations. The Stand-Alone version of FireEyes is a browser plugin to the FireFox browser. It requires that the FireBug plugin already be installed

Requirements:

  • Firefox 31-41

    As of 2015aug21, the current version of the extension is NOT signed and will not execute on later versions. [See my later post on this topic]

  • FireBug 2.x – Do NOT install Firebug v3 alpha as the tab will not show.

NOTE: should be on Firebug tab labeled “Worldspace Fireyes”, but does not seem to be available in Firebug3.

NOTE: if you try to download in MSIE, you must rename the .zip to .xpi, and then open with Firefox.

REFERENCES:

HTML4 script defer

This HTML4 attribute was intended to defer/delay execution of specific javascript code until after the page is rendered. In theory, this makes the website “appear” faster as the functions relevant to the User-Interface can be executed before other “background” processes that would otherwise block the screen from displaying.


<script defer="defer" src="example.js"></script>

NOTE: Do not use defer for external scripts that might depend on each other if you need to support MSIE9 and earlier.

REFERENCES:

Java User-Agent detector and caching

It’s often important for a server side application to understand the client platform. There are two common methods used for this.

  1. On the client itself, “capabilities” can be tested.
  2. Unfortunately, the server cannot easily test these, and as such must usually rely upon the HTTP Header information, notably “User-Agent”.

Example User-agent might typically look like this for a common desktop browser, developers can usually determine the platform without a lot of work.

"Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.3)"

Determining robots and mobile platforms, unfortunately is a lot more difficult due to the variations. Libraries as those described below simplify this work as standard Java Objects expose the attributes that are commonly expected.

With Maven, the dependencies are all resolved with the following POM addition:

<dependency>
<groupid>net.sf.uadetector</groupid>
<artifactid>uadetector-resources</artifactid>
<version>2014.10</version>
</dependency>


/* Get an UserAgentStringParser and analyze the requesting client */
final UserAgentStringParser parser = UADetectorServiceFactory.getResourceModuleParser();
final ReadableUserAgent agent = parser.parse(request.getHeader("User-Agent"));

out.append("You're a '");
out.append(agent.getName());
out.append("' on '");
out.append(agent.getOperatingSystem().getName());
out.append("'.");

As indicated on the website documentation, running this query for each request uses valuable server resources, it’s best to cache the responses to minimize the impact!

http://uadetector.sourceforge.net/usage.html#improve_performance

NOTE: the website caching example is hard to copy-paste, here’s a cleaner copy.


/*
* COPYRIGHT.
*/
package com.example.cache;

import java.util.concurrent.TimeUnit;
import net.sf.uadetector.ReadableUserAgent;
import net.sf.uadetector.UserAgentStringParser;
import net.sf.uadetector.service.UADetectorServiceFactory;
import com.google.common.cache.Cache;
import com.google.common.cache.CacheBuilder;

/**
* Caching User Agent parser
* @see http://uadetector.sourceforge.net/usage.html#improve_performance
* @author Scott Fredrickson [skotfred]
* @since 2015jan28
* @version 2015jan28
*/
public final class CachedUserAgentStringParser implements UserAgentStringParser {

private final UserAgentStringParser parser = UADetectorServiceFactory.getCachingAndUpdatingParser();
private static final int CACHE_MAX_SIZE = 100;
private static final int CACHE_MAX_HOURS = 2;
/**
* Limited to 100 elements for 2 hours!
*/
private final Cache<String , ReadableUserAgent> cache = CacheBuilder.newBuilder().maximumSize(CACHE_MAX_SIZE).expireAfterWrite(CACHE_MAX_HOURS, TimeUnit.HOURS).build();

/**
* @return {@code String}
*/
@Override
public String getDataVersion() {
return parser.getDataVersion();
}
/**
* @param userAgentString {@code String}
* @return {@link ReadableUserAgent}
*/
@Override
public ReadableUserAgent parse(final String userAgentString) {
ReadableUserAgent result = cache.getIfPresent(userAgentString);
if (result == null) {
result = parser.parse(userAgentString);
cache.put(userAgentString, result);
}
return result;
}
/**
*
*/
@Override
public void shutdown() {
parser.shutdown();
}
}

REFERENCES:

Take and save a screenshot capture with Selenium

As I recently discussed Selenium, it might be useful to know how to take screen captures during tests. I’ve found that putting the function into a java method makes usage a LOT easier… here are the relevant code bits (obviously this will not run on it’s own). Feel free to expand on it as needed as this is just a stub.


import java.io.File;
import java.io.IOException;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
/**
* @param driver {@code WebDriver}
* @param filename {@code String}
*/
protected static void takeScreenshot(final WebDriver driver, final String suffix){
final String fn = "takeScreenshot("+ driver.getCurrentUrl() +","+suffix+")";
final String filename = "/tmp/screenshot_" + suffix + ".png";

LOGGER.debug("takeScreenshot("+ driver.getCurrentUrl() +","+filename+")");
final File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
// Now you can do whatever you need to do with it, for example copy somewhere
try{
FileUtils.copyFile(scrFile, new File(filename));
LOGGER.debug("[EXEC] {} {}",filename, fn);
}
catch(final IOException ex){
LOGGER.error("IOException:fn={},file={}:ex={}",fn,filename,ex);
}

}

Some other helpful Selenium methods

Here are a few other helpful functions for use of Selenium testing scripts as you often need to click links, fill in fields, and submit forms.


import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebDriverException;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
/**
*
* @param driver
* @param name
* @return
*/
public static WebElement findElementByName(final WebDriver driver, final String name){
final By el = By.name(name);
final WebElement wel = driver.findElement(el);
return wel;
}
/**
*
* @param driver
* @param name
* @param value
*/
public static void sendKeysByFieldName(final WebDriver driver, final String name, final String value){
final WebElement wel = findElementByName(driver, name);
wel.sendKeys(value);
}
/**
*
* @param driver
* @param xpath
*/
public static void clickByXpath(final WebDriver driver, final String xpath){
final By el = By.xpath(xpath);
//LOGGER.info("el is {}", el);
final WebElement wel = driver.findElement(el);
wel.click();
}
/**
*
* @param driver
* @param linktext
*/
public static void waitToClickLinkText(final WebDriver driver, final String linktext){
final WebDriverWait wait = new WebDriverWait(driver, 10);
final By el = By.linkText(linktext);
wait.until(ExpectedConditions.elementToBeClickable(el));
final WebElement wel = driver.findElement(el);
wel.click();
}
/**
*
* @param driver
* @param text
* @return
*/
public boolean pageContainsText(final WebDriver driver, final String text){
final String xpathExpression = "//*[contains(text(),'" + text + "')]";
final List<WebElement> list = driver.findElements(By.xpath(xpathExpression));
return list.size() > 0;
}

Poodle.. or rather, what’s all the fuss with SSLv3

The “Poodle” attack on websites and browsers was all over the media a few weeks ago, following in the shadow of Heartbleed.

Here’s what most users need to know… This is an vulnerability that exists in secure internet communication because…

  1. While most newer systems rely on TLS security, they still support older protocols (SSLv3 in particular for this issue)
  2. As secure communications generally attempt to find a “common” method, they will often “drop down” to older supported versions (even if they are now often considered insecure!)
  3. Most browser and server software (unless recently patched) will allow for this “drop down” in security.
  4. Most software provides a mechanism to disable this by the user or in configuration.
  5. Upgrading your software will usually remove these “problematic” vulnerabilities.

Simply put… for a consumer, it’s best to upgrade to a newer browser or find the appropriate configuration to disable SSLv3 if you are unable to upgrade. Server administrators generally should update their sofware on a regular basis for security items such as this one!

NOTE: Many CDN’s such as CloudFlare are proactive and block this vulnerability.

Technical details on the Poodle vulnerability (if you’re into that sort of thing!):

Instructions here are for Apache HTTPd 2.2.23 and newer, other servers will require a similar change:


  1. sudo vi /etc/apache2/mods-enabled/ssl.conf
  2. Change the following line from:
    SSLProtocol All -SSLv2
    to:
    SSLProtocol All -SSLv2 -SSLv3
  3. sudo service apache2 reload
  4. sudo service apache2 restart

Can be tested at the following websites:

REFERENCES: