Kenneth Ormandy kennethormandy

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/

For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

Prolog

Google Chrome Developers says:

The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 is available since Chrome 36 and Opera 23.

Some examples of file size differences: WOFF vs. WOFF2

TTF to WOFF2 converting

http://www.fontsquirrel.com/tools/webfont-generator

NOTE: the list has moved to https://github.com/sketchplugins/plugin-directory

Sketch Plugins

A list of Sketch plugins hosted at GitHub, in no particular order.

brandonbeecroft/Lorem-Ipsum-Plugin-for-Sketch This is a plugin for quickly creating Lorem Ipsum text in Sketch
sebj/Sketch Templates and Plugins for Sketch by Bohemian Coding
FredericJacobs/crop_Artboard A script to export the Sketch App artboards to the clipboard
almonk/SketchGit A simple Git client built right into Sketch.

	<script type="text/javascript">
	(function () {
	"use strict";
	// once cached, the css file is stored on the client forever unless
	// the URL below is changed. Any change will invalidate the cache
	var css_href = './index_files/web-fonts.css';
	// a simple event handler wrapper
	function on(el, ev, callback) {
	if (el.addEventListener) {
	el.addEventListener(ev, callback, false);

	#!/bin/sh

	# Be sure to set the index and 404 docs to "index" and "404" respectively in your bucket settings

	# replace with your compile command
	harp compile ./ ./out

	# removes the html extension
	for f in `ls out/.html out//.html`; do mv $f "${f%%.*}"; done

	div.description a.autolink
	{
	display: inline-block;
	max-width: 250px;
	text-overflow: ellipsis;
	overflow: hidden;
	}

	- var paths = [], files = []; function recursiveTree(obj) { if (typeof obj == "object" && !obj.length) { for (item in obj) { if (item === "contents") { recursiveTree(obj[item]); } else if (item != "data") { paths.push(item); recursiveTree(obj[item]); paths.splice(paths.length-1, 1); } } } else if (typeof obj == "object") { for (i in obj) { var file = obj[i]; if (/(\.html$)/.test(file)) { paths.push(file); files.push("/" + paths.join("/")); paths.splice(paths.length-1, 1); } } } }; recursiveTree(public);

	xml
	urlset(xmlns="http://www.sitemaps.org/schemas/sitemap/0.9")
	- for(i in files) {
	url
	loc= files[i]
	priority 0.5
	- }

	...
	// test for font-face version to load via Data URI'd CSS
	// Basically, load WOFF unless it's android's default browser, which needs TTF, or ie8-, which needs eot
	var fonts = ns.files.css.fontsWOFF,
	ua = win.navigator.userAgent;

	// android webkit browser, non-chrome
	if( ua.indexOf( "Android" ) > -1 && ua.indexOf( "like Gecko" ) > -1 && ua.indexOf( "Chrome" ) === -1 ){
	fonts = ns.files.css.fontsTTF;
	}

	$(function() {
	Parse.$ = jQuery;

	// Initialize Parse with your Parse application javascript keys
	Parse.initialize("APP-KEY",
	"JAVASCRIPT-ID");

	// The main view for the app
	var AppView = Parse.View.extend({
	el: $("#contact"),

	{
	"index": {
	"title": "Hello World"
	}
	}