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

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 provided by almost all browsers to enable developers with quick debug, diagnosis & analysis).
  • Enable "Capture Screenshots", which turns BLUE when enabled. 
  • DevTools captures screenshots during the page load.
  • Go to Network Tab.

STEP2: Emulate a Mobile User Experience (MobileUX)



Testing mobile website performance on desktop or on WiFi/Broadband network is quiet deceiving. Broadband/WiFi networks are comparatively faster. Also desktop machine capacities & browser cache capacities are quiet higher than mobile. (Though the latest evolution in high capacity devices are breaking these barriers). So the first thing we need to do here is to emulate Mobile User Experience within DevTools.

 1. Enable "Disable Cache". Click on checkbox to enable it, as outlined in below screenshot.
 2. Change Network Throttling from "No Throttling" to "Regular 2G" or "Regular 3G"  options as highlighted in the below screenshot.


Browser's DevTools will setup browser to mimic for worst case scenario where mobile network speed is upto 2G/3G experience.

STEP3: Analyze Requests

Figure out what's making page slow by reloading page. Look at load time for each item/component against how much time it takes to load them in actual. There are few pointers to look for. For e.g.

E.g. 1: Find Render/Blocking Scripts


Browser pauses rendering page and execute the script immediately whenever it founds a <script> tag within HTML. There can be few scripts which aren't needed for page load or can be loaded later. Mark such scripts as "asynchronous" or "defer" their execution to speed up page load time.


E.g. 2: Find large requests


When page loaded, investigate all the images, logo, video, contents or items which took longer than expected time to load on the page. Identify if any of them can be suppressed or optimized to improve performance.


STEP3: Make Changes & Re-run

Make changes to code/design to achieve performance goals. Keep re-running DevTools to evaluate different load times and deliver a finely tuned website to end customers.

"REMEMBER, EVERY BIG THINGS HAVE SMALL BEGINNINGS." 

Comments

Post a Comment

Popular posts from this blog

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
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
Read more