Resources needed for mobile web page performance

[Matt Brubeck]

A web developer recently wrote to me, asking for help with a web page
that loaded 10x to 20x slower in mobile browsers (including both Firefox
and Chrome) compared to the exact same document in desktop browsers,
even when running on high-end tablets over the same fast wi-fi network.
Looking for resources on mobile web performance optimization, I found a
lot of articles but many were conflicting or out-of-date, and none
mentioned mobile Firefox.

MDN has only a single paragraph about performance for mobile web
development, with a link to a generic list of recommendations from Yahoo:
https://developer.mozilla.org/en-US/docs/Web_Development/Mobile/Mobile-friendliness

It would be great if we could produce a good article with
mobile-specific performance tips for web developers, including ways that
our tools can help, and any important performance differences between
desktop and mobile browsers. Below is the main part of my reply to the
webdev who wrote me, which I hope includes some useful things for such
an article. However, I'm not really up on the latest data or best
practices for mobile performance. Any resources I should add? Anyone
want to volunteer to help out with this?


-------- Original Message --------

Firefox and Chrome both include built-in tools that can help you
diagnose slow page rendering. In particular, Firefox's Network Monitor
will display a precise timeline of when each network request on your
page happens, how large it is, and how long it takes:
https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor

If your page contains JavaScript code that is taking a long time to run,
the JavaScript profiler will pinpoint the slowest lines of code:
https://developer.mozilla.org/en-US/docs/Tools/Profiler

You can use these tools with the Android browser by running Firefox or
Chrome on a PC and enabling remote debugging:
https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging
https://developers.google.com/chrome-developer-tools/docs/remote-debugging

Using the YSlow and FireBug add-ons together will also provide extremely
helpful recommendations for improving performance. They run in desktop
Firefox, but the problems and solutions they identify will be especially
useful for mobile browsers. You should definitely run YSlow and follow
its recommendations:
https://addons.mozilla.org/en-US/firefox/addon/yslow/

In particular, making a large number (dozens or hundreds) of network
requests can take longer in mobile browsers. Rendering of large images
or CSS gradients can also take longer. Simply downloading large files
can take longer, even over a fast network, because mobile hardware isn't
always fast enough to utilize all the available bandwidth. This
presentation has some general tips for mobile web performance, and I'll
try to see if I can find any other good documents about best practices:
http://www.slideshare.net/firt/mobile-web-high-performance

If the Firefox and Chrome developer tools don't help you find a problem,
or if they seem to indicate that the problem is caused by the web
browser, then we can help you figure out more if you provide a test case.

* See if you can reproduce the problem by saving and loading a static
copy of an HTML page (including any images/stylesheets/scripts it
embeds). If that works, you can then edit the static files to
remove any private information, then send them to me, or attach them
as a .ZIP archive to a bug report in https://bugzilla.mozilla.org
(and put my email address in the CC field).
* If that doesn't work, then perhaps you can host a test case on your
server and give us access to it. Send a link to the test case to me
or file it in a Bugzilla bug.

Or if you would like to help even more, you can install our "Nightly"
development build and run the Gecko Profiler while loading your page.
This will provide detailed information about which parts of the browser
code are running slowly while the profiler runs, which you can then send
to us for analysis. This requires installing Android developer tools
and is a bit tricky, but we can help out if you are interested in trying
it. (We can also do this ourselves, but if you are willing to do it
then it will help us get results faster.)
https://developer.mozilla.org/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler

[Christian Heilmann]

matt, this is superb. we're at the off site right now but I am happy to
edit this when I get back. please, everybody add resources. we also have a
few hacks posts to crosslink to.

> _______________________________________________
> engagement-developers mailing list
> engagement...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/engagement-developers
>

[Robert Nyman]

Hi Matt,

Definitely, I think that would be a good article on MDN. We’ve had a few articles on Mozilla hacks as well, such as https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/


- Robert

[Chris Mills]

We have a few related articles on MDN:

https://developer.mozilla.org/en-US/Apps/Developing/Optimizing_startup_performance
https://developer.mozilla.org/en-US/Firefox_OS/Performance

