Making navigational page load quickly on mobile
Is there any reason why simple navigational pages would not load quickly on mobile?
My mobile website will have the following for navigation...
- Hamburger menu with a nested accordion menu
- Related web-pages which also contain a nested accordion menu and hyperlinks
Why conducting field research yesterday, one person said, "I have no issue having to make 4-5 clicks in a navigational menu on mobile IF the pages load QUICKLY!!"
For this, I am just planning on using HTML, CSS, and a tiny bit of Javascript
102 Replies
Marty you are the reason people have so many pointless meetings
Make something already they worry about perf
Love you too
No for real man 🥲😅
Get out of your own way
every single question you're asking here is best answered by just building something already and testing
Some day when I am rich and famous, I will disown you!
I don't even know how to respond to this lol
I understand your point, but I also know that poor planning leads to poor results
in the time you've spent discussing things with epic, you could've had half that site up and running, and actually seen what worked and what didn't, instead of spending probably literal days by now going back and forth about hypotheticals and theoreticals that are entirely meaningless as soon as they hit the real world
Over planning leads to worse results and more wasted time
In over 25 years in IT, MOST MEETING I have attended is because the dumb fucks in business wouldn't let me do my job and build a "plan" first... 😉
You don't just dig a hole in the ground and start pouring cement
christ, 25 years in IT and still incapable of writing a mockup
HTML isn't cement
itterate
fail early fail often
Or ask experts if something I am thinking of doing is a dumb idea and eliminate it early
HTML and CSS cost nothing, there's no raw resources you're wasting (other than time, and from what I've seen, you're perfectly willing to do that). There's no cost in starting over, no mess to clean up
Yea and that over planning wasted all the time when you just have to dig another whole anyway
Sure, you could spend days talking to Epic to see if something is a bad idea, or you could spend 15 minutes prototyping
I haven't coded in 8-10 yers, and it will take me months to get my head back into dev environments, IDE's, writing code, etc. (You forget that a lot of what I was good at is probably now outdated, so it is like I am startingf rom scratch with web dev)
then start
just... start
So basically you are just wasting time, and procrastinating
OR, I could come here - and afetr the infighting - get some quick help in a few minutes to help me come up with a good starting point. 😉
I'm building an enterprise solution - not some cutesy project like most of what is on Discord. Planning IS necessary to a point
you start an enterprise solution with a fucking proof of concept that's held together by string and duct tape
Like if I knew I had that in experience to brush off I wouldn't be in here asking questions about an idea
Open the ide and start doing
then when you have that prototype, you can start planning how to build the enterprise solution
No you aren't building anything that's our whole point
you'll run into a thousand problems you can't forsee now just by building the prototype, which then lets you build the "enterprise solution" properly
I have wireframes right now in front of me on my laptop
wireframes aren't a functional site
Anyone can have ideas
I appreciate your advice, but in fairness, I am asking pretty newbie web dev questions
No you are asking a question no one can answer
Because you have nothing to perf
You've spend more time lecturing me than maybe providing some answers to my simple OP
Ok Boomer
Great, now we're into name-calling
You have tried insulting me all the time
But ya I will just see myself out 😂
I haven't said anything to insult you
I have made comments about real-life experience I do have
Nope I'm out 😂
You've drank the Kool Aid on Scrum I see
Build a prototype with duct tape, find out it doesn't work, iterate again and again, get paid for no working system, call it a day
That describes most of my career in IT
I agree with most of what the others are saying, but you're also kind of asking the wrong group of people. First you should ask your user base (which we've pointed out many times) but if you don't want to ask your user base then you really should be asking UX designers instead. Most of us here are just developers
I have started asking people, but the more feedback the better. (Just not when it becomes personal.)
As far as UX designers, I always felt that Kevin was someone who was not only a web developer, but someone who was well versed in UI/UX - I assumed most people here would fall into that category.
Yea I get that definitely. I just think we're very pragmatic in this server. There's not a whole lot of use in ruminating over this type of stuff (it's definitely good to put some thought into it though) when really, like Jochem said you can just go in and change it if your actual user base has an issue with it
Like imo and what we've been saying is just get something up - get some analytic software and see where people go and what they click on and you can optimize around that
I don't think it's bad to be asking and I get where you're coming from but it's just a lot of wasted energy when it comes down to it when you're spending this much time on theory
Now don't get me wrong I think it's different if we're talking about a giant app, a team of designers and a user base. Like then I think it's important to really scope things out and get an understanding of what will work and won't work. But we're talking about a company that can invest hundreds of thousands / millions into the app and that's not you
You can only spread yourself so thin and at the end of the day it's just you: the most important thing is getting something up right now
So would you rather spend a year on theory & making the site or a couple months making the site and getting real data from your user base and iterating over it?
Because you are the blocker, you are the only one working on it. It's not like you have multiple teams that can do multiple things at once
Now don't get me wrong I think it's different if we're talking about a giant app, a team of designers and a user base. Like then I think it's important to really scope things out and get an understanding of what will work and won't work. But we're talking about a company that can invest hundreds of thousands / millions into the app and that's not youBut I am building a multi-million dollar business, so it DOES take more planning than throwing together a cutesy personal project. And because I do NOT have an entire team and a million-dollar budget, it means that I have to plan even MORE, because I get one chance to really nail this!
You can only spread yourself so thin and at the end of the day it's just you: the most important thing is getting something up right nowThe goal is to get something up right now that is well architected, and thus scalable, adaptable, and will be well-received, because I only get one chance to "Wow!" people!
So would you rather spend a year on theory & making the site or a couple months making the site and getting real data from your user base and iterating over it?Somewhere in between lies the answer. I have admittedly been chewing on this since the Holidays, but it isn't like I spend 12 hours a day staring at my screen. (I work on my design - usually at night when things are quiet - and I work on things when I am in my "creative zone".) No regrets on any time spent so far, because I feel like I have a solid understanding of my Information Architecture has evolved in the past few months. BUT, I am definitely chomping at the bit to wrap this up and get coding, and to facilitate that, I came here for help.
Because you are the blocker, you are the only one working on it. It's not like you have multiple teams that can do multiple things at onceI appreciate your thoughts, and you make good points.
At the same time, I can rarely think back over my life (or career in IT) where I said, "Damn it! I wish I wouldn't have thought things through so much!" Almost never... (I also don't have to do my work over like most people end up doing...) 😉
But I am building a multi-million dollar businessThis is the point so many people are trying to make: you aren't. You can't build a multi-million dollar business from a $0 business — you build it from a $1m business, and you build that from a $100k business, and so on. It is impossible for anyone to tell you, right now, the answer to all these questions, because you're doing the kind of minor twiddling with variables that can only offer meaningful gains to an app with an established user base and a functional revenue stream. Focusing on this before you have any kind of MVP is seriously myopic, but also, the only way you get meaningful answers is by gathering masses of data from AB tests run on actual users, which you won't have until your product exists as more than a vision Sorry to dive in on an ongoing thread and be super blunt, but your questions account for nearly a third of all the messages in this help forum for the last month and every time someone raises this point, you brush it off with a winky emoji
I asked a simple question. And like so many of my threads, people turn a simple question into advice of how they think I should think and how I should build my website and my business.
I am open to suggestions - and even criticisms - which Discord users are sooooo good at!! But why do people insist on always "getting into the weeds" instead of focusing on the question at hand? My OP was super simple - and I basically knew the answer - but was just doing a sense check... Again... If I build a hamburger menu with a nested accordion menu, and then a separate web-page using a nested accordion - where the only technology I am using is HTML, CSS, and non-library Javascript, is there any reason why either would load (super) slow on mobile? Based on what I can piece together, the answer is, "Of course not!" Two days later, we are still fighting over how I should build my website and I am being labeled the anti-Christ?! All of this can only happen on Discord, because I can't think of anywhere else people get so worked up over nothing. 😄 I think I answered my own question... P.S. There is a lot of wisdom in your last post, and yes, I am probably being too methodical, but I know how my mind works and how I think, and this is much more about building the right solution to the right problem and one that I feel comfortable with than $$$ or time-to-market. Maybe my approach is wrong? Time will tell... In the mean time... I surrender. I'm wrong (again). You guys win!
I am open to suggestions - and even criticisms - which Discord users are sooooo good at!! But why do people insist on always "getting into the weeds" instead of focusing on the question at hand? My OP was super simple - and I basically knew the answer - but was just doing a sense check... Again... If I build a hamburger menu with a nested accordion menu, and then a separate web-page using a nested accordion - where the only technology I am using is HTML, CSS, and non-library Javascript, is there any reason why either would load (super) slow on mobile? Based on what I can piece together, the answer is, "Of course not!" Two days later, we are still fighting over how I should build my website and I am being labeled the anti-Christ?! All of this can only happen on Discord, because I can't think of anywhere else people get so worked up over nothing. 😄 I think I answered my own question... P.S. There is a lot of wisdom in your last post, and yes, I am probably being too methodical, but I know how my mind works and how I think, and this is much more about building the right solution to the right problem and one that I feel comfortable with than $$$ or time-to-market. Maybe my approach is wrong? Time will tell... In the mean time... I surrender. I'm wrong (again). You guys win!
Sure I can see why you'd be frustrated by us not giving you simple yes or nos. But we aren't robots, we're human. If you wanted something to tell you yes or no use chatgpt lol. I'm not going to answer a question without giving my advice / experience. If that's what you want then maybe using something like Discord to ask for help isn't for you
To answer your question though, yes you're right just adding a little bit of html / css / js won't really affect page load. Make sure to always test with Lighthouse
What is Lighthouse?
It's a tool to see how fast your page loads
yes, there is, literally, an infinite number of reasons why a page wouldnt load quickly on mobile
one of them is just a bad connection, usually found in elevators, metro, rural areas, areas with crowded networks and so on
you can make it feel less bad by preemptively preloading pages, but, you will spend a ton of time preloading stuff you wont use, just wasting money for people on mobile internet
instead of doing that, just have it have all the navigation in js, if possible, and then fake the navigation to those pages by using push states, and showing the html rendered from that js data
and when someone sees an actual page, then you contact the server to get the contents of the page and show, or any way you wish to do
instead of doing that, just have it have all the navigation in js, if possible, and then fake the navigation to those pages by using push states, and showing the html rendered from that js dataHow can that be faster than pure HTML and CSS? Aren't there websites for that? Are there any non-Chrome alternatives? (e.g. Firefox)
That's from Google?
Yes
What do you mean by non-chrome alternatives?
You can use this site on any browser
When I looked up Lighthouse it seemed like it was a Chrome add-on
Who is behind that website? Google?
Yes
There's multiple ways to use it. The website, the addon, inside devtools
im sorry, but can you rephrase that question?
I didn't really understand your advice. It sounds like you were saying loading my menu and web page using Javascript would somehow be faster than loading it using straight up HTML and Javascript
no, im saying to shove the menu navigation into javascript
and instead of loading a whole new page, you fake it all with the data from js
I guess I'd use the website - I hate Chrome (and Google) and I know I need to get over that, but that is another topic! 😉
Is that what they call front-loading?
So the Javascript helps because it feeds the webpage in tiny pieces versus trying to load the whole thing at once?
So what is considered a good page load time?
For a website with no pictures on it right now and just some html / css / js? <1 second
Try to have all the metrics in green
no, it helps because you have all the navigation data and you dont have to load other pages
I actually have a splash page up now for my website - which has nothing to do with what we have been discussing - and I got a green 100 (percent??) and...
First Contentful Paint = 1.4s
Largest Contentful Paint - 1.4s
Total Blocking Time = 0 ms
Cumulative Layoff Shift = 0
Speed Index = 1.9s
So how is that?
a bit high but not bad at all
the time is probably the emulated performance
But in this thread, I was asking about a hamburger menu - which is obviously just text and links - and then another navigation page which is again only text and links.
So it would seem like overkill to use Javascript to "front-load" something that should load instantly, right?
Now when users finally get a section landing page that has news articles (with thumbnails) then I think your advice makes more sense, right?
thats why you arent "front-loading" anything
as part of the javascript, you send a chunk with the text and links, and information on what is and isnt a whole new page
but instead of navigating to a new page, you are just doing dom shenanigans
Looks like when I finally dive into my code I'll need lots of help. That page in question is just a splash page that has maybe 1 1/2 pages of text and I think 3 SVG maps
Maybe I'm using the term wrong? What does "front-loading" mean? And how does that compare to what you are suggesting that Javascript can do?
What about for a mobile site (web page) that has article summaries and thumbnails? What would be a reasonable load time there?
just aim for green scores on lighthouse
i could be really obtuse and say something like 'depends on how long your users feel like waiting' but just keep it simple and focus on lighthouse metrics
u have popular sites that take like 5 seconds to load and they still get people to visit because theyre popular
Is it possible to get "green" on a web page that has article summaries and thumbnails like you'd see on a news site?
yes its possible to get green on any page just depends on how much u want to give up or work for it
Which metric on that page tells you how long it takes to load a page? (Lots of metrics that are Greek to me?!)
Like what is "Contentful Paint"?
I'm not sure, lots of research to do
according to google, it's a non-american washing machine or "concentrate the benefits and costs of a project on an initial stage"
For instance, I put in https://www.wsj.com/ and I'm confused by the results page.
The top part is all green, but then the next section is red and it seems like you have two conflicting LCP's. Can you help me understand that?
The top part is all green, but then the next section is red and it seems like you have two conflicting LCP's. Can you help me understand that?
I can't right now sorry
getting all greens doesnt say anything about the quality of a page: it just says it passed a set of tests
Well, for this thread, I'll assume that if I hand-code my hamburger menu with a nested accordion menu and then a follow-up navigation page with its own nested accordion menu using just HTML, CSS and some Javascript, things should be super quick.
you are assuming incorrectly
objectively speaking
starting with ... the network
that's a can of worms inside pandora's box
If a page is 10 hyperlinks and it doesn't load quickly then I am fucked
the fact that a page can take infinite time to load should be enough
(browsers usually timeout after 30-60 seconds)
thats why im saying to put all the navigation data in javascript and render the menu with javascript
This is where this circular debate is making me scratch my head. I am talking about "probable" not "possible". (I sthat not implied?). It is "possible" that someone in Alaska with a 28k modem visits my mobile site and it takes 5 minutes to load, but in all likelihood, if my menu is a handful of links, I would expect it to load super quick in 90-95% of the cases
Sorry for being obtuse, but please help me understand this - because I do not know Javascript. So you are saying that doubling my web page file size by adding in a bunch of Javascript so that instead of just loading a list of 10 hyperlinks with HTML, I instead double my code-base and let Javascript "feed" one hyperlink at a time to the user's browser and that is somehow faster in my simple use-case?
well, yesterday i was having 0-0.2kb/s of speed due to network overload thanks to a massive blackout
thats not what im saying, specially the "double the page size"
Not knowing Javascript, but conceptually understanding your larger advice, I DO understand (a little) concepts like "lazy loading" and delayed loading where maybe you have a web page with lots of photos and text, so you use Javascript - or whatever - to load the text first and then in the background use Javascript - or whatever - to slowly load one photo at a time so that the user doesn't have to wait on the whole page loading before they can see/use it.
But what I am not following in your advice is how doubling my webpage file size by adding in all of this Javascript to do what I described helps in MY situation.
It's hard to see how adding Javascript could realistically help load say 10 hyperlinks on a menu faster than just serving them up with pure HTML.
again, it wont double the page size
unless the page size is 3kb or less
but, a simple html page will have more than 2kb of garbage in the <head>, so
the idea is simple:
- shove all the links into js - ideally using json
- use js to render the sub-pages for the navigation, by putting some element on top of everything
that can easily be done in in just a few kb
If I had a (mobile) navigation page like this...
**
Security News
Home > Security > News & Analysis > by Content-Type
∨ Written
1) Trending
2) News
3) Analysis
4) Briefs
**
then approximately how many KB would that be if it is just HTML and CSS?
the code itself could probably be squished into 1-3kb
the data is impossible to say
What if someone has JS off?
Seems like stuffing HTML inside Javascript is risky? Overkill? And what about semantics and SEO?
(Pardon my Javascript ignorance)
then you fallback to the normal navigation
the idea is to improve the navigation if you can
So with your suggestion, I can use JS first and if JS fails then I can load HTML and have no issues?
yes
but if js is working, you use js for the navigation
What about semantic HTML and all of that good stuff?
with push states, you can even change the page url, so, in case of a refresh, the user loads that navigation page from the server
what about it?
it won't change much
Will web crawlers be able to see my semantic HTML if it is packed away inside of JS?
(I'm old-school and a big believer in proper semantic HTML web pages)
that isnt any different from not having javascript
it will just see a regular link for the page
I mean the structure of the larger page - JS won't obfuscate the semantic HTML? (Like I'm asking on a more normal web page where you'd have H1, H2, etc)
My perception - right or wrong - is that JS obfuscates your semantic HTML and almost paints the webpage and you lose the semantic part. (Again, I've never learned JS - but want to this time)
I guess I think of JS as dymanically creating webpages versus them being hard-coded in HTML
I dunno
js will do what you tell it to do
it's existence only changes the fact that it exists
So it won't interfere with semantic HTML and web crawlers and SEO?
it's as if the js doesnt exist
Can I do what you described above with lightweight Javascript - ideally JQuery or something where I don't have to implement some huge JS library?
"lightweight" and "jquery" dont belong in the same sentence
and again, it isnt some huge library
but yes, you can do whatever you want
Not to get too far into the weeds, but what is the easiest to learn and most lightweight version of Javascript that I can use for simle things like nested accordion menus, form validation, and simple things like that?
none of those are simple
except form validation, kinda
you can just use the built-in html validation
What do you mean? I'm pretty sure I can do a nested accordion with CSS alone. But if I do need Javascript, I assumed it would only be a handful of lines of code?
Likewise, to make a side drawer appear/disappear (i.e. my hamburger menu) I asuemd thatw as only a few lines of Javascript?
depending on how you implement it, and how accessible you want it
As I recall, to make it accessible I want to use HTML and CSS and not use much JS
I thought JQuery was supposed to be the "light" version of JS or is that just from a coding standpoint and not from the library itself?
you need to announce when the element is open and/or closed