It's physics, not perception. Just make your website fast.<p>Am currently consulting big ecommerce bussiness on how to improve page load. I made them this 'fastest page in the world' demo:
<a href="https://turboeshop.com/fastestpageintheworld/" rel="nofollow">https://turboeshop.com/fastestpageintheworld/</a> - kindly please check it out. And here is fastest page with Google Analytics:
<a href="https://turboeshop.com/newstackonly/" rel="nofollow">https://turboeshop.com/newstackonly/</a>. 325 ms for fully loaded time CSS + images + HTML + JS + GA loaded + Measurement Protocol hits sent.<p>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 :)<p>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.<p>UPD: Added note on Cloudflare & Cloudflare workers.
Interestingly 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.<p>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.")<p>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.
Worst 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.
When dealing with 'troublesome' internet connections, or just in general:<p>Keep page load to less than 50k, or 100k if you're feeling fancy.<p>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.<p>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.<p>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.<p>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.
Unfortunately, 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".<p>It's pointless to make a website ridiculously fast before making the experience as user-hostile as permissible.
Fat, slow loading, unresponsive web pages? Maybe it's time again to remember Maciej Ceglowski's "Web Directions 2015 Keynote":<p>The Website Obesity Crisis
<a href="https://youtube.com/watch?v=iYpl0QVCr6U" rel="nofollow">https://youtube.com/watch?v=iYpl0QVCr6U</a>
Not 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.
It's important to Always Be Testing as a web dev.<p>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.<p>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.<p>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.<p>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.
Disclaimer: I work at BrowserStack<p>We've built a tool to help measure speed with these sort of issues in mind - <a href="https://www.browserstack.com/blog/announcing-speedlab-test-website-speed/" rel="nofollow">https://www.browserstack.com/blog/announcing-speedlab-test-w...</a>
What’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”?<p>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.
A lot of the comments here are saying that js and css should be inlined to make loading faster. I disagree.<p>They should be <i>small</i> (or <i>nonexistent</i> 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.<p>Note: I am assuming that the web page under load is really small, 50 kb or less.<p>I welcome anyone who disagrees to say so. I acknowledge that I could still be wrong.<p>Edit: spelling.
A 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.<p>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.<p>What you can do is give some worst case connection the best chance you can to successfully load your page.<p>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.<p>It's not <i>that</i> 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.<p>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.<p>There's also just <i>so much</i> shit you <i>don't</i> need in most pages. Far too many people treat a web <i>page</i> 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.<p>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.
Every 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.
It’s <i>a propos</i> 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.
Fast 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.
I'm having a bloody nightmare with my blog, <a href="https://www.thedetechtor.com" rel="nofollow">https://www.thedetechtor.com</a>, must be something to do with wix but it takes for ever to load, going to have to migrate to Wordpress
What 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.
Whatever happened to the idea of progressive enhancement?<p>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.
I'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.<p>Hit F12 and go to the Lighthouse tab(?) in dev tools. Very cool!
I know at least one non-mythical fast website: <a href="https://motherfuckingwebsite.com/" rel="nofollow">https://motherfuckingwebsite.com/</a>