Which Recommendations
should Be ignored?
Some of the guidelines for desktop development do not apply when building
mobile sites.
Do Not Make JavaScript and CSS
External. This is one recommendation that cannot really be followed on
mobile. Because of a healthy distrust
of the mobile device’s browser cache
policy, it will almost always turn out
best if you cache your JavaScript and
CSS manually; thus, inlining it all into
the main page will deliver the best results in terms of speed. For maintenance reasons, or perhaps if a site has
seldom-visited areas where it would
be better not to download until first
use, you can use XHRs to fetch the Java
Script or CSS and the HTML5 database
to store the resource for later reuse.
Redirects are a source of round trips
and are to be avoided at all costs. Regularly monitoring the response codes
from your servers should make it possible to catch redirect mistakes, which
are commonly caused by poor URL
choices, authentication choices, ads,
or external components. It is better to
update the site’s script and resources
and let app cache download and cache
all the new locations than to deliver
even one redirect return code per user
visit. Redirects can also cause unexpected effects with app cache, causing
the browser to download the same resources multiple times and store them
in the database. This is easiest to test
for on the desktop where the sqlite3
command-line tool can be used to look
directly at the app-cache database and
see what is stored there. On Chrome, an
even easier method is to use chrome://
appcache-internals to inspect the state
of app cache.
YSlow also recommends avoiding
duplicate script. Certainly after all the
effort made to minify, obfuscate, and
manually cache your script tags, it will
be worth ensuring the browser is not
parsing and evaluating the same piece
of script twice. Removing duplicate
scripts remains a solid piece of advice
for mobile sites.
Do Not Configure ETags. In the case
of entity tags (ETags), the removal advice is the bit that applies. As you are
already storing all the resources in app
cache, and app cache is separate per
host domain, there is no benefit to us-
Redirects are
a source of round
trips and are to
be avoided at all
costs. Regularly
monitoring the
response codes
from your servers
should make it
possible to catch
redirect mistakes.
ing ETags—and the mobile browser
cache cannot be trusted to retain the
components, anyway.
Do Not Make AJAX Cacheable.
Rather than trusting the browser
to cache AJAX responses, it is best
to build either a full-blown write-through cache layer or an XHR caching layer on top of the HTML5 local
storage facilities.
Do Not Split Components Across
Domains. I have already discussed parallel downloads, and the opportunity
for leveraging high-bandwidth connections on mobile is too limited to make
this a core technique.
Reducing cookie sizes applies to
mobile just as it does to the desktop.
Specifically, be sure the cookies for a
page do not, in aggregate, cause any
requests to be split across multiple
packets. Aim for 1,000 bytes or less of
cookie data.
Do Not Choose <link> over
@Im-port. Despite the existing recommendation stated in the title here, for absolute speed on mobile, neither link
nor@importisappropriate.In stead,
inline styles in the main body of the
page create the fastest load time and
the most app-like Web experience. If
separate resources are a must to simplify serving, the preference should
be <link> to avoid rendering content
with missing style information.
Do Not Pack Components into a
Multipart Document. As mobile devices do not support multipart documents, app cache is required.
What still applies?
With these extensive modifications
to the guidelines, the YSlow and Page
Speed recommendations may seem to
have very little application to mobile
Web development. Quite a few recommendations can still be used effectively for mobile, however, depending on
your exact requirements. Here is a list
of recommendations from YSlow that
can still be useful for mobile sites:
˲ Use a CDN
˲ Add an expires or
cache-control header
˲ Put style sheets at the top
˲ Avoid redirects
˲ Remove duplicate scripts
˲ Flush the buffer early
˲ Use GET for AJAX requests
˲ Postload components