But this is a topic that could definitely use better visibility and be handled better. We (Rob, me, other dev engagement folk) should chat about this soon and work forward on it.

Thanks Matt,

Chris Mills
Senior tech writer || Mozilla
developer.mozilla.org || MDN
cmi...@mozilla.com || @chrisdavidmills

[David Bruant]

Le 16/01/2014 18:39, Matt Brubeck a �crit :

> A web developer recently wrote to me, asking for help with a web page
> that loaded 10x to 20x slower in mobile browsers (including both
> Firefox and Chrome) compared to the exact same document in desktop
> browsers, even when running on high-end tablets over the same fast
> wi-fi network. Looking for resources on mobile web performance
> optimization, I found a lot of articles but many were conflicting or
> out-of-date

I stongly recommand reading/watching what the Chrome devrels have been
doing over the last year. They've given numerous talks on performance.
Ilya Grigorik gave a ~4h talk at Fluent in May. It contains pretty much
everything a dev needs to know about performance starting from network
(some parts talk about mobile specificities), rendering, JavaScript and
finally the idea of "critical path".

Playlist (it's split in 4x1h) at
http://www.youtube.com/playlist?list=PLS3jzvALRSe6uP9gVfXLCG6nWo7M0hAJY

4h may seems long, but it's a very worthwhile time investment.

There are lots of excellent articles on the topic over at html5rocks too

> and none mentioned mobile Firefox.

Ideally, none should ;-)

> MDN has only a single paragraph about performance for mobile web
> development, with a link to a generic list of recommendations from Yahoo:
> https://developer.mozilla.org/en-US/docs/Web_Development/Mobile/Mobile-friendliness
>
>
> It would be great if we could produce a good article with
> mobile-specific performance tips for web developers, including ways
> that our tools can help, and any important performance differences
> between desktop and mobile browsers.

Google's Pagespeed Insights is an amazing tool that provides tips for
both desktop and mobile.
http://developers.google.com/speed/pagespeed/insights/

Hope that helps,

David

[Christian Heilmann]

seriously a four hour talk is not a resource but overindulgence. we can
however harvest good stuff from it. the edgeconf in London had some superb,
much easier to digest discussions.

One writer on HTML rocks to follow is Paul Lewis. He is the resident
rendering guru in the google devrel team and a top chap. He also writes in
English and not in algos.
On 16 Jan 2014 10:41, "David Bruant" <brua...@gmail.com> wrote:

[Kumar McMillan]

I recently had to debug some problems with a site on Firefox for Android and when I googled, I hit these docs immediately: https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging They were very clear and concise. In a matter of minutes I was connecting to my Android phone from desktop Firefox where I got all the usual dev tools, including the the network monitoring tab. It was like a dream! So helpful.

[Matt Brubeck]

On 1/16/2014 10:41 AM, David Bruant wrote:
>> and none mentioned mobile Firefox.
> Ideally, none should ;-)

To clarify, many articles described how to use Chrome and Safari tools
for measuring and debugging performance problems, but none even
mentioned that Firefox has equivalent (or better!) tools or offered any
information on how to use them.

[Will Bamberg]

On 14-01-16 11:29 AM, Kumar McMillan wrote:
> I recently had to debug some problems with a site on Firefox for Android and when I googled, I hit these docs immediately: https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging They were very clear and concise. In a matter of minutes I was connecting to my Android phone from desktop Firefox where I got all the usual dev tools, including the the network monitoring tab. It was like a dream! So helpful.

That's really nice to hear Kumar :).

It feels to me that there are a couple of related things we could do here.

First would be good practices for (specifically) mobile web development.
I'm not sure how much I could help with that, although your notes below
look like a great start. I'm not sure where we should put content like
this: there is a Mobile Web Development guide
(https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile) that could
use some love. But it's a little unclear to me how this kind of material
fits into MDN's high-level organization these days.

Second would be how to use Firefox developer tools to diagnose and debug
performance problems: that would help with the problem Matt wrote about
in his follow up: "many articles described how to use Chrome and Safari

