Why You Might Want To Make Your Website Slower



It sounds crazy to make your website slower on purpose, but by slowing down your website you can give the user additional feedback, information, and clarity on what is happening. This minor slow down actually improves the user experience which sounds so counter intuitive. In this video I will cover the main ways you can use slowing down your site to improve the user experience.

📚 Materials/References:

Wordle Clone:
2048 Clone:
Page Transition Tutorial:
Page Loading Tutorial:
Submit Button Animation Tutorial:
Skeleton Loading Animation Tutorial:

🌎 Find Me Here:

My Blog:
My Courses:
Patreon:
Twitter:
Discord:
GitHub:
CodePen:

⏱️ Timestamps:

00:00 – Introduction
00:30 – Game dev examples
03:00 – Transition examples
04:07 – Extra information examples

#CSSAnimation #WDS #Animation

source

21 bình luận cho “Why You Might Want To Make Your Website Slower

  1. You made the case for games – of course it is important to build anticipation in games.

    I feel you failed to make the case as well for other types of website. When it comes to delays, less is more.

  2. son ! fast load is important ! then fast show !
    on showing something on the page it's okay to have animation !
    but on loading some data or resources or actions ! it's not okay to have much delay

  3. When showing the first example, I felt immense pain and disgust in how fast it showed up but how complex they made the website.

  4. I think it's really important to consider what's is the goal of your user when using your website. Imagine a fast food website when users want to make an order quickly but they must way until some animations finish up, that'd be frustrating, and would slow down the process.

  5. Love it. Not sure why I didn’t think about it . It’s so obvious yet missed so by so many developers. It adds charm

  6. Random accessibility comment! If you're using anything more than a very simple, short animation, you should consider prefers-reduced-motion in CSS to tone down the animations for users who need it.

  7. but I agree with adding some features like a skeleton loading if the internet is very slow… animations are good for effects but for optimization avoid it… For instance, a slider – don't animate it and let the user click the arrows control to increase engagement and time stay on your website… another is back to top link – remove it and let them scroll.

  8. but not for SEO. slow websites will have a bad impression not only on search engines but also on real human visitors.

  9. I decided to do this with my NextJS portfolio. When the user changes pages (routes), I apply a large box shadow over the page and animate it to kinda look like an eye shutting, and then I reverse the animation after the page is loaded to reveal it. Nobody is going to be looking at the same person's portfolio over and over so I don't think it'll be annoying to anyone

  10. As a user is super annoying when I load a page and: 1. I'm welcomed with light mode until the JS loads and catches my dark settings. 2. As soon as JS loads there is a re-render interrupting my scrolling and browsing in general. 3. Start to read, and then the font changes when it loads, so there is a layout shift. Not to mention, if there are images without absolute sizes that cause another layout shift. JUST MAKE ME WAIT 100 EXTRA MS BUT SHOW ME EVERYTHING DONE.

  11. I can see the advantage of animation on the puzzle games, but I'm in the camp that its too damn slow. Some of the animation on the menus are just plain distracting. If I see a site with lots of animation and slow sequences, I move on to another site.

  12. There is a difference between interacting with a website and websites speed. The website speed is who fast the content can besonloaded and how fast the js code can be run. Not the users interaction with the websites its the websites speed. What zu show here is the interaction with a website not its speed. Maybe the title is a bit misleading.
    For the user experience you are 100% right.

  13. reducing stuff on the screen is also very important – even more important. but dont overdue it. if you hide information or function behind more click it can be annoying. but e.g. if there 20 items on the screen, try to group them visually into e.g. pages /tabs.

  14. one should honor the client's "prefers-reduced-motion: reduce" setting

Trả lời

Email của bạn sẽ không được hiển thị công khai.