Understand the "speed" that cannot be avoided in web operations

Nice to meet you, this is Aihara from Prime Strategy.

This is sudden, but have you ever heard the name "KUSANAGI"?

　"KUSANAGI" is a virtual machine that runs WordPress and other CMS at high speed. It is developed by Prime Strategy, of which I am a director. Thankfully, in June 2021, six years after its release, the cumulative number of units in operation exceeded 50,000, and many users are using it.

　We, Prime Strategy, have solved, operated and maintained the problems related to "speeding up" and web operation of many customers' websites. I also work as a project manager and consultant to solve customer problems, and recently, I'm in the planning and development team that is developing "KUSANAGI". doing.

In this series of articles, I will share the knowledge related to the Web that I have gained from these experiences from various angles. Since "KUSANAGI" is a company that is particular about "speed", I would like to think about "speed" in web operation in the first article of this series.

What is "speed" in web operation?

When you hear "speed" in web operation, the first thing that comes to mind is "display speed."

　Google's view on display speed says, "53% of visitors will leave if it takes more than 3 seconds to load a mobile site", "When page loading speed increases from 1 second to 5 seconds, mobile site visitors Bounce rate increases by 90%”.

When you look at it again, it's a scary number.

　From the operator's point of view, I'd like to think, "Since it's necessary content, why don't you wait for a while?", but unfortunately users aren't that patient. I'm sure everyone has once or twice had the experience of quietly closing a page that has been slow to display.

No matter how good content or products are, they will not reach users. In order to avoid such a situation, it is very important to stick to the "speed" of the display.

There is an index for "speed"

Without some kind of standard, "speed" cannot be compared. There is also an index for the "speed" of the web, and it changes with the times.

Google has shown the importance of improving the user experience by speeding up by presenting web display speed indicators and incorporating them into search ranking factors.

Google's changing view on speed

　From 2014 to 2017, when "always-on SSL" became a hot topic, it was an era of "safety over speed". For mobile devices, emphasis was placed on being able to view the site properly first. In order to ensure the basic user experience, it seems that there was a strong will to say that sites that do not take security into account or that cannot be browsed properly will not even be put into the arena in the first place.

Then came the 2018 Speed ​​Update. Mobile page loading “speed” is a ranking factor. At this stage, the content was to lower the evaluation of really slow sites. From a global perspective, mobile lines were still weak at that time, so it can be said that the minimum speed was added to the standard of “properly browsing”. Although the affected targets were limited, it was an update that made us realize that "speed" is important for user experience.

　Mobile networks will evolve from 3G to 4G and 5G, and the number of sites that use large images and videos to create rich expressions will increase. The bidding mechanism called header bidding for advertisements and the display of related articles using APIs have become commonplace.

　In that case, the speed of rendering on the network and browser becomes important. Google's PageSpeed ​​Insights score, one of the page display speed indicators, has also been updated to change the score distribution.

In the midst of this trend, "Core Web Vitals", which has become a hot topic since June 2021 and has become a ranking index, was proposed.

From Google Developers: Web Vitals

"Core Web Vitals"

Speed: LCP (Largest Contentful Paint) Responsiveness: FID (First Input Delay) Visual Stability: CLS (Cumulative Layout Shift)

It is an index that evaluates three important factors for the user experience.

　In LCP and FID, "time" is important, but in CLS, a slightly different element than the so-called "speed" of layout deviation is evaluated.

　There may be many people who are worried about measures because the report is displayed as a "main index on the web" in Google's search console.

　And, don't forget that "Core Web Vitals" is part of the "Page Experience" ranking index.

From when the page experience was introduced to Google Search

　"Page Experience" incorporates "Core Web Vitals" into the existing indicators of "Mobile Friendly", "HTTP Security", and "Guidelines for Intrusive Interstitials".

When you understand the changes in the indicators presented by Google, you can see that safe and fast display is the basics, and the trend is to further enrich the user experience.

　The index of "speed" will change with the times, so it is important to cherish accumulation and flexibly implement speed-up measures suitable for each occasion.

Basic concept of web acceleration

　When actually working on web acceleration, the web display step is divided into the "backend" of the server application and "network rendering". and it will be easier to find the problem. The method of improvement is different for each, so it is important to first find which one has the most bottlenecks.

Disassembled view of the web

　If the server slows down or the display speed is delayed due to the concentration of access, there is a problem with the backend. There is often some problem with rendering.

The basis of speeding up the backend is to reduce processing

　Process as much as possible to speed up the backend Consider reducing the

(1) Improve processing performance Change the server to one with a higher frequency. If you use the cloud, you can easily change the specifications of the server, so if you ignore the cost, it is effective as a measure that can be done relatively safely and quickly.

(2) Using cache There are various types of cache, from those that use external tools like CDNs to page caches. It is a highly effective measure because it greatly reduces the number of backend processes, but it has advantages and disadvantages, so it is necessary to use it wisely.

(3) Replace slow processing with fast processing Find the bottleneck and replace the processing so that I/O does not change. Although it is not a symptomatic treatment but a fundamental countermeasure, it requires knowledge, experience and time, so it will be a decision based on the balance between cost and effect.

The basics of speeding up the network and rendering are weight reduction and delay

　In order to speed up the network and rendering, consider thoroughly reducing weight and delaying unnecessary resources.

①Lightening Compress resources such as images, CSS, and JS to make them lighter. Regarding images, it is recommended not only to compress them, but also to convert them to next-generation formats.

②Delay Delay the loading of resources that are not necessary for displaying the first view. A typical example is Lazy load, which lazily loads images according to scrolling. Lazy load was mainly implemented using JavaScript, but native lazy load support for browsers has progressed, and WordPress has also supported native lazy load since 5.5. (Specific methods and examples of speeding up will be covered in subsequent articles.)

What is ``KUSANAGI'' that easily achieves high speed?

So far, we have talked about what "speed" is, why it is necessary, and how to speed it up. .

　We know that "fast" is important, but we often hear about worries such as not knowing where to start, or putting things off because there are too many other things to do. It would be great if there was something that could speed things up just by using it without thinking too much about it. Therefore, we packed all the speed-enhancing measures (tuning) that we have been doing for our customers, and made it open source so that everyone can use it. .

　"KUSANAGI" makes WordPress 10 to 15 times faster than the standard environment. It is a big feature that it is fast without using cache because it has been thoroughly tuned. Of course, it also has a cache function. You can speed things up even more by making good use of the two types of caches. KUSANAGI also has a Premium Edition equipped with a high-speed engine (WEXAL Page Speed ​​Technology) that optimizes AI resources and rendering.

　Speeding up is very important, but the index changes according to the background of the times, and it is difficult to keep up with it. One idea might be to leave things up to tools and AI and create an environment where people can focus on content and other areas that only humans can do.

"KUSANAGI" can be installed from major clouds in Japan and overseas, so please take a look if you are interested.

■ Related sites