Why website speed is important

in HiveDevs4 years ago (edited)

When building website especially social networking websites, there are multiple factors to consider. User's internet speed, network load with dozen concurrent users, performance of application codebase, page size, feature-set, optimization of images. Some of these factors you cannot control but you can lay some ground work for those cases so it still works best.

One top factor for us at Ecency was speed. Now, website speed depends on multiple other factors. You can achieve highest loading speed, if your webpages are light in size. Your application logic is well written. Your infrastructure able to handle user load. Less external dependencies.

Lightning fast

Light in size means, you have optimized each page so that it has less megabytes to travel across the globe. User has to download less and best optimized data. It has reasonable number of requests per page, minimal or smallest package dependencies so your bundle size is small and use better image optimizations. Users with slow connection, with mobile connection are able to enjoy the experience same as users in computers and fast WiFi internet connection. If you can achieve highest performance for slowest connections your users will likely come back and stay connected longer even in remote areas with 2G and GPRS internet connection.

As an example, let's take Ecency


ecency-hive-fast-light
Source

Our https://ecency.com/hot page weights little over than 1 Mb and this size super small and best for website like ours. Even on mobile connection, it should load light fast. ⚡️

Remember, this ~1 Mb size is what user downloads in his phone or computer when they open the page, any subsequent reloads will be even less in size because of browser caching and hot page having less frequent post updates. We are really happy and proud with this result so far.

Image optimizations

Due to nature of Hive websites, we have to really consider image optimizations and size of each image to get balanced well quality image and best compressed size. You don't want to optimize too much by sacrificing the quality experience. Over last few months, we have made a lot of tests and improvements to make sure we have that balance. And it doesn't stop here, we will continue to do so. If you are building website or dapp or mobile app, please consider giving best user experience not only via User Interface but also with innovation and better user experience - balancing feature-set and speed.

It is important to use next generation image formats whenever possible. It offers your better compression in size and quality. We are doing all above in our new Ecency website. 🚀

Server side rendering

Server side rendering (SSR) is one of the mature and old techniques to have better performance and experience. Ecency.com does have SSR and we have learned last couple years on how to make it better. When we started Ecency (used to be Esteem), we built standalone apps, meaning we didn't have much server side scripts and we allowed user to connect any server they wanted. We were the only app who offered such feature back then. With time we learnt that in order for us to scale and compete with other social networks, we will have to open the gate and build both standalone apps along with the website. More accessible your service is the better it is. Right now, we have Desktop and Mobile apps which is mostly standalone and works out of box and if one server is down or in maintenance, you can easily switch the server and continue to be connected. In decentralized network, there are more unannounced server maintenance than announced ones 🙄.

Standalone apps are also different because they are client side rendering by default, meaning user's device does most of the work, rendering, parsing, etc. that's why they don't necessarily need backend much. But main advantage of SSR, it allows your website to load quickly if using very old mobile devices with less RAM and CPU powers, old computers alike. Your server does the heavy computations and sends mostly ready data for user browser. So we will continue to offer client side rendering as standalone apps (desktop and mobile) as well as server side rendering solution (website).

Future

Innovation requires you to be open for new technologies to come and make use of those options which is best for your audience and users. We have more things to improve and make above stats 100% in all fronts. So we are making sure any new changes we do, will not put heavy load on all our users.

Try https://ecency.com and see how much internet data bandwidth you save each day and also experience fast, and lightning surfing experience on Hive!

Fastest blockchain deserve faster dapps!

Hive on!

Proposals
Approve Hivesigner | Approve Hivesearcher
Vote for @good-karma as a witness

Sort:  

I am loving how lightning fast Ecency is! It makes me SO much more efficient doing all the things I want to do on the Hive blockchain!

Congratulations @good-karma! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s) :

Your post got the highest payout of the day

You can view your badges on your board And compare to others on the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

To support your work, I also upvoted your post!

Do not miss the last post from @hivebuzz:

Hive Power Up Day - The countdown is ticking
Hive Power Up Day - Let's grow together!

Thanks. Speed was one of the biggest problems I had with eccency. The second problem was I couldn't find the options fir posting in communities as clear as peakD does. Well that's my 2 cents. I hope Eccency has a great future.

Likely talking about mobile app, website works quite fast on mobile devices as well as computer. We are reiterating some performance related issues on Mobile app and communities navigation being simplified as well.

As for website, editor offers your community list as soon as you type on tags input also you can click on any community tag from post or Communities page https://ecency.com/communities and start posting to that community. Our next major update on website will have improvements on communities related operations and making community creation easier. Stay tuned for that.

Right. I usually used ecency on the phone. The desktop version was updated recently. The phone app sends a lot of notifications^^

A lot of notifications good or not so? 😊You know you can go to Settings page and enable only specific notification type, right?
Here attaching screenshot:

ecency-notifications-hive-blockchain

Thanks. I'm there ♥

Nice work flow. And well detailed information, at least we the end users are able to understand the effort put in place to provide us with ample opportunity of using a well packaged application for our daily activities on this platform.
#Gratitude

I really like the web version of ecency. It's so freaking fast. I used it more nowadays compared to the desktop version.

I noticed that when using the desktop version, I can paste an image from clipboard directly to the post editor and it will get uploaded. On the web version, I can't do that.

Thanks.

Oh yes, I miss that feature as well. It was reported and we are adding this feature soon.

Yes, I must agree with tah. Also, from my perspective, if compared with other HIVE UIs, the Ecency web site is the fastest! Good work and keep going! 😎

I agree , ecency web I am using it is good in speed and easy to use.

to best serve the community :)

Excelente análisis

Sweet... Love what you've done choosing to write a post on these keywords. I don't know if it was intentional, I'm just assuming. Very informative as well and thank you for your hard work looking into ways to update the image formats to next gen. I'm not an engineer, I don't know how to code, BUT I do understand the concepts behind a lot of this - even if I can't put it to practice - yet.

What I mean to say by this is, I know it takes a significant amount of work to produce all of what you do. You are a great service to many and you are appreciated!

Have a great day!

Great post

Hello, maybe you could answer me a short question..

Is there any kind of open source front end (even if it's really small) availiable on Github or other sites? I am learning Website Development at the moment and would like to have some insight about how a website interacts with the blockchain backend.

Thanks in advance ;)

Yes, condenser which is hive.blog based on is opensource, almost all of our products are opensource as well: https://github.com/ecency

I have over a thousand items in my node_modules folder. When I build npm makes it into only a dozen or so. Check it out: https://www.steemfiles.com/hive-139531/@good-karma/why-website-speed-is-important

Your app usually strips out most of them when you do production bundle.

I agree, speed is important!

wow, it is indeed super fast

nice and very helpful and useful

Great and precise analysis. Thank you

awesome work! I've heard that Hive is too clunky to go totally mainstream as it is right now, is that true?

Why and who says that? Depends who you ask I suppose, we at Ecency building full fledged, mainstream ready suit of apps. https://ecency.com combined with our desktop and mobile application are as ready as they can be for mainstream. You can signup easily, you can start using and earning, investing, using, easily. All we need is better brand recognition and marketing, products are almost ready.

Yeah, I just heard it in passing on discord and thought I'd ask you cause you seem to be pushing really hard to help this place on the development end and probably understand better than most. Is it possible that even if Hive isn't built to scale, that it can have apps that will be built to scale? Would the apps have to do a lot of work off chain then and is that possible and/or beneficial? Not doubting you, I trust your work. Sorry for all the questions and thanks for the replies!

Good job 👍