tools for measuring and debugging performance problems, but none even

mentioned that Firefox has equivalent (or better!) tools". Since I'm
responsible for the Firefox devtools docs, I'm very interested in
helping out with that.

I think MDN now has reasonable reference docs on the Firefox developer
tools, but we're definitely lacking this sort of tutorial type of
material. What would I could use most here is technical assistance: most
particularly simple example web apps or sites that exhibit particular
problems, that we can diagnose and fix using the Firefox dev tools
(frame rate monitor, paint flasher, sampling profiler). I can then turn
that into walkthrough articles on MDN and/or screencasts (somewhat like
this:
https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough).


On that topic, Jason Weathersby's working on a performance screencast
that's very much like this (i.e. it walks through debugging a
performance problem in a web app using the Firefox devtools): I saw a
rough cut of it and thought it was really excellent. I could take that
and dismember it into a written walkthrough like the Simulator one.
Question for the list: are things like the Simulator Walkthrough useful
documentation to have alongside screencasts, or are they too long and
boring?

Will

>
> On Jan 16, 2014, at 12:51 PM, Christian Heilmann <chei...@mozilla.com> wrote:
>
>> seriously a four hour talk is not a resource but overindulgence. we can
>> however harvest good stuff from it. the edgeconf in London had some superb,
>> much easier to digest discussions.
>>
>> One writer on HTML rocks to follow is Paul Lewis. He is the resident
>> rendering guru in the google devrel team and a top chap. He also writes in
>> English and not in algos.
>> On 16 Jan 2014 10:41, "David Bruant" <brua...@gmail.com> wrote:
>>

>>> Le 16/01/2014 18:39, Matt Brubeck a �crit :

>>>
>>>> A web developer recently wrote to me, asking for help with a web page
>>>> that loaded 10x to 20x slower in mobile browsers (including both Firefox
>>>> and Chrome) compared to the exact same document in desktop browsers, even
>>>> when running on high-end tablets over the same fast wi-fi network. Looking
>>>> for resources on mobile web performance optimization, I found a lot of
>>>> articles but many were conflicting or out-of-date
>>>>
>>> I stongly recommand reading/watching what the Chrome devrels have been
>>> doing over the last year. They've given numerous talks on performance.
>>> Ilya Grigorik gave a ~4h talk at Fluent in May. It contains pretty much
>>> everything a dev needs to know about performance starting from network
>>> (some parts talk about mobile specificities), rendering, JavaScript and
>>> finally the idea of "critical path".
>>>
>>> Playlist (it's split in 4x1h) at http://www.youtube.com/playlist?list=
>>> PLS3jzvALRSe6uP9gVfXLCG6nWo7M0hAJY
>>>
>>> 4h may seems long, but it's a very worthwhile time investment.
>>>
>>> There are lots of excellent articles on the topic over at html5rocks too
>>>

>>> and none mentioned mobile Firefox.
>>> Ideally, none should ;-)
>>>

[vishnut...@gmail.com]

http://www.adobe.com/inspire/2013/05/irish-fast-css-on-mobile.html

Paul Irish explained few CSS properties affects FPS in paint.

[Anthony Ricaud]

http://jankfree.org/ is an amazing resource. That won’t help with initial loading though.

> To clarify, many articles described how to use Chrome and Safari tools for measuring and debugging performance problems, but none even mentioned that Firefox has equivalent (or better!) tools or offered any information on how to use them.

A lot of articles don’t mention Firefox Devtools but that’s expected imho. We only recently got the network panel and we only have a few performance tools so far (paint flashing, reflow logging). Also, it’s very recent that our tools are usable remotely.

On 17 Jan 2014, at 00:41, Will Bamberg <wbam...@mozilla.com> wrote:

