Posts

AMP - Accelerated Mobile Pages

AMP is a way to build web pages for static content that render fast. AMP in action consists of three different parts: AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML. The AMP JS library ensures the fast rendering of AMP HTML pages. The Google AMP Cache can be used to serve cached AMP HTML pages. AMP HTML AMP HTML is basically HTML extended with custom AMP properties. The simplest AMP HTML file looks like this: <!doctype html> <html ⚡>  <head>    <meta charset="utf-8">    <link rel="canonical" href="hello-world.html">    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 norma
Post a Comment
Read more

Optimized Document Object Model (DOM) & Optimized CSS Object Model (CSSOM)

Image
Before the browser can render the page, it needs to construct the DOM and CSSOM trees. As a result, we need to ensure that we deliver both the HTML and CSS to the browser as quickly as possible. Let’s start with the simplest possible case: a plain HTML page with some text and a single image. How does the browser process this page? Conversion: The browser reads the raw bytes of HTML off the disk or network, and translates them to individual characters based on specified encoding of the file (for example, UTF-8). Tokenizing: The browser converts strings of characters into distinct tokens—as specified by the  W3C HTML5 standard ; for example, "<html>", "<body>"—and other strings within angle brackets. Each token has a special meaning and its own set of rules. Lexing: The emitted tokens are converted into "objects," which define their properties and rules. DOM construction: Finally, because the HTML markup defines relationships between
Post a Comment
Read more

mWeb Testing - Low Bandwidth & High Latency

Image
It is important to look and feel how the website performs when connectivity is extremely bad. While designing or building mobile website, think about poor and unreliable network as key performance differentiator. Your service or website can be damn good, but if due to such network limitation it kills customer experience (for e.g. transactions are failing),  it just adds into bad remark on your part. So better to be ready building website which performs well even with such barriers. There are several tools available which can help you to emulate and simulate low bandwidth & high latency. #1: Emulate Network Throttling Chrome DevTools provide variety of options to test with different download/upload and round-trip time. Refer to previous blog on how to use "DevTools". #2: System Tools (macOS)  Network Link Conditioner on macOS when you are using Xcode for development. #3: Device Emulation Android Emulators provide way to simulate
Post a Comment
Read more

Improving Mobile Site (mWeb/mHTML) Performance/Loading Speed

Image
Note: This blog is keeping current Chrome Version (57) in mind. Options may change upon Chrome version upgrades. Below are the four simple steps to be followed or performed before publishing Mobile Site (mWeb/mHTML). These steps will ensure that all basic checks have been performed to evaluate site performance under network throttle or site performance under low network speeds. Irrespective of, you are getting reports for slow response or you are doing "Performance Testing", I believe these are the steps to be followed by developers before committing code into the repository or before publishing website to the world. STEP1: Setup Browser for Analysis 1. Open Page you are designing or open page which is getting reports for slow response time. While the page is in focus, press Command + Options + I (if using mac machine) or press Control + Shift + I (windows/linux) This will open DevTools on the page within browser (DevTools are the mechanic p
Post a Comment
Read more