Comments on Planning for Performance

13 Reader Comments

Back to the Article
  1. Great explain Jahl ! But you miss one thing, i want to add this with post good planning

    Copy & paste the code below to embed this comment.
  2. I’m confused, this article is rather short and it only states that you should keep your requests and file size to a minimum and don’t use document write (good pun though). I’m wondering what will be in the next chapters then. A mobile first approach without loading the bigger resolutions? Using vector (fonts) instead of images? Optimize, concatenate and minify until it hurts? Showing a pre-loader on mobile websites? Really curious…

    Copy & paste the code below to embed this comment.
  3. Hey Giel,
    Sorry for the confusion! It’s not your fault. :) This particular post is just an excerpt to give a taste of the sort of subject matter that the book discusses, but I can point you to another post I wrote that follows up on this with a technical approach to loading assets quickly and responsibly. It includes some but not all of the workflow and tips discussed in the final chapters of the book:
    http://www.filamentgroup.com/lab/performance-rwd.html

    Thanks for reading

    Copy & paste the code below to embed this comment.
  4. Hi Scott,
    Correct me if I’m wrong, but your DNS diagram looks like the DNS is “proxying” the content from the web server, which is not the case. The DNS merely tells the browser which IP address to use to directly request the data from the host. The web server does not communicate with the DNS. I’m sure you just wanted to simplify the diagram, but it ended up being incorrect.

    Copy & paste the code below to embed this comment.
  5. IMHO, Oakley’s site isn’t that great looking. It’s OK, but I think gaudy sites like this are the next wave of nonsense that will have to be replaced by A a second “Web 2.0” era. CSS changed the web for the better, and now things are getting bad again, largely due to things like Angular (great framework, but it encourages building large, crufty 1-page websites that include lots of things in a single page load). I’m working on a real estate lead management software, and one of the core tenants of the app is that it will load quickly on a mobile device with 3G Internet speeds. I realize, most people have faster Internet than that, especially real estate agents, but what’s the point of wasting bandwidth for things that aren’t necessary?

    Thanks
    Real Estate Lead Mangement Software

    Copy & paste the code below to embed this comment.
  6. Hi Scott,
    nice article, i read your article. i have understate planning and performance of website. both are co-operative words and without planning. i things, shouldn’t do any work without planning. must to planning your website and get better performance. i am appreciate again. Thanks you. 

    Copy & paste the code below to embed this comment.
  7. Designing for speed is must do these days. Sublevel is one of those cases where I deliberately set the performance bar very high (~ 200ms) and tried to design around that.

    It means that I remove external JS files on pages that don’t need the JS code, sometimes I use inline JS code because it’s faster and inline CSS code to keep the external CSS file as small as possible.

    Copy & paste the code below to embed this comment.
  8. Hi Scott,

    There something wrong with the image. DNS will not request host server for content(Homepage). It just returns back IP address of host server to client, than the client freshly requests host server directly for content.

    Copy & paste the code below to embed this comment.
  9. Thanks for the feedback, all!

    @Maciej and @Shivaji: thanks for pointing that out. You’re totally right, and in hindsight I wish I had drawn the diagram a bit differently to more accurately reflect how that DNS step ties in. (It does appear as a bit of a proxy here which of course it is not). In the book, this excerpt largely exists to note that there is some expected latency and network-related delays that occur in the process of loading a site, particularly on aging mobile devices and networks, and while they’re somewhat beyond our control, it’s worth remembering that initially connecting can take some time (which is all the more reason to make the delivery steps that our under control perform as fast as possible). However, the book makes no effort to dwell on network-related steps that are somewhat beyond its scope, and instead moves on to focus on the steps that take place on the client-side during page load, and the ways that our code either obstructs or helps streamline the critical path to rendering the page. So basically, from here the book quickly moves on to code-related advice for optimizing assets and how to remove blocking steps on the critical path (this article covers more of that if it’s of interest: http://www.filamentgroup.com/lab/performance-rwd.html ). So I guess I mean to say that while a little technically inaccurate that part is only meant as as a small, non-comprehensive summary of the initial loading steps that lead to the real focus of this chapter. here’s hoping that in the context of the larger book (or chapter even), the network step reads as more of an intro/segue than a focus in itself. Thanks again!

    Copy & paste the code below to embed this comment.
  10. In fact, how we deliver code matters more than how much our code weighs.
    No no no !

    Not everybody has access to affordable data plans and in my case I watch my consumption very carefully because mobile sites can cost me real money to access. My phone plan does include data, but a little bit here and a little bit there and all too quickly that allowance is gone. 

    Using the Oakley site - in its original form (80mb) as an example; had I accessed it on a “proper” bowser (see below) after I exceed my data cap, it could have cost me at least AUD 2.40 (3c mb excess usage charge). All our providers cost roughly the same for the plans and excess usage - they differ only what is unmetered or “free” access to services I do not want, and/or much, much, more limited coverage

    Until I found textbrowser on ios,  which allows me to turn off css and images and javascript, on my commute, I used to get very frustrated when I couldn’t read the page because an image (or worse still an ad) or CSS or javascript hadn’t loaded in the time I was connected to the tower (@  1 hour of a 2 hour commute - blocks of up to 15minutes at a time unconnected,  especially when the image was only tangentially about what I was reading eg every news story about POTUS includes a photo of Him,  newsflash - I know what he looks like - so this is just costly noise to me! If the textual content is compelling, or what I know to be a heroin content site,  I will turn on what I need to see the page in all the glory the designer created it in - this is where we DO agree on the evil of blocking file loads.

    Before textbrowser, given a choice of a site that gave me FOUC and cost $1 and a “seamless” experience that cost me $2.40 - guess what I would, and did, choose. There are still (especially) newspaper websites on my “never ever use when mobile” blacklist as they were too “heavy” - funnily enough I try to avoid these on the desktop because of autostart videos (ads and/or video telling me about what I am reading) as well - go figure !

    Copy & paste the code below to embed this comment.
  11. Such an important topic that I’ll ask you to please excuse my spam: Here is a 9 KB rich framework which is made with “speed first” strategy: http://natuive.net
    Hopefully this trend picks up and the web provides the smooth UX we need.
    Regards.

    Copy & paste the code below to embed this comment.
  12. information about css and html code that is very helpful for me who is studying deeper .. keep working , thanks to quality article , if you need information about more try visiting Harga Sepatu Nike

    Copy & paste the code below to embed this comment.
  13. Thanks for the wonderful information Scott, We are also provide services of Condo Move Toronto Ontario area.

    Copy & paste the code below to embed this comment.
  14. Sorry, commenting is closed on this article.