Why do we need to optimize website?

 2021-07-07

Why do we need to optimize website?

1. Facts


1.1. User facts

  • 47% of users want a website to load in under 2 seconds and 40% will give up if a site takes more than 3 seconds to load.
  • 79% of users will not revisit a website with bad performance.
  • 52% of users say that a fast-loading website directly affects their loyalty.
  • 44% of users complain about web speed to their friends.
  • The second increase in load time reduces user satisfaction by 16%.

1.2. Website facts

  • 79% are over 1MB, 53% over 2MB, and 23% over 4MB.
  • Mobile load-time has decreased by 7 seconds but still takes about 15 seconds, 53% of websites take more than 3 seconds to render.
  • Mobile traffic accounts for more than half of web traffic worldwide, but conversion rates are lower on desktop devices.

Therefore, speed equals revenue. 70% of landing pages take more than 5 seconds to render.

Google used a deep neural network with 90% accuracy to produce the following results:

  • Reduce load-time by 10 seconds, the rate of users who continue to use the website increases by 123%.
  • Conversely, the number of elements on the website increased from 400 to 6000, the conversion rate to profit decreased by 95%.

Also, faster is better, and less is more. Actual test:

  • Walmart:
    • Every one-second load-time decreases, order quantity increases by 2%.
    • Every 100ms load-time decreases, profit increases by 1%.
    • Order rate can decrease by 25% for every one-second increase in load-time.
  • Amazon A/B Test: Just 100ms load-time can dramatically reduce profits.
  • Google:
    • Traffic decreased by 20% if load-time is increased by 0.5 seconds.
    • Google has ranked websites according to a mobile-first index, mobile page load speed will directly affect index results on Google search engine.

In the future, websites will definitely have to pay attention to optimizing web services, which is both an opportunity and a challenge for developers. Do all of the above reasons make you sit at the table and spend time making a website that runs 1-2 seconds faster?

Let's take a quick look at the user's process of entering a website in a simple flow.

  • The user enters a web address → goes to the Internet.
  • DNS server (Domain Name Service server) converts URL to IP address → points to the server with requested IP.
  • The server receives the request, processes the request.
  • Pass the response back to the user → the browser displays the result.

The good news is that we can optimize the website at all steps, but the bad news is that at each step, the improvement time can be measured in ms (1/1000 second). However, if your website is a personal blog, not worth monetizing, with less than 50 concurrent visitors, then optimizing does not bring much value.

You monetize your website and have an average of several thousand or several hundred thousand concurrent visits. In addition to profit reasons, if the web service is not optimized, the server may be overloaded due to customer requests → bottle neck → prolonged load-time, even out of service.

Therefore, instead of spending money to buy a bigger server, just take some time to rearrange and redesign the service to deliver stable performance at a cheaper cost.

 

2. Four categories corresponding to each stage when users visit the website


To help you understand more, Hachinet will add some methods and divide them into four categories corresponding to each stage when users visit the website.

2.1. User → Internet

It's completely out of our control, but you can still ensure that your customers get a good experience with extremely slow internet speeds by building a progressive web app and using a service worker for your website.

2.2. Internet → Server

2.2.1. DNS server

The conversion from the URL to the server IP address is done by the DNS server, and it is also just a computer, fast and slow. Hosting services will usually also include DNS services, but the speed may be different, so the page load speed also depends.

How to fix.

To save about 20-30 minutes of load-time, you should consider switching to using some other provider's DNS server.

Some DNS service providers (like Cloudflare) allow you to use the DNS service for free but find out which DNS is the fastest in the geographic area where your website is used.

2.2.2. CDN

Content Delivery Network (CDN) is a system of edge servers located in different geographical locations to be able to transmit content from a distant origin more quickly thanks to the cache mechanism.

Instead of going to the server (origin, remote) to get the resources, users can get them right at the CDN (distribution, nearby), so the load-time will be significantly reduced.

According to cdnperf.com, as of now, JSDELIVR is leading in providing CDN services globally. In Asia, the top spot belongs to CDNetworks. AWS's Cloudflare CDN, Azure, and CloudFront also made the top 10.

2.3. Serving

2.3.1. Hosting

Hướng dẫn cách cach tao trang web vệ tinh bằng Weebly - Webvocuc.com

In the age of Cloud Computing, services are mostly put in the Cloud. Choosing a hosting service that suits your website's needs is also an important factor affecting the speed of your website.

  • Small needs → shared hosting.
  • Moderate demand → VPS hosting.
  • Great demand → Dedicated server.

If possible, consult a programmer, system administrator or use the services of some major providers such as Amazon web service, Microsoft Azure, Google Cloud, etc.

2.3.2. Improve server response speed

Google is very fastidious, they think the server response should be less than 200ms. Slow server response can be due to one of the following reasons.

  • Using framework, language is not optimal.
  • The logic is too complicated, which makes the processing slow.
  • Server components take a long time to link.

For example, using a separate web server and database server then adds network latency to web server response time.

How to fix

  • Low level:
    • Use languages and frameworks with good processing speed (don't use Fortran to code web).
    • Simplify code, use knowledge of data structures, algorithms.
    • Websites can use cache (Redis, Memcached), or cache in the database to speed up the response.
  • High level: Build systems with low latency between clusters which is the system administrator's job.

2.3.3. Minimizing resources

When loading the website, the HTML, CSS, JS, Script files will be loaded to display on the browser. Although not too heavy, simplification, not using redundant code in loaded resources will also improve the loading speed of the website.

How to fix.

  • Minify HTML
  • Minify CSS
  • Minify Javascript
  • You can install Google's PageSpeed Module for the webserver (apache, nginx) and let the module take care of everything.
  • Learn to use Gulp.js and write gulp tasks to minify resources.

2.3.4. Optimize image display

Images can be considered as the resource that takes up the most load-time of a website, optimizing the display of images plays an important role in improving a website's load-time.

Nowadays, users use many different devices to access your website. With the layout, you can solve with responsive design, but with photos, the story will be a bit more complicated.

How to fix.

  • Use an image that matches the user's screen size. 
  • Use appropriate image compression methods.
    • GIF, PNG are lossless compression methods, the image after compression will have the same quality as the original image, with a low compression ratio.
    • JPEG is a lossy compression method, the image after compression has a reduced quality compared to the original image, but the compression ratio can be 10 times that of GIF and PNG.
    • Use more modern compression methods like JPEG 2000, JPEG XR, or WebP to speed uploading.

2.3.5. Optimize CSS loading

A web page will be displayed when fully loaded HTML, CSS, JS. If the CSS and JS files are too large, the website will be rendered-blocking, causing the page load speed to increase significantly.

How to fix.

  • Inline small CSS or JS files with the <style> tag in the <head> section. These codes will be loaded with HTML instead of having to load each small file.

Attention: Declare at the top of the page, not in the HTML tag (<p style=...>).

  • Remember that dividing CSS, JavaScript into small files will help the project have a better code structure, but for each file, the browser will spend one more request to your server.

2.3.6. Organize load order

In Chrome's Lighthouse audits, the speed of a website's first-page rendering is one of the most highly rated criteria in the Performance section. For the best user experience, prioritizing displaying the basic content (Above-the-fold (ATF)) of the website is very important.

How to fix.

  • Organize your HTML well, decide what is important to load first (HTML loads in order from top to bottom).
    • Split the CSS into 2 parts, one inline part is for prioritized content to display to speed up loading, one is for the remaining content.
    • If the sidebar and the content are placed side by side, the content should be displayed before the sidebar is displayed.
  • Reduce the number of resources to download.
    • Minify resources.
    • Use CSS instead of images when possible.
    • Use compression.

2.3.7. Remove Javascript causing render-blocking

While the browser is creating the DOM trees, if it encounters a script, it will stop and finish executing that script before continuing to create the DOM. Therefore, JavaScript can be considered as a cause of slow page loading speed.

How to fix.

  • Inline scripts are the same as with CSS, but be sure to inline scripts have fast execution speed and do not cause render-blocking.
  • Using asynchronous (asynchronous) for JavaScript, when encountering a script, the browser will not stop the execution but will continue to parse the HTML and execute the script to avoid rendering-blocking.
  • We even can defer JavaScript, which is more powerful, the scripts will be executed when the page is finished loading.
  • JavaScript loading mechanism.
    • If it is async: the script will be executed in parallel with parse HTML.
    • If there is defer: the script will be executed after parsing the HTML.
    • If not: the script will be executed immediately, then continue to parse the HTML.

2.4. Server → User

2.4.1. Use data compression

Most current browsers support and use gzip for data compression, thanks to fewer data transmitted over the network → faster page loading.

How to fix.

  • Config server allows data to be thrown to reduce, some sample configs for web servers.
    • Apache: Use mod_deflate
    • Nginx: Use ngx_http_gzip_module
  • Compressed data.
Library Size Compressed size Compression ratio
jquery-1.11.0.js 276 KB 82 KB 70%
jquery-1.11.0.min.js 94 KB 33 KB 65%
angular-1.2.15.js 729 KB 182 KB 75%
angular-1.2.15.min.js 101 KB 37 KB 63%
bootstrap-3.1.1.css 118 KB 18 KB 85%
bootstrap-3.1.1.min.css 98 KB 17 KB 83%
foundation-5.css 186 KB 22 KB 88%
foundation-5.min.css 146 KB 18 KB 88%

 

2.4.2. Leverage browser cache

Each time a user visits a certain page, the entire resource of the page will be loaded. That means if your website doesn't use a cache, every page will reload all CSS files, scripts even though it may be exactly the same as the previous page which means that it'll increase load-time.

All browsers have a cache, so take advantage of it to speed up your page load, but absolutely don't use the client machine to mine bitcoins.

How to fix.

  • Use Cache-Control and ETags to set up cache-policy for your site.
  • Use a service worker in a progressive web app to precache resources on first load.

We, "Hachinet Software", are Vietnam-based software services with dedicated, dynamic, enthusiastic teams who always have made efforts to please customers' and partners' satisfaction. We specialize in the following:

  1. Web application (.NETJAVA, PHP, etc.)
  2. Framework (ASP, MVC, AngularJS, Angular6, Node JS, Vue JS)
  3. Mobile application: IOS (Swift, Object C), Android (Kotlin, Android)
  4. System applications (Cobol, ERP, etc.),
  5. New Technology (Blockchain, etc.).

 

If you are considering offshore development, please feel free to contact us.

Here is our contact information.

Account Manager: Quan (Japanese/English available)

Phone number: (+84) 2462 900 388

Email: contact@hachinet.com

Please feel free to contact us for consultation/application by phone.

Click here for more information ▶