dation. In mobile browsers, the pop-up
keyboards often automatically provide
keystroke choices appropriate to the
specified input type when text input is
required. Browsers that do not support
the specified input type will simply display a text box.
In addition, new CSS 3.0 features
can help create lightweight pages by
providing built-in support for gradients, rounded borders, shadows, animations, transitions, and other graphical effects that previously required
images to be loaded. These new features can speed up page rendering.
A number of websites offer regularly updated lists showing which features are supported by which desktop
and mobile browsers (for example,
http://caniuse.com/ and http://mo-
bilehtml5.org/).
Ease of implementation: Advanced.
Making these changes manually is extremely complex and time consuming,
if not impossible. If you use a CMS, it
may generate a great deal of HTML and
CSS that you have no control over.
optimize client-side Processing
The order in which a browser executes
the various steps needed to construct a
page can have a major impact on performance, as do the complexity of the
page and the choice of JavaScript techniques. This is especially true on mobile devices where client-side processing is constrained by slower CPUs and
less memory. The following sections
provide some tactics for increasing the
efficiency of page processing.
Defer Rendering Below-the-Fold
Content. You can ensure the user sees
the page quicker by delaying the loading and rendering of any content that
is below the initially visible area, sometimes called “below the fold.” To eliminate the need to reflow content after
the remainder of the page is loaded, replace images initially with placeholder
<img> tags that specify the correct
height and width.
Ease of implementation: Moderate.
Some good JavaScript libraries are
available that can be used for below-the-fold lazy image loading. 12
Defer Loading and Executing
Scripts. Parsing JavaScript can take
up to 100 milliseconds per kilobyte of
code on some mobile devices. Many
script libraries are not needed until
the order in
which a browser
executes the
various steps
needed to construct
a page can have
a major impact
on performance,
as do the
complexity
of the page and
the choice
of Javascript
techniques.
after a page has finished rendering.
Downloading and parsing these scripts
can safely be deferred until after the
onload event. For example, scripts
that support interactive user behavior,
such as drag and drop, cannot possibly be called before the user has even
seen the page. The same logic applies
to script execution. Defer as much as
possible until after onload instead of
needlessly holding up the initial rendering of the important visible content
on the page.
The script to defer could be your
own or, often more importantly, script
from third parties. Poorly optimized
scripts for advertisements, social media widgets, or analytics support can
block a page from rendering, sometimes adding precious seconds to load
times. Also, carefully evaluate the use
of large script frameworks such as
jQuery for mobile sites, especially if
you are using only a couple of objects
in the framework.
Ease of implementation: Moderate.
Many third-party frameworks now
provide deferred or async versions of
their APIs. The developer just has to
switch to these new versions. Some
JavaScript may be more complex to
defer as there are many caveats to running scripts after onload (for example, what do you do if you have a script
that wants to attach to the onload
event? If you defer it after onload, it
has missed its chance).
Use AJAX for Progressive Enhancement. Asynchronous JavaScript and
XML (AJAX) is a technique for using
the XHR (XMLHttpRequest) object to
fetch data from a Web server without
refreshing the page where the code is
running. AJAX enables a page to display updated data in a section of a page
without reconstructing the entire page.
This is often used to respond to user
interaction, but it can also enable your
application to load a bare-bones version of a page quickly, and then to fill
in more detailed content while the user
is already viewing the page.
Despite the name, XMLHttpRequest does not tie you to using only
XML. You can call its overrideMim-e Type method to specify “application/
json” and work with JSON instead of
XML. Using JSON.parse is up to twice
as fast and more secure than using the
generic eval() function.