Mozzarella

Home

Async CSS

THIS EXTENSION IS SCHEDULED TO BE REMOVED.

Due to an increase in restrictions for Firefox add-ons, this add-on is scheduled to be removed because it uses APIs that will no longer be allowed for Firefox add-ons.

The API concerned is modifying the Content-Security-Policy of webpages to allow the execution of inline JavaScript that matches a prescribed 'nonce-base64' value.

Thank you for your patronage!
---------------------

Why this add-on:

  1. Is your Internet connection really slow?
  2. Are you behind a corporate firewall that blocks a lot of content?
  3. Is CSS mostly useless to you?

Most browsers nowadays wait until all external stylesheets (defined in the head section) finish downloading before displaying any HTML. This can severely slow down your Internet experience.

What
This add-on will make all external CSS load in the background without delaying the displaying of the HTML. Similar to the FOUC (Flash Of Unstyled Content) but desirable.

How
This add-on works by marking all stylesheets in the head section as asynchronous/deferred. When you load the webpage, the browser will then display the HTML first without any CSS styles. Then as the CSS styles are downloaded, they are applied dynamically.

So when you open a webpage, for the first few seconds, you will see the basic webpage as mother nature intended, and then the webpage design (CSS) loads seconds later. If the CSS takes too long to load, then at least you get to read the basic webpage rather than seeing a blank page.

When
This add-on works by intercepting HTML traffic when it is arriving from a server and modifying the HTML in the following way:
  1. The server's HTTP headers are searched for the Content-Security-Policy header and if found, a token is inserted to allow this add-on's JavaScript to run.
  2. The HTML is downloaded in chunks and each chunk is read until the end of file or until the opening body tag or the closing head tag is found. Then the buffer is sent to the parsing algorithm.
  3. The buffer is searched for meta tags that serve Content-Security-Policy data and if found, a token is inserted to allow this add-on's JavaScript to run.
  4. The buffer is then searched for link tags with rel=stylesheet attributes.
  5. Those link tags have an artificial media=bogus added, so that the stylesheet is still downloaded but the browser won't wait for it to finish before showing the website.
  6. A script element is added next to the link element that will remove the media=bogus attribute and restore the attribute's previous value.
  7. Then the buffer is flushed to the browser and any remaining unprocessed data is also flushed to the browser.
  8. The browser parses the new HTML as if it came from the server.

A word on UTF-8:
This add-on can only transform webpages that are serialized in ASCII or UTF-8 encoding. This add-on will attempt to detect if the current webpage is ASCII or UTF-8 by looking at the HTTP header's charset and will abort the transform if any charset other than UTF-8 or ASCII are specified. If no charset HTTP header is present, it will still attempt the transform, but this can be disabled in the settings page if you are experiencing frequent errors. If the webpage is not UTF-8, the toolbar icon will say "UTF" so that you know the transform was aborted. If the HTTP header doesn't specify a charset the toolbar icon will say "CH" so that you know.

Install
The MSN website microseconds after it begins loading and before CSS has finished downloading. The MSN website many seconds after it begins loading and after the CSS has caught up.