> On 14-01-16 11:29 AM, Kumar McMillan wrote:
>> I recently had to debug some problems with a site on Firefox for Android and when I googled, I hit these docs immediately: https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging They were very clear and concise. In a matter of minutes I was connecting to my Android phone from desktop Firefox where I got all the usual dev tools, including the the network monitoring tab. It was like a dream! So helpful.
>
> That's really nice to hear Kumar :).
>
> It feels to me that there are a couple of related things we could do here.
>
> First would be good practices for (specifically) mobile web development. I'm not sure how much I could help with that, although your notes below look like a great start. I'm not sure where we should put content like this: there is a Mobile Web Development guide (https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile) that could use some love. But it's a little unclear to me how this kind of material fits into MDN's high-level organization these days.
>
> Second would be how to use Firefox developer tools to diagnose and debug performance problems: that would help with the problem Matt wrote about in his follow up: "many articles described how to use Chrome and Safari tools for measuring and debugging performance problems, but none even mentioned that Firefox has equivalent (or better!) tools". Since I'm responsible for the Firefox devtools docs, I'm very interested in helping out with that.
>
> I think MDN now has reasonable reference docs on the Firefox developer tools, but we're definitely lacking this sort of tutorial type of material. What would I could use most here is technical assistance: most particularly simple example web apps or sites that exhibit particular problems, that we can diagnose and fix using the Firefox dev tools (frame rate monitor, paint flasher, sampling profiler). I can then turn that into walkthrough articles on MDN and/or screencasts (somewhat like this: https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough).
>
> On that topic, Jason Weathersby's working on a performance screencast that's very much like this (i.e. it walks through debugging a performance problem in a web app using the Firefox devtools): I saw a rough cut of it and thought it was really excellent. I could take that and dismember it into a written walkthrough like the Simulator one. Question for the list: are things like the Simulator Walkthrough useful documentation to have alongside screencasts, or are they too long and boring?
>
> Will
>
>>
>> On Jan 16, 2014, at 12:51 PM, Christian Heilmann <chei...@mozilla.com> wrote:
>>
>>> seriously a four hour talk is not a resource but overindulgence. we can
>>> however harvest good stuff from it. the edgeconf in London had some superb,
>>> much easier to digest discussions.
>>>
>>> One writer on HTML rocks to follow is Paul Lewis. He is the resident
>>> rendering guru in the google devrel team and a top chap. He also writes in
>>> English and not in algos.
>>> On 16 Jan 2014 10:41, "David Bruant" <brua...@gmail.com> wrote:
>>>

>>>> Le 16/01/2014 18:39, Matt Brubeck a écrit :
>>>>
>>>>> A web developer recently wrote to me, asking for help with a web page
>>>>> that loaded 10x to 20x slower in mobile browsers (including both Firefox
>>>>> and Chrome) compared to the exact same document in desktop browsers, even
>>>>> when running on high-end tablets over the same fast wi-fi network. Looking
>>>>> for resources on mobile web performance optimization, I found a lot of

>>>>> articles but many were conflicting or out-of-date
>>>>>
>>>> I stongly recommand reading/watching what the Chrome devrels have been
>>>> doing over the last year. They've given numerous talks on performance.
>>>> Ilya Grigorik gave a ~4h talk at Fluent in May. It contains pretty much
>>>> everything a dev needs to know about performance starting from network
>>>> (some parts talk about mobile specificities), rendering, JavaScript and
>>>> finally the idea of "critical path".
>>>>
>>>> Playlist (it's split in 4x1h) at http://www.youtube.com/playlist?list=
>>>> PLS3jzvALRSe6uP9gVfXLCG6nWo7M0hAJY
>>>>
>>>> 4h may seems long, but it's a very worthwhile time investment.
>>>>
>>>> There are lots of excellent articles on the topic over at html5rocks too
>>>>

>>>> and none mentioned mobile Firefox.

>>>> Ideally, none should ;-)

>>>>
>>>> MDN has only a single paragraph about performance for mobile web
>>>>> development, with a link to a generic list of recommendations from Yahoo:
>>>>> https://developer.mozilla.org/en-US/docs/Web_Development/
>>>>> Mobile/Mobile-friendliness
>>>>>
>>>>> It would be great if we could produce a good article with mobile-specific
>>>>> performance tips for web developers, including ways that our tools can
>>>>> help, and any important performance differences between desktop and mobile
>>>>> browsers.
>>>>>

