davidbgk
/
larlet-fr-david-cache

title: Three takeaways for web developers after two weeks of painfully slow internet
url: https://medium.com/@zengabor/three-takeaways-for-web-developers-after-two-weeks-of-painfully-slow-internet-9e7f6d47726e
hash_url: e00ae9f67fe78b3490ecafe16a7802d4

<p name="c4c9" id="c4c9" class="graf--p graf--first">When we went to Hungary during the Christmas period last year I bought a 1GB data plan on a prepaid card. However, soon after I went online with my laptop the entire data allowance was used up. Strangely, I wasn’t able to add another data package. Instead, T-Mobile limited my internet access to 32kbps till the end of the month.</p><p name="e4b7" id="e4b7" class="graf--p">Since there was no easy way to fix it and I had nothing critical to do I decided to embrace the situation as an opportunity to understand how it feels to be on a slow network most of the time. I had already started reading the book <a href="http://www.abookapart.com/products/responsible-responsive-design" data-href="http://www.abookapart.com/products/responsible-responsive-design" class="markup--anchor markup--p-anchor" rel="nofollow">Responsible Responsive Design</a> at that time anyway so I was curious.</p><p name="5f24" id="5f24" class="graf--p">I learned a lot from this first-hand experience. I was mostly using the Twitter client <a href="http://tapbots.com/software/tweetbot/" data-href="http://tapbots.com/software/tweetbot/" class="markup--anchor markup--p-anchor" rel="nofollow">TweetBot</a> and its embedded browser for online reading. I had to be really patient. I learned to make up my mind whether I tap a link or a button, as it was quite expensive: I had to spend the next 1–2 minutes waiting for the web page to load. The psychology of limited internet would be a good topic for another story. Here let’s just concentrate on the key takeaways for makers of web sites, like me.</p><p name="343f" id="343f" class="graf--p">Here’s the three most important things that I became aware of during this time as a web developer:</p><p name="74ef" id="74ef" class="graf--p graf--empty"><br/></p><h3 name="9910" id="9910" class="graf--h3">1. Some sites never loaded</h3><p name="dfc5" id="dfc5" class="graf--p graf--empty"><br/></p><p name="b0a2" id="b0a2" class="graf--p">While most sites worked slowly but otherwise okay, there were some pages that simply never loaded. I couldn’t believe it so I tried many times and left the phone loading for several minutes but all in vain. Nothing appeared on those pages. Unfortunately, I don’t remember which ones but I can’t help thinking that those were single-page JavaScript apps whose loading script wasn’t prepared for these conditions and timed out before the browser could receive something to display. (Good thing I could still use <a href="http://getpocket.com" data-href="http://getpocket.com" class="markup--anchor markup--p-anchor" rel="nofollow">Pocket</a> to store the URL if the topic sounded interesting.)</p><h4 name="0378" id="0378" class="graf--h4">Takeaway 1: Develop in extra slow emulated mode</h4><p name="010e" id="010e" class="graf--p graf--empty"><br/></p><p name="c625" id="c625" class="graf--p">It’s critical to test the sites I am making on a very slow network from the beginning. Chrome has an amazing feature for that. If I open the web developer tools (⌥⌘I on a Mac, F12 on Windows) and make sure that “device mode” is turned on (the small phone icon is blue) then I can select the network speed:</p><figure name="b31f" id="b31f" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*E7rmbWJbDkFUC1VoaSMriA.png" data-width="1082" data-height="436" data-action="zoom" data-action-value="1*E7rmbWJbDkFUC1VoaSMriA.png" src="https://medium2.global.ssl.fastly.net/max/800/1*E7rmbWJbDkFUC1VoaSMriA.png"/></div><figcaption class="imageCaption">Chrome Developer Tools Network emulation, including throughoutput and Round-Trip-Time</figcaption></figure><p name="c3df" id="c3df" class="graf--p">I always keep this mode turned on for the site I am working on. <strong class="markup--strong markup--p-strong">I need to feel the pain as soon as possible</strong> so that I immediately notice the changes that are bad for performance. Additionally, I like that I can easily disable the cache under the “Network” panel (see screenshot above) without having to purge the browser cache.</p><p name="57c9" id="57c9" class="graf--p graf--empty"><br/></p><h3 name="be99" id="be99" class="graf--h3">2. On some sites the text was invisible for a frustratingly long time</h3><p name="19a4" id="19a4" class="graf--p graf--empty"><br/></p><p name="3a6c" id="3a6c" class="graf--p">This was annoying. The text was already there but I couldn’t see it until the relevant fonts were downloaded. This problem only occurs on WebKit-based browsers, which means iOS and old Android browsers. WebKit is overly polite and just waits and waits, prudishly hiding the text until the font is downloaded. In contrast, Internet Explorer is so rude it will show the site immediately with the fallback font, exposing me to the flash of unformatted text (<a href="http://www.paulirish.com/2009/fighting-the-font-face-fout/" data-href="http://www.paulirish.com/2009/fighting-the-font-face-fout/" class="markup--anchor markup--p-anchor" rel="nofollow">FOUT</a>) when the fonts are applied. The pragmatic solution is Chrome, both desktop and Android (as well as Opera which uses the same rendering engine): they hide the text to avoid FOUT but only for a maximum of 3 seconds. It’s a smart trade-off between the two extremes. Fortunately, these browsers cover the majority of the browser population. But there are still users out there with old Androids and iPhones, like me, who are sometimes on a very slow network and don’t have the fonts cached.</p><h4 name="9471" id="9471" class="graf--h4">Takeaway 2: Web font loading must be controlled</h4><p name="0445" id="0445" class="graf--p graf--empty"><br/></p><p name="9cb4" id="9cb4" class="graf--p">After I’ve done everything <a href="http://bit.ly/1gTDZ1G" data-href="http://bit.ly/1gTDZ1G" class="markup--anchor markup--p-anchor" rel="nofollow">Ilya Grigorik says about loading web fonts</a> I created a tiny script called <a href="https://github.com/gaborlenard/zenfonts/" data-href="https://github.com/gaborlenard/zenfonts/" class="markup--anchor markup--p-anchor" rel="nofollow"><strong class="markup--strong markup--p-strong">Zenfonts</strong></a><strong class="markup--strong markup--p-strong"> </strong>to fix both the “invisible text” problem and the FOUT, without changing the browers’ loading mechanism.</p><p name="7455" id="7455" class="graf--p graf--empty"><br/></p><h3 name="e1df" id="e1df" class="graf--h3">3. Well-designed apps worked wonderfully</h3><p name="bdb4" id="bdb4" class="graf--p graf--empty"><br/></p><p name="3bb2" id="3bb2" class="graf--p">I am very grateful for those apps that worked flawlessly under such conditions. The three most prominent being Apple’s own Mail client, <a href="http://reederapp.com/ios/" data-href="http://reederapp.com/ios/" class="markup--anchor markup--p-anchor" rel="nofollow">Reeder</a> and <a href="http://getpocket.com" data-href="http://getpocket.com" class="markup--anchor markup--p-anchor" rel="nofollow">Pocket</a>. All of them downloaded and stored their items when the network was available and I could access those items even offline. When I marked something as read or starred, all three apps queued these requests until they could send them to the server. I was especially fond of Pocket’s sharing extension which worked lightning fast, even if everything else was unbearable. These three apps never complained that the network timed out. They just worked.</p><p name="b57a" id="b57a" class="graf--p">In comparison, <a href="http://blog.fastmail.com/2014/11/12/fastmail-app-for-ios-and-android-now-available/" data-href="http://blog.fastmail.com/2014/11/12/fastmail-app-for-ios-and-android-now-available/" class="markup--anchor markup--p-anchor" rel="nofollow">FastMail’s app</a> was unusable. I tried it several times but my Inbox never loaded. Their app is probably just a wrapper for the web app. Much easier for the developer but much less value for the user.</p><h4 name="86d2" id="86d2" class="graf--h4">Takeaway 3: Design apps for offline &amp; async usage</h4><p name="7c51" id="7c51" class="graf--p graf--empty"><br/></p><p name="ee59" id="ee59" class="graf--p"><a href="http://alistapart.com/article/offline-first" data-href="http://alistapart.com/article/offline-first" class="markup--anchor markup--p-anchor" rel="nofollow"><strong class="markup--strong markup--p-strong">Design offline-first apps</strong></a> (both native and web apps). When you make a web app, make it offline-first. When you make a native app, don’t settle for a mindless wrapper. Cache content. Queue up outgoing data and actions without blocking the user. Handle conflicts. This makes a huge difference in the usability of the app and can literally open up new markets.</p><p name="cd83" id="cd83" class="graf--p graf--empty"><br/></p><p name="438c" id="438c" class="graf--p graf--last">I am so glad this happened. There are different levels of understanding our users, especially those with special requirements. Nothing beats becoming them for a longer period of time.</p>