diff --git a/examples/app.js b/examples/app.js
index a759198..21ea38b 100644
--- a/examples/app.js
+++ b/examples/app.js
@@ -19,7 +19,7 @@ document.onreadystatechange = function () {
 		return;
 	}
 
-	new Mergely('#mergely', {
+	const doc = new Mergely('#mergely', {
 		license: 'lgpl',
 		ignorews: true,
 		wrap_lines: true,
@@ -38,4 +38,9 @@ document.onreadystatechange = function () {
 		},
 		_debug: ''
 	});
+
+	// On init, scroll to first diff
+	doc.once('updated', () => {
+		doc.scrollToDiff('next');
+	});
 };
diff --git a/examples/index.html b/examples/index.html
index dc4a185..54b54ff 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -28,6 +28,9 @@ This example demonstrates the minimum amount of code required to use Mergely.
 		<li>
 			<a href="full-page.html">full-page.html</a>
 		</li>
+		<li>
+			<a href="scroll-to-first-change.html">scroll-to-first-change.html</a>
+		</li>
 	</ul>
 </body>
 </html>
diff --git a/examples/simple.html b/examples/simple.html
index 8cead5a..d477e71 100644
--- a/examples/simple.html
+++ b/examples/simple.html
@@ -7,8 +7,8 @@ This example demonstrates the minimum amount of code required to use Mergely.
 	<meta charset="utf-8" /><title>Mergely - Simple Example</title>
 	<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge">
 	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
-	<meta name="description" content="Merge and Diff your documents with diff online and share" />
-	<meta name="keywords" content="mergely,diff,merge,compare" />
+	<meta name="description" content="" />
+	<meta name="keywords" content="" />
 	<meta name="author" content="Jamie Peabody" />
 
 	<!-- CodeMirror peer dependency -->
diff --git a/src/diff-view.js b/src/diff-view.js
index 235d4f3..39e5cf6 100644
--- a/src/diff-view.js
+++ b/src/diff-view.js
@@ -45,10 +45,10 @@ TODO:
 For some reason ignore-whitespace will mark the "red" differently
 When wrap_lines is false, the CM editor grows, screwing up the layout
 Fix the overflow for the rendered diff view
-Remove the jump to first diff (instead, make it example)
 Introduce an async render pipeline as it's currently blocking UI
 Merge button with multiple editors
 Delete gutter_height (and any unused values)
+Fix performance issue where scroll-to-first-change seems to take a lot of time.
 */
 
 const NOTICES = [
@@ -448,28 +448,31 @@ CodeMirrorDiffView.prototype.bind = function(el) {
 			div.style.visibility = 'hidden';
 		}
 	}
+
 	if (NOTICES.indexOf(this.settings.license) < 0) {
-		const noticeTypes = {
-			'lgpl': 'GNU LGPL v3.0',
-			'gpl': 'GNU GPL v3.0',
-			'mpl': 'MPL 1.1'
-		};
-		const notice = noticeTypes[this.settings.license];
-		if (!notice) {
-			notice = noticeTypes.lgpl;
-		}
-		const editor = this._queryElement('.mergely-editor');
-		const splash = htmlToElement(getSplash({
-			notice,
-			left: (editor.offsetWidth - 300) / 2
-		}));
-		editor.addEventListener('click', () => {
-			splash.style.visibility = 'hidden';
-			splash.style.opacity = '0';
-			splash.style.transition = `visibility 0s 100ms, opacity 100ms linear`;
-			setTimeout(() => splash.remove(), 110);
+		el.addEventListener('updated', () => {
+			const noticeTypes = {
+				'lgpl': 'GNU LGPL v3.0',
+				'gpl': 'GNU GPL v3.0',
+				'mpl': 'MPL 1.1'
+			};
+			const notice = noticeTypes[this.settings.license];
+			if (!notice) {
+				notice = noticeTypes.lgpl;
+			}
+			const editor = this._queryElement('.mergely-editor');
+			const splash = htmlToElement(getSplash({
+				notice,
+				left: (editor.offsetWidth - 300) / 2
+			}));
+			editor.addEventListener('click', () => {
+				splash.style.visibility = 'hidden';
+				splash.style.opacity = '0';
+				splash.style.transition = `visibility 0s 100ms, opacity 100ms linear`;
+				setTimeout(() => splash.remove(), 110);
+			}, { once: true });
+			el.append(splash);
 		}, { once: true });
-		el.append(splash);
 	}
 
 	// check initialization
@@ -521,7 +524,6 @@ CodeMirrorDiffView.prototype.bind = function(el) {
 			this.editor.rhs.getDoc().setValue(value);
 		}.bind(this));
 	}
-	// this._changing();
 
 	this.editor.lhs.on('change', (instance, ev) => {
 		if (!this.settings.autoupdate) {
@@ -835,9 +837,6 @@ CodeMirrorDiffView.prototype._renderChanges = function() {
 		// go to first difference on start-up where values are provided in
 		// settings.
 		this._current_diff = 0;
-		if (this._initializing) {
-			this.scrollTo('lhs', this.changes[0]['lhs-line-from']);
-		}
 	}
 	this._markup_changes(this.changes);
 	this.trace('change', 'markup time', Timer.stop());
diff --git a/src/mergely.js b/src/mergely.js
index f50a881..c081ee2 100644
--- a/src/mergely.js
+++ b/src/mergely.js
@@ -6,7 +6,6 @@ class Mergely {
 			CodeMirror
 		});
 		this.el = element;
-		this._diffView.bind(element);
 		const methods = [
 			'clear',
 			'cm',
@@ -33,6 +32,9 @@ class Mergely {
 		this._listeners = [];
 		this.addEventListener = element.addEventListener.bind(element);
 		this.removeEventListener = element.removeEventListener.bind(element);
+		// Use `setImmediate` so that clients have opportunity to bind event
+		// handlers.
+		setImmediate(() => this._diffView.bind(element));
 	}
 
 	unbind() {
@@ -49,14 +51,14 @@ class Mergely {
 	mergelyUnregister() {
 	}
 
-	on(event, listener) {
-		this._listeners.push([ event, listener ]);
-		this.addEventListener(event, listener);
+	on(event, handler) {
+		this._listeners.push([ event, handler ]);
+		this.addEventListener(event, handler);
 	}
 
-	once(event, listener) {
-		this._listeners.push([ event, listener ]);
-		this.addEventListener(event, listener, { once: true });
+	once(event, handler) {
+		this._listeners.push([ event, handler ]);
+		this.addEventListener(event, handler, { once: true });
 	}
 
 	/**