>>>> Google's Pagespeed Insights is an amazing tool that provides tips for both
>>>> desktop and mobile. http://developers.google.com/speed/pagespeed/insights/
>>>>
>>>> Hope that helps,
>>>>
>>>> David
>>>>

[Jeff Griffiths]

Matt Brubeck wrote:
> On 1/16/2014 10:41 AM, David Bruant wrote:

>>> and none mentioned mobile Firefox.
>> Ideally, none should ;-)
>

> To clarify, many articles described how to use Chrome and Safari tools
> for measuring and debugging performance problems, but none even
> mentioned that Firefox has equivalent (or better!) tools or offered any
> information on how to use them.

In particular the timeline tool has had a lot of effort put into it and
Firefox currently has no equivalent. This isn't malice on anyone's part,
it's simply a gap in the capabilities of our tools.

I should add, performance tools for Firefox (desktop, mobile, OS) are of
the highest priority and are being actively worked on. The top of the
kanban for this work is here:

https://bugzilla.mozilla.org/show_bug.cgi?id=928571

Jeff

[Karl Dubost]

Matt,

Le 17 janv. 2014 à 02:39, Matt Brubeck <mbru...@mozilla.com> a écrit :
> It would be great if we could produce a good article with mobile-specific performance tips for web developers, including ways that our tools can help, and any important performance differences between desktop and mobile browsers.

Quite interesting the old (and now outdated) Mobile Web Best Practices has been put on github for a revival
https://github.com/w3c-webmob/mobile_best_practices



--
Karl Dubost, Mozilla
http://www.la-grange.net/karl/moz

[Chris Mills]

Hi Matt, all,

Just to let you know, I have given

https://developer.mozilla.org/en-US/Firefox_OS/Performance

a heavy edit in the last few days to improve the structure and content. I am also aiming to add Matt’s content (from the original mail on this thread) to the article, to make sure it is all covered.

Then the next step will be to work out what else we need to say, make it a more general article in terms of location and content (I don’t see why most of this is FxOS-specific, for example), and then perhaps work out a better structure for the content (for example, what is FxOS-specific could be moved out to a separate article, or to its own distinct section.)

Any thoughts on this appreciated.

Chris Mills
Senior tech writer || Mozilla
developer.mozilla.org || MDN
cmi...@mozilla.com || @chrisdavidmills

[saurabh gupta]

On Thursday, January 16, 2014 11:09:52 PM UTC+5:30, Matt Brubeck wrote:

Hi All,

I am having a project which is running on JSP and Tomcat,

When I am opening that project page on PC via FF browser,Chrome browser it gives me response in time but when I am trying same page on Android Tablet via "FireFox Aurora" Browser it is taking time to render/show that page on scree.

Please help/guide me how I can resolve and investigate on this issue.

what precaution/changes I have to made in our project HTML code.

and one more thing when I am accessing page via tablet and submitting an form Getting an below warning :
===
A form was submitted in the windows-1252 encoding which cannot encode all Unicode characters, so user input may get corrupted. To avoid this problem, the page should be changed so that the form is submitted in the UTF-8 encoding either by changing the encoding of the page itself to UTF-8 or by specifying accept-charset=utf-8 on the form element
===

Is due to above error I am facing this slow render issue or some thing else.

Thanks in advance

[Chris Mills]

On 26 Jan 2014, at 17:44, saurabh gupta <itssaur...@gmail.com> wrote:

>
> Hi All,
>
> I am having a project which is running on JSP and Tomcat,
>
> When I am opening that project page on PC via FF browser,Chrome browser it gives me response in time but when I am trying same page on Android Tablet via "FireFox Aurora" Browser it is taking time to render/show that page on scree.
>
> Please help/guide me how I can resolve and investigate on this issue.
>
> what precaution/changes I have to made in our project HTML code.
>
> and one more thing when I am accessing page via tablet and submitting an form Getting an below warning :
> ===
> A form was submitted in the windows-1252 encoding which cannot encode all Unicode characters, so user input may get corrupted. To avoid this problem, the page should be changed so that the form is submitted in the UTF-8 encoding either by changing the encoding of the page itself to UTF-8 or by specifying accept-charset=utf-8 on the form element
> ===
>
> Is due to above error I am facing this slow render issue or some thing else.

