This insight contains technical details aimed at developers of ICO websites. I will outline methods to speed up your web app for super speedy load times.
We visit a fair few ICO web apps as we research and look for great ideas in Blockchain. Most of them load too slow for our standards. Around 40% of users drop out if your page does not respond within 3 seconds, so a snappy response is in our best interests.
This figure drops somewhat in cases where users have been referred or are already emotionally invested in the product. However, first impressions count, and every second counts when a user can close a tab in a split second upon dissatisfaction.
Let’s go through some methods for speeding up your web app.
Note: Do not attempt to carry out all these optimisations in one session. Iterate through them one by one and apply them smartly to your project.
Static content
How much static content are you serving, and can you serve more of it across your servers? Review how you are distributing your files. Are you serving static content over a cookiless domain?
CDNs
Which CDNs are you using, and how do they perform compared to your own solutions? Which method is faster in various geographies?
Apache vs NginX
NginX is a much better suited web server for running ICO websites due to its performance and maximum connection support far outweighing Apache. If you have legacy code you must use, then serve Apache and NginX combined via a reverse proxy setup.
GZip compression
Are your Gzip compression settings turned up to the maximum? When you server is under heavy traffic can it still support these settings?
Template caching
Use a compilation cache setting that your template engine supports. I use PHP and the Twig template engine with compilation caching enabled. If you regularly git pull into production, make sure to set up a script that combines your pull requests and clears your compilation cache.
Use SASS
Use SASS with compression enabled ( --style compressed). By separating your CSS into various SASS files and importing them all into one file, only one minified CSS file will be built, eliminating the need for further processing your custom CSS. Use the --watch flag to automatically build your SASS upon saving.
Note: I like indented SASS code over SCSS.
Minify and combine all CSS files
Minify all your external CSS files and combine them into one file. Sublime Text 3 has some great tools for processing CSS (browse their package manager). If you have to, set up a shell script to combine your minified CSS files upon a pull request to production, if that is what is required for your solution.
Minify and combine all JS files
Like my previous point, make sure to combine as much – if not all of your JavaScript, and include it in the footer, before your body close tag.
Compress your HTML
Compressing your HTML will minimise your templates and shrink their file size. Your template engine may support html compressing already. In the case of Twig for PHP, you can install the html-compress-twig package. Text editors such as Sublime Text support packages for HTML compression.
Cut down on requests
Every image you load is a separate request. Tile your icons into one image and configure them in CSS. Download requests from multiple hostnames to parallelise requests.
Append hidden HTML upon request
Have a modal structure hidden in your footer, waiting for someone to open it? Don’t include it upon the initial page load. Instead, append it when and only when someone needs it. This applies for any hidden HTML that you may have hidden away.
Transition from jQuery / JS based animation to CSS3
CSS3 keyframe animations and transitions are a lot faster than JQuery animations. Use JavaScript for class adding / removing to control your animations. Refer to easings.net and study which easings will work best for you. Familiarise yourself with the animation CSS properties.
Use multiple database architectures
Will turning to services like Amazon’s DynamoDB help you store and process large data? Their sharding and replication features make it very easy to scale your solution.
Adopt a NoSQL solution for faster indexed based database querying. NoSQL databases are fundamentally different than schema strict databases like MySQL. Use both solutions if needed for faster database performance.
Caching
Have you optimized your caching setup? Remember your cache meta tags.
Use Pingdom
Use https://tools.pingdom.com for a detailed breakdown of your page performance. It is a great tool to pinpoint your app’s greatest weaknesses.
There are dozens of potential factors which may slow down the response of your server: slow application logic, slow database queries, slow routing, frameworks, libraries, resource CPU starvation, or memory starvation.
Adopting a strict MVC framework for your web app will decrease the risk of these events occurring.
China
AWS is slow in China. All Google services are blocked, and package manager speeds are unpredictable.
Familiarise yourself with what works best in China.
I have resided in China and carried out projects for Chinese clients. Chinese companies have a growing interest for their apps to be accessible by both Chinese and non-Chinese markets.
There is a growing interest to tap into western markets with their products. Remember to plan your web infrastructure with this in mind.
Summary
I hope this list will help you fine tune your web app experience. At JKRB we help clients take their app technology to industry standards, and speed always plays a large role in decision making.
ICOs can be very exciting to take part in. Having a stable, smooth experience will make them all the more so whilst improving your organisation’s image, likelihood of investment, and overall customer satisfaction.
Turbo Charge your ICO Website - Must Know Optimisations for Develop... | Ecency
