16 ms·
The mythical “fast” web page
- eyelidlessness 6y agoWhat’s the acronym for “it took me three seconds after page load to read any of this because the designer either neglected or aggressively shaved off a media query and I had to wait to enable reader view”? Edit: I’m not trying to overly criticize the page. I hope this is taken in the spirit of the article. A few extra bytes down the wire would’ve made that a much faster and lower friction experience for me.
- bigdict 6y agoit's ITMTSAPLTRAOTBTDENOASOAMQAIHTWTERV
- deleted 6y ago[deleted]
- annilt 6y agoNot a web developer but I feel like text only/small websites should be promoted. Unnecessary images on this page, weird backlink stuff between comments.. and this is a website about web development. Not looking good to me(I’m a dumb user) yet still better than many others.
- pcnix 6y agoDisclaimer: I work at BrowserStack We've built a tool to help measure speed with these sort of issues in mind - https://www.browserstack.com/blog/announcing-speedlab-test-website-speed/ https://www.browserstack.com/blog/announcing-speedlab-test-w...
- divbzero 6y agoIt’s a propos that this article took ~10 seconds to load for me the first time, but <1 second the second time and <1 second again with the cache cleared. Unfortunately I didn’t have dev tools open to figure out why.
- randomchars 6y agoProbably service workers. If the site has a service worker the traditional cache-busting hard refresh is just a normal refresh.
- divbzero 6y agoThat’s an interesting theory. I checked though and didn’t find service workers on this page [1] so it could just be something with the server itself. I caught another slower load just now and server timing showed a long wait for the first byte. [1]: https://devdocs.io/dom/serviceworkercontainer/getregistrations https://devdocs.io/dom/serviceworkercontainer/getregistratio... "navigator.serviceWorkers.getRegistrations()"
- SquareWheel 6y agoTTFB includes DNS lookup, server generation of the page, and actual sending of the data. I'd guess it's one of the first two at fault.
- pjc50 6y agoDNS lookups?
- myself248 6y agoInterestingly enough, both the best and the worst experiences I've had on the web lately both belonged to tools-and-hardware suppliers: McMaster.com and HomeDepot.com, respectively. Everything about McMaster-Carr's site is built for speed and ease. I can literally have an idea, find the category, identify the specific part, and complete an order in about twenty seconds. (I've done this during a phone call. In the time it took my coworker to articulate the part he was looking for and finish his sentence, I was able to reply "It'll be here tomorrow.") HomeDepot on the other hand sometimes takes 20 or 30 seconds to render the page to the point that I can see prices. I just checked with a page whose URL was already in my history, an unusually brisk 7 seconds. (Gag!) How do they screw it up so bad? I honestly don't understand how a web page can take so long to do anything.
- exmadscientist 6y agoThere is something _wrong_ with HomeDepot.com. It managed to send my poor laptop into swap hell/thrashing, which wasn't too surprising as that machine is always short on RAM. That it could do the same to a beefy workstation (16 cores, 64GB RAM), though... that was impressive. Whatever is wrong there, it hits memory especially hard.
- unnouinceput 6y agoI got a beefy one so I got curious to see this. And here is the response I got: Access Denied You don't have permission to access "http://www.homedepot.com/ http://www.homedepot.com/" on this server. Reference #18.669a1702.1607500613.3482d63b I lol'ed.
- dncornholio 6y agoSame here, EU, think they block based on geo data?
- dismantlethesun 6y agoThey probably do. Since, I left the US on vacation, I've noticed a lot of US-only retail sites are blocked outside of the states. For example Safeway, a popular grocery chain, is blocked. Sometimes the block comes with a scary warning saying that the site has detected a hacking attempt, and stopped your IP at the firewall.
- zhte415 6y agoWhen dealing with 'troublesome' internet connections, or just in general: Keep page load to less than 50k, or 100k if you're feeling fancy. Have a responsive design, unlike this website does, as a lot of people use phones, don't have a PC or are not on a PC. Don't link everything under the cloud because you can - fonts, frameworks, huge pictures, because it makes your life easier. Self host everything, make it small. And don't use JavaScript to add an unnecessary layer to 'manage' linking. Clicking on a link is expected behaviour. As are scroll bars. HTML links work perfectly fine and it degrades, nay I say disgraces, user experience. These basic rubrics will ensure when serving things to 'troublesome' connections, be that bandwidth, blocked 3rd party CDNs or latency, and will largely make sure life will be easier.
- smcl 6y agoOh man I agree with everything you have written. You should have prefaced with "Trigger warning: I talk about scr#ll b#rs in this comment" because I am 100% triggered :-D Rant incoming - sorry it's been done to death already but I never weighed in before. I will never understand the desire to mess around with custom scrolling on a "normal" page. If you have one of those weird parallax-scrolling visualisations that news sites are often fond of, fine - I don't like them but I understand it's there to present some photography or graphs or whatever in a novel or fancy way. But so many sites that are just serving an article with some pictures override a browser's scroll behaviour in a way that not only adds nothing, but often breaks things. By that I mean it can either just slow or interfere with scrolling in a way that will annoy technical or observant users ... or it can prevent scrolling altogether for a subset of browser/OS or for touch/non-touch users.
- ajnin 6y agoI totally understand. Scroll behavior is uniform in all windows on my desktop but some websites think they are so special that they should change that just for them. I personally hate smooth scrolling and have it disabled, I can't understand why people like waiting for a useless animation when the operation could be done instantly. I feel like the computer is wasting my time! So when a website re-enables it with its own buggy JS implementation, well it's disturbing. (Thanks for giving me an excuse for my own rant!)
- forgotmypw17 6y agoIt's important to Always Be Testing as a web dev. There are thousands of different device-configuration-user possibilities, and for each one you get working, several more you'll never know about will also have an easier time of using your site. It gets kind of addicting, to be honest. The more browsers I try, the better I get at fixing various compatibility issues and removing all but the absolutely necessary from my pages. I started out with a pretty minimal design and featureset to begin with, but I've been able to actually expand my compatibility matrix while also adding new features by coding minimally and using "historic" LCD JS for most things. It's shown me that a) each browser has its beauty and unique features and feel b) most browsers are totally valid access devices and I would like to support them all c) we're at risk of losing all the knowledge of how to build a decent website, and I'd like to preserve that knowledge.
- jcynix 6y agoFat, slow loading, unresponsive web pages? Maybe it's time again to remember Maciej Ceglowski's "Web Directions 2015 Keynote": The Website Obesity Crisis https://youtube.com/watch?v=iYpl0QVCr6U https://youtube.com/watch?v=iYpl0QVCr6U
- jazzyjackson 6y agoIt's my all time favorite rant, also available in a (very fast loading) web page: https://idlewords.com/talks/website_obesity.htm https://idlewords.com/talks/website_obesity.htm
- wruza 6y agoWorst sites are not slow, right. Worst sites are those that break visual contracts (cls in the article), and half of “fast” sites do that. You can see it when page is already loaded for few seconds, you scroll/interact with it and then suddenly it behaves as if it was reloaded or jumps to another position right under your finger. You misclick on a link, go back, repeat. It does that not because a top banner loads, but on its own programming quirk. That’s annoying af and should be downranked to the bottom just like any snail-paced site.
- nicbou 6y agoGoogle treats this as an important ranking factor. That being said, it also values authority, and the websites that pull such nonsense tend to have such authority. The bigger your website is, the more annoyances you can get away with.
- GirkovArpa 6y agoLike Google itself.
- croes 6y agoExactly. It's almost like they are waiting for my click to load the ad and jump under my cursor.
- martin_a 6y agoI find this to be happening with YouTube in Firefox Mobile. For some reason my "watch later list" (or any playlist, I think) jumps like crazy when scrolling through it. It's a real mess and leads to lots of misclicks. Almost feels "broken by design", so I stick to their app.
- nfriedly 6y agoYou might want to try out https://vancedapp.com/ https://vancedapp.com/ - it's basically a modified version of the official youtube app that gets rid of some of the annoyances.
- giantrobot 6y agoA fast web page is not mythical. It's also not some unknowable or untestable thing. If you make a page of X bytes, Y number of resources of Z bytes, you can pretty easily calculate load time ranges for a variety of network conditions. You're never going to be able to overcome physics so you aren't going to somehow make a ten megabyte JavaScript monstrosity load instantly over a spotty 3G connection in the middle of nowhere. What you can do is give some worst case connection the best chance you can to successfully load your page. Instead of building it all in the DOM with JavaScript send the client the damn HTML. Send some baseline CSS in a style tag. Use CSS patterns instead of big header images or backgrounds. Use box/text shadows to make elements stand out without images. Bundle as much as possible (CSS sprites, JS bundles, etc) to cut down on external resource requests. Minify and compress the shit out of everything. Include a viewport meta tag. It's not that difficult to have a good looking and functional page that's literally a single HTML page. A single compressed resource that has everything it needs in a single load. We're actually in an era where the average web browser is extremely capable and isn't some version of IE. Even super low end Android phones have a very capable browser installed by default. You've got HTML5 and CSS3 along with at least ES6 everywhere. The same is true on the desktop in most areas. There's also just so much shit you don't need in most pages. Far too many people treat a web page like it's some full blown mini OS. There's also a seeming generation of web devs that have no idea what browsers do and think they need to include the kitchen sink to display some text or load resources. You definitely don't need to override scroll events. You can never make a universally fast page because you don't control the user's environment. But you can make pages and fast and as light as possible so they're not wasting anyone's time or battery. You can also focus on uncached loads because honestly that's going to be a majority of visits.
- container 6y agoI don't know if current super low-end Android phones have what it takes to browse the web, but on all the devices I've had, all web browsers have been consistently unusable. Maybe that's changed in the last couple of years.
- knuthsat 6y agoyes, on Nexus 5X that I've had since 2016, chrome and firefox are very slow until they render the page, then scrolling works ok. on iPhone 6 everything is still pretty responsive.
- nicbou 6y agoUnfortunately, the challenge seems to be "how fast can we render a cookie notice that will waste 2-5 seconds and content that deliberately hides answers to keep the user on the site". It's pointless to make a website ridiculously fast before making the experience as user-hostile as permissible.
- emerged 6y agoIs there a way to pre-approve cookies for all sites? The law to require those pop ups has done more to ruin the web for me than ads have (since you can block ads).
- wastholm 6y agoI use the "I don't care about cookies" Firefox add-on: https://addons.mozilla.org/en-US/firefox/addon/i-dont-care-about-cookies/ https://addons.mozilla.org/en-US/firefox/addon/i-dont-care-a...
- nicbou 6y agoI Don't Care About Cookies is really good. On Firefox Mobile you can add a uBlock Origin blocklist that removes many of them.
- jlokier 6y agoDo you know if there's an "I Do Care About Cookies" extension to automatically always decline? (If not, than an extension just to find and show the correct decline option when it's cunningly encrypted in a sequence of hidden yes/no/no/no/yes/no type slider options with ambiguously written labels would be nice instead!)
- superjan 6y agoIf the popup is trying to be compliant with gdpr, “more options” followed by “save” should do. They are not allowed to enable tracking by default.
- 6y ago
- throwaway_pdp09 6y agoFast web pages unquestionably exist. This just spends a lot of text (and 2 pointless images, as noted by the top comment in that article) to pretend they don't. Now there's a reason for trying to fudge the question but it's not clear why. Someone's up to something, pushing something, selling something.
- JyrkiAlakuijala 6y agoEvery web page should load in 200 ms or less. There is no deep technical reason for humans to wait for computers for simple loading of data. We can get this right.
- jcims 6y agoI'm sure lots of people know this but I had no idea. Chrome has 'lighthouse' built in. Seems to be a reasonably thorough client-side site usability/responsiveness report tool. Hit F12 and go to the Lighthouse tab(?) in dev tools. Very cool!
- scottbucks 6y agoI'm having a bloody nightmare with my blog, https://www.thedetechtor.com https://www.thedetechtor.com, must be something to do with wix but it takes for ever to load, going to have to migrate to Wordpress
- saagarjha 6y agoWell, part of it is probably the 355 requests it makes on a fresh load. Have you considered reducing the number of JavaScript libraries you use? You have quite a lot of them…
- Shared404 6y agoIf it's done with Wix they may or may not be able to control those. Full disclaimer, haven't used Wix before, so maybe I'm misunderstanding what it is.
- gcatalfamo 6y agoWix is perfectly usable as long as you limit the number of components on the pages, especially if those components are not static which you clearly make a lot of use of. Your usage and content has probably outgrown Wix unless you plan to simply the structure a bit.
- toinbis 6y agoIt's physics, not perception. Just make your website fast. Am currently consulting big ecommerce bussiness on how to improve page load. I made them this 'fastest page in the world' demo: https://turboeshop.com/fastestpageintheworld/ https://turboeshop.com/fastestpageintheworld/ - kindly please check it out. And here is fastest page with Google Analytics: https://turboeshop.com/newstackonly/ https://turboeshop.com/newstackonly/. 325 ms for fully loaded time CSS + images + HTML + JS + GA loaded + Measurement Protocol hits sent. This is what fast website is: a) inline purged css; b) everything loaded from one domain, 100% cached. c)inlined js(vanilla + web component if you need one); d) inlined images up to 4kb; e) larger images loaded from cache from same domain. f) gtag.js and analytics.js -> from cache; g) Measurement protocol hits sent from async proxy on edge. h) 100% cloudflare cache hits; i) Cloudflare workers for dynamic bits; That's all what it takes. Don't read articles- just make it fast, it's really that simple :) And as svelte was mentioned - if you want to improve a website that is bigger than your personal blog, you don't use svelte, react, gatsby or any other of that breed as it's impossible to do serious marketing with a website that's hydrated (svelte's web components is a wonderful thing though and is totally nice addition to marketing stack). I mean no insult to anyone with my strong opinions and would be glad to have discussions in comments. UPD: Added note on Cloudflare & Cloudflare workers.
- nattaylor 6y agoI would think you want gzip enabled if you're sticking everything in a text payload
- toinbis 6y agoVery good point! Thanks - will take care of that! :)
- oblio 6y agoYour page is quite fast, but if you want see fast, check this out: https://forum.dlang.org/ https://forum.dlang.org/ It's a bit ugly but I imagine with some proper CSS the could make it nicer looking but still fast.
- rob74 6y agoI know at least one non-mythical fast website: https://motherfuckingwebsite.com/ https://motherfuckingwebsite.com/
- ghoward 6y agoA lot of the comments here are saying that js and css should be inlined to make loading faster. I disagree. They should be small (or nonexistent in the case of js), but I believe they should be separate, and proper caching enabled. This means that the first page load may be milliseconds to a second longer, but any other page loads after will be instant since those resources will be pulled from cache. Note: I am assuming that the web page under load is really small, 50 kb or less. I welcome anyone who disagrees to say so. I acknowledge that I could still be wrong. Edit: spelling.
- mouzogu 6y agoWhatever happened to the idea of progressive enhancement? I know it's a often a matter of limited time and resources but honestly I would take a bet that more than 50% of the websites you could visit would be unusable or at least functionally unusable without JavaScript.
- dr-detroit 6y agoWell established research tells us that anything below 3 seconds latency+render is over optimization in terms of customer acquisition and retention in spite of anecdotal loudmouths who claim otherwise.
- superjan 6y agoWhat I like about this article is that discusses the issue of layout changes during load. I can not stand websites moving text around while I’m reading. Part of the blame is on browsers: why bother to render a page before all cached resourses (fonts) are loaded? But sites should insert image/ad placeholders af the appropriate size.