You could try getting rid of this issue first to see if it helps. Try setting the encoding to utf-8 by uncluding the following line inside your HTML <head>:

<meta charset="utf-8”>

Then you could try reloading the page with the Network tab of the Firefox desktop dev tools open, and look at the graph to see what part of the page load is causing bad performance.

To debug a site running on Android using the desktop tools, you can use remote debugging, as explained at

https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android

Best regards,

[itssaur...@gmail.com]

Hi Chris,

Thanks for your reply.

Now I am feeling that JS is responding slow on my Page when I am accessing through Tablet.

Actually on my page there are button and when clicking on button it is taking little bit delay compare than PC for performing action.

Please help/suggest us what changes we need to do in JS

--
Thanks

[Chris Mills]

Update on

https://developer.mozilla.org/en-US/Firefox_OS/Performance

I have added your performance tips at

https://developer.mozilla.org/en-US/Firefox_OS/Performance#General_application_performance_analysis

Does this work for you?

Matt, when you get the chance, can you review this and let me know what you think about breaking this up? I am thinking of breaking it into a more general performance article, and then an article of Firefox OS specific stuff.

All the best,

Chris Mills
Senior tech writer || Mozilla
developer.mozilla.org || MDN
cmi...@mozilla.com || @chrisdavidmills

On 21 Jan 2014, at 18:22, Chris Mills <cmi...@mozilla.com> wrote:

> Hi Matt, all,
>
> Just to let you know, I have given
>
> https://developer.mozilla.org/en-US/Firefox_OS/Performance
>
> a heavy edit in the last few days to improve the structure and content. I am also aiming to add Matt’s content (from the original mail on this thread) to the article, to make sure it is all covered.
>
> Then the next step will be to work out what else we need to say, make it a more general article in terms of location and content (I don’t see why most of this is FxOS-specific, for example), and then perhaps work out a better structure for the content (for example, what is FxOS-specific could be moved out to a separate article, or to its own distinct section.)
>
> Any thoughts on this appreciated.
>

> Chris Mills
> Senior tech writer || Mozilla
> developer.mozilla.org || MDN
> cmi...@mozilla.com || @chrisdavidmills
>
>
>

> On 19 Jan 2014, at 17:48, Karl Dubost <kdu...@mozilla.com> wrote:
>
>> Matt,
>>
>> Le 17 janv. 2014 à 02:39, Matt Brubeck <mbru...@mozilla.com> a écrit :

>>> It would be great if we could produce a good article with mobile-specific performance tips for web developers, including ways that our tools can help, and any important performance differences between desktop and mobile browsers.
>>
>>

[Matt Brubeck]

On 1/27/2014 2:10 PM, Chris Mills wrote:
> I have added your performance tips at
>
> https://developer.mozilla.org/en-US/Firefox_OS/Performance#General_application_performance_analysis
>
> Does this work for you?

Yes, thanks!

> Matt, when you get the chance, can you review this and let me know what you think about breaking this up? I am thinking of breaking it into a more general performance article, and then an article of Firefox OS specific stuff.

This sounds like a great next step.

[Chris Mills]

I have now created a specific “Performance” section in the App Center:

https://developer.mozilla.org/en-US/Apps/Developing/Performance

This brings a bunch of information together for lots of disparate sources and organizes it in a more coherent fashion. So far we’ve got:

* Performance fundamentals
* Optimizing startup performance (because we had a pretty decent article on that already)
* Firefox OS performance testing

Let me know if this looks ok so far. There are doubtless a number of details that we could do with adding, but this is a much better organization than we had before.

Chris Mills
Senior tech writer || Mozilla
developer.mozilla.org || MDN
cmi...@mozilla.com || @chrisdavidmills