optimize your website, Programmers after developing a website, the website runs smoothly, without bugs, it is considered completed. Is the story of 2018 so simple? Why we need to optimize the website? According to figures provided by google
- User facts:
o 47% of users want a website to load in less than 2 seconds and 40% will give up if the site takes more than 3 seconds to load.
o 79% of users will not revisit a website with poor performance.
o 52% of users believe that fast loading websites directly affect their loyalty.
o 44% of users complain about web speed to their friends.
o 1 second increase in load-time reduces user satisfaction by 16%.
- Website facts:
o 79% are above 1MB, 53% are over 2MB and 23% are above 4MB.
o Mobile load-time has decreased by 7 seconds but it still takes about 15 seconds, 53% of websites take more than 3 seconds to display.
o Mobile traffic accounts for more than half of the web traffic worldwide, but the conversion rate to make profit is lower on computer devices.
→ speed equals revenue
o 70% landing page takes more than 5 seconds to display.
o Google uses a deep neural network with 90% accuracy to produce the following result:
reduce load-time by 10 seconds, the proportion of users who continue to use the website increases by 123%
on the contrary, the number of elements on the site increased from 400 to 6000, the conversion rate into profits decreased by 95%
→ faster is better and less is more
o Practical tests:
Walmart:
Every 1 second load-time decreases, the order quantity increases by 2%
Every 100ms load-time decreases, profits increase by 1%
Order rate can be reduced by 25% with every 1 second increase in load-time.
Amazon A / B Test:
100 Only 100ms load-time can reduce profits significantly.
optimize your website – Google
Traffic decreases by 20% if the load-time increases by 0.5 seconds
Google has ranked websites according to mobile-first index, loading speed on mobile will directly affect index results on Google search engine.
SPEED DOES MATTER
Load-time increased by 1 second:
- 11% reduction in pageviews
- 16% off customer satisfaction
- 7% reduction in profits
In Vietnam, Mobile World website is assigned KPI display under 3000ms, and tiki and especially sendo does not seem to care much about this. You can easily see where the user experience is better, where people buy more things.
Anyway, in the future, websites will definitely have to pay attention to optimize web service. This is both an opportunity and a challenge for developers. Do all of these reasons make you sit at a table and spend time making a website that runs 1 or 2 seconds faster?
Long story short:
Get your site up and running on mobile devices and start thinking in the direction of mobile-first.
Let’s take a look back at the process of entering a user’s website in one simple flow:
- Users enter the web address → navigate to the Internet
- DNS server (Domain Name Service server) converts from URL into IP address → points to the server with the required IP
- server receives request, process request
- Return the response to the user → the browser displays the results.
The good news is that we can optimize the site at every step while the bad news is that at each step, the improvement time can only be measured in milliseconds (1/1000 second). Should you really care?
- If your website is a personal blog, it is not worth making money, having <50 visitors at the same time (like this blog) then the optimization does not bring much value.
- You make money from your website and have on average several thousand or several hundred thousand visits at the same time. In addition to profit reasons, if not optimize the web service, the server may be overloaded due to customer requests → bottle neck → load-time stretching, even out of service. Instead of buying a bigger server, spend some time organizing and redesigning the service to deliver consistent performance at a cheaper cost.
How to do it?
- First, let’s see what your website is up to with Google’s Pagespeed tool
- Refer to google rules for speeding up page loading:
o Restrict redirects on landing pages
o Enable compression
o Improve server response speed
o Take advantage of browser cache
o Minimize resources
o Optimize image display
o Optimize the loading of CSS
o Prioritize the content that needs to be displayed first
o Removing Javascript that causes render-blocking
After all, Google is the world’s largest search engine, making everything by their standards certainly not a bad choice.
To be more complete, I will add some methods and divide them into 4 categories corresponding to each stage when users access the website.
Type 1: optimize your website – User → Internet
This is completely out of our reach, but it is still possible to ensure that customers have a good enough experience with extremely slow network speeds by building progressive web apps and using service-workers for your website.
Type 2: Internet → Server
Use the DNS server
The transfer from URL to the IP server address is done by the DNS server, and it is just a computer, different slow. Hosted services will usually come with a DNS provider, but speeds may vary → page load speed is also dependent.
How to fix:
- To save about 20 to 30ms of load-time, you should consider switching to the DNS server of some other provider.
- Some DNS service providers (like cloudflare) allow you to use DNS services for free, but find out which geographic areas your website or most frequently use DNS have the fastest speed.
Use the CDN
Content Delivery Network (CDN) is a system of edge servers located at different geographical locations to be able to transfer content from one origin at a distance far more quickly thanks to cache mechanism.
Instead of going to the server (origin, remote) to get resources, users can get right at the CDN (distribution, near), so the load-time will be significantly reduced.
To better understand the benefits of using CDN, you can read extremely helpful article by sempai Dinh Hoang Long on CDN.
According to cdnperf.com, JSDELIVR is leading the way in providing CDN services globally. In Asia, the No. 1 position goes to CDNetworks. AWS’s Cloudflare CDN, Azure and CloudFront are also in the top 10.
Cloud CDN (of google) that I am using in a certain position does not appear in the rankings
Type 3: optimize your website – Server
- Hosting
In the era of cloud computing, services were mostly brought to the cloud. Choosing a hosting service that suits the needs of the website is also an important factor that affects the speed of the 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 large providers such as Amazon web service, Microsoft Azure, Google cloud, etc.
qmau.me is being hosted with $ 300 free of Google cloud VPS, average CPU about 1%
- Improve server response speed
Google is very fastidious, they think the server’s response should be less than 200ms. The server’s slow response may be due to one of the following reasons:
- Using framework, language is not optimal
- Logic is too complex → processing is slow
- Server components take a long time to link
For example, using a separate web server and database server → takes additional network latency at the web server response time.
- The network is slow (objective reasons, dropped hands).
How to fix:
- Low level:
o Use languages and frameworks that have good processing speed (do not use fortran to code web).
o Simplify code, use knowledge about data structures, algorithms
o With websites, you can use cache (redis, memcached), cache in the database to speed up the response (optimizing cache memory is another story)
- High level:
o Building a system with low latency between clusters → the job of a system administrator.
- Minimize resources
When loading web pages, html, css, js, script files will be loaded to display in the browser. Although it is not too heavy, simplifying, not using excess code in the loaded resources will also improve the loading speed for the site.
How to fix:
- Minify HTML
- Minify CSS
- Minify Javascript
- You can install Google’s PageSpeed Module for web server (apache, nginx) and everything else, let module handle it.
- Learn to use gulp and write gulp task for minify resources (worth it).
- Optimize image display
optimize your website, Images can be considered as the most time-consuming resource of a website, optimizing the display of images plays an important role in improving the load-time of a website.
Today users use a lot of different devices to be able to access your site. With layouts you can deal with responsive design, with story images a bit more complicated.
How to fix:
- Use images that match the user’s screen size. Refer to best practices for displaying responsive images to save resources.
- Use appropriate image compression methods:
o GIF, PNG are lossless compression methods, images after compression will have the same quality as the original image, low compression ratio.
o JPEG is lossy compression method, image quality after compression is reduced compared to the original image, but the compression ratio can be 10 times higher than GIF and PNG.
o Use more modern compression methods such as JPEG 2000, JPEG XR or WebP to increase loading speed.
- Optimize the loading of CSS
optimize your website A website will be displayed when fully loaded with html, css, js. If the css and js file is too large, the site will render-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. ps: declare at the top of the page, not in the html tag (<p style = …>) nhé
- Remember that dividing css, javascript into small files will help the project have better code structure, but for each file, the browser will take 1 more request to your server, sometimes reading code to see css or inline script Do not rush to swear at the idiot
- Organize the load order
In Lighthouse audits of Chrome, the speed of displaying the first page of a website is one of the criteria that are highly appreciated in the Performance section. For the best user experience, it is important to prioritize the display of the basic content (above-the-fold – ATF) of the website.
How to fix:
- Organize html well, decide which components are important to load first (html loads in order from top to bottom)
o Divide the css into 2 parts, 1 part inline for the priority content displayed to speed up the loading, one part for the remaining content.
o If the sidebar and content are placed in parallel, prioritize displaying the content before displaying the sidebar
- Reduce the amount of resources to download by:
o Minify resources
o Use css instead of images when possible
o Use compression
- Use lazy load for resources that do not need to be displayed (eg images not already in the frame)
- Removing Javascript that causes render-blocking
While the browser creates the DOM trees, if it encounters a script, it will stop and execute the script before continuing to create the DOM. Therefore, javascript can be considered as a cause of slow page load speed.
How to fix:
- Inline scripts are the same as they do with css, but make sure that the inline scripts are fast execution speed and do not cause render-blocking.
- Use asynchronous (asynchronous) for javascript, when encountering scripts, the browser will not stop executing but will continue to parse HTML and execute scripts → avoid rendering-blocking.
- If we want something that is more powerful, we can defer javascript, scripts will be executed when the page has finished loading
- The mechanism for loading javascript:
o If there is async: the script will be executed in parallel with html parse.
o If defer: script will be executed after html parse.
o If not: the script will be executed immediately, then continue to parse the html.
- optimize your website – Restrict redirect on landing page
Redirecting users on the landing page will bring a bad experience and increase the load time of the page. For example:
- example.com uses responsive design that does not require redirects, is fast and is optimal.
- example.com → m.example.com/home – will take time for multi-roundtrip.
- example.com → www.example.com → m.example.com – mobile users will have a bad experience due to the loading time being too long.
How to fix:
- Learn how to design a responsive interface and limit redirects.
- If forced to redirect, refer to google instructions.
Type 4: Server → User
- optimize your website – Use data compression
Most current browsers support and use gzip for data compression, thanks to the less amount of data transmitted over the network → increasing page loading speed.
How to fix:
- Config server allows data to be thrown in order to reduce, some configuration templates for web servers:
o Apache: Use mod_deflate
o Nginx: Use ngx_http_gzip_module
- Data is compressed
| 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% |
- optimize your website – Take advantage of browser cache
Every time a user accesses a certain page, all resources of the page will be loaded. That means that if your website does not use cache, each page load will reload all css files, scripts even though it may be identical to the previous page → increase load-time.
All browsers have cache so please take advantage of it to speed up your page loading, but absolutely do not use client machines to dig bitcoins.
How to fix:
- Use Cache-Control and ETags to set cache-policy for your website.
- Use a service-worker in the progressive web app to precache resources on the first load.
Challenge
- Lighthouse audits of qmau.me reached 100.
- Learn about AMP – Google’s new technology to load pages quickly.
- KPI load-time qmau.me <500ms
- Write an article specifying all of the above knowledge.
TL; DR
- Load-time of the website greatly affects user experience, which also affects profits, position on google and return rate.
- Website load-time optimization process has many steps, requires a lot of effort but is worth attention.
- Keep everything simple at first, try to develop a web application with a mind, do not use anything that you do not need, mobile-first mindset and be as pure as possible.
Reference
- Google pagespeed
- Speed up your website
- Google webspeed
- Use CDN to offload the Server
- Find out how you stack up to new industry benchmarks for mobile page speed
Good luck, see you soon !