Have you ever felt that your WordPress site is slow or heavy ?
It takes a long time to load the page … The response of the management screen is slow …
Many people want to improve the display speed of WordPress so that more users can view the site more comfortably .
- What makes a website created with WordPress so heavy?
- Why should I improve the display speed?
- What kind of measures should I take?
In this article, we will explain these points in an easy-to-understand manner even for beginners.
Is the website heavy? First, let’s investigate the display speed
If you feel your WordPress site is heavy, first check the display speed.
Below are two official Google tools that can measure display speed.
It’s very important to know what’s going on when speeding up your website.
Use these tools to objectively check the display speed of your WordPress site .
PageSpeed Insights
With a tool called PageSpeed Insights , you can measure the speed at which your website is displayed by simply entering the URL .
It is also useful when you want to know a specific improvement method, because it also reports how much speed you can expect to improve.
The measurement result is displayed together with the total score of 100 points.
| Less than 50 points | The site is heavy so let’s improve it as soon as possible |
|---|---|
| 50 points or more and less than 90 points | There is still room for improvement |
| 90 points or more | The display speed is perfect |
Test My Site
A tool called Test My Site is recommended to check the display speed of mobile .
Simply enter the domain part of your website’s URL to measure how long it takes to display your mobile .
The communication line is assumed to be a 4G line (as of December 2020).
This tool can measure the value “FCP”, which represents the time it takes for a website to start appearing in the browser .
| FCP within 1 second | Can be judged to be fast |
|---|---|
| FCP within 2.5 seconds | Can be said to be average |
| FCP is 2.5 seconds or more | It’s slow, so it needs to be improved |
From the diagnosis result screen, you can also receive a detailed report with improvement measures by e-mail.
What is the newly introduced index “Core Web Vital”?
Do you know the index ” Core Web Vitals ” that will be included in Google’s search rankings in 2021 ?
Core web vitals are the latest indicator of page load .
Core Web Vital has three indicators:
- LCP (Largest Contentful Paint): Time until the main part of the content becomes visible on the browser / 2.5 seconds or less is desirable
- FID (First Input Delay): Response time to the user’s first operation on the page / 0.1 seconds or less is desirable
- CLS (Cumulative Layout Shift): An index showing stability by quantifying unexpected layout shifts / 0.1 or less is desirable
You can check these numbers in PageSpeed Insights introduced above.
For pages that do not reach the target value, take early measures.
Disadvantages that occur when the website is heavy
Why should the display speed of websites such as WordPress be improved?
Here, we will explain the disadvantages of leaving the display speed slow .
Bounce rate is high
Websites with slow display speeds have the disadvantage of a high bounce rate .
Bounce rate is the percentage of users who visit a page and leave the website (bounce) before moving to another page .
Even if the user who was doing the research visits your WordPress site
If the page doesn’t show up easily, you’ll probably hit the browser’s Back button before it finishes loading to go to another website.
Not only do you lose the desire to read other pages when your website is heavy, but you also lose the desire to read other pages.
It means that you may not even read the page you visited in the first place.
It becomes difficult to raise the search ranking
Slow websites can affect your search ranking on Google.
Since the “Speed Update” introduced by Google in Japan in July 2018,
Display speed not only in the desktop environment but also in the mobile environment is now taken into consideration as a factor that determines the search ranking.
Speed updates are particularly slow display speeds that lower your search ranking for sites that are detrimental to the user experience.
It has been announced that there is no problem if it is a common sense speed, but the specific numerical value is not quoted.
If your website is perceived by Google as “slow”, your search ranking may drop and it may be difficult for users to find it .
Negative impact on profits
Display speed is a factor that has a great impact on product sales and profits .
In the questionnaire ” How Loading Time AFFECTS YOUR Bottom Line ” about the display speed of the website , the following answers were collected.
- Experienced encountering mobile sites that are too late (73%)
- Expect the page to be viewed within 2 seconds (47%)
- Leave after waiting for 3 seconds or more for reading (40%)
The survey also found that a one-second slower page response could have a 7% drop in conversions, which has a direct negative impact on results.
On the contrary, this also means that if the display speed can be improved, profits can be expected to increase .
Causes of slow WordPress site display
The following points can be considered as the causes of the slow display speed of the WordPress site .
- Large image file
- Influence of CSS and JavaScript
- Insert animation etc.
- Server is heavy
- Impact of plugins
To speed up your website efficiently, it’s important to understand why these affect display speed and then take action.
Large image file
Images are much larger data than text .
Therefore, heavy use of image files within a page can result in extremely slow loading.
It is necessary to pay attention not only to the number of images but also to the file size per image .
For example, photos taken with a digital camera or smartphone are often too high resolution for use on a website.
Using these high resolution images in full size without resizing or cropping will, of course, make WordPress heavier.
Influence of CSS and JavaScript
CSS and JavaScript are a type of text file, so they are not as big as images.
Even so, if the number of files and the file size increase, the display speed will slow down.
Note that the browser will try to read all the information, even if it’s a file you’re not actually using.
Insert animation etc.
Animations such as menus and scrolls are effective ways to enrich your website and enhance the user experience.
However, if you use it too much, WordPress may become heavy .
This is because many animations are driven by JavaScript.
Be aware that heavy use of animations within a single page will increase the number of files and file size and delay loading.
Server is heavy
The display speed of the website also depends on the server you use.
In particular, WordPress is a system that requires higher server capacity than general websites .
The higher the server you use, the faster WordPress will display.
Also, the number of contracted users per server can be an issue.
This is because if the server load of other sites operating on the same shared server increases, your website, which should not be relevant, will slow down.
Impact of plugins
WordPress plugins are a useful tool that can also be used to speed up the display of websites,
If you use many plugins at the same time, WordPress may become heavy .
Also, even if a plugin that you are not actually using is enabled ,
Useless CSS and JavaScript information may be inserted, resulting in a loss of time.
Improvement measures when the WordPress site is slow to display
Here are some suggestions for improving your WordPress site when it’s slow to display.
- Image file compression
- HTML, CSS, JavaScript compression
- Video files are supported by embedding YouTube
- Deliver images in next-generation format
- Use Lazy Road
- Delete unnecessary files
- Leverage your browser’s cache
- Minimize plugins
- Server review
Below, we will introduce each improvement method in detail.
It’s a good idea to try the ones that you know and the ones that you can work on immediately.
Image file compression
By recompressing the image file in the best way for your website, you can reduce the size while maintaining the image quality.
Images are generally compressed with graphic software, but there are several plugins that can be easily compressed on WordPress .
Let me give you two examples.
A plug-in called ” EWWW Image Optimizer ” can compress not only newly uploaded paintings but also images that have already been uploaded.
The plug-in ” Compress JPEG & PNG images ” compresses images with an external web service, so it does not put a load on the server.
Why not use these plugins to compress your existing WordPress images?
HTML, CSS, JavaScript compression
Text files such as HTML, CSS, and JavaScript generally contain unnecessary data such as line breaks and comments.
You can reduce the file size by removing these wasteful data .
For CSS and JavaScript, it is also effective to combine multiple files into one.
As the number of files decreases, the number of times the browser communicates with the server is reduced, which can be expected to improve the display speed.
Rather than manual work, it would be more efficient to use plugins such as ” Autoptimize ” that optimize CSS and Javascript resources .
Video files are supported by embedding YouTube
To reduce the load on the server, it is better to upload the video file to a video service such as YouTube and then set it to be displayed on WordPress.
Depending on the playback time, video files can be tens or hundreds of times larger than images.
If you put the video on the same server as your WordPress, it will be a big load just to communicate.
In order to display YouTube videos on general websites, it needs to be embedded in HTML,
In the case of WordPress, you can embed the video just by operating the management screen .
Deliver images in next-generation format
Another way to speed up WordPress is to display images in the next- generation distribution formats listed below.
- WebP
- JPEG 2000
- JPEG XR
These formats have excellent compression performance, so you can further reduce the file size without significantly reducing the image quality.
However, it’s still a new format, so keep in mind that it supports only a limited number of browsers .
When using next-generation formats, images can be displayed even in unsupported browsers.
Let’s take measures such as utilizing an image compression plug-in such as ” EWWW Image Optimizer “.
Use Lazy Road
Lazy Load is a technology for lazy loading images on websites .
Websites that support lazy loading will initially load only the images that are within the range displayed in the browser.
And since other images are loaded when needed according to scrolling, it is a technique that reduces loading time and communication volume.
Using Lazy Load on a typical website requires knowledge of JavaScript and HTML,
Since WordPress 5.5 or later is equipped with Lazy Load as standard , if you are updating WordPress to the latest state, no special work is required.
Delete unnecessary files
Deleting unnecessary files in WordPress as much as possible will also help speed up your website.
For example, a draft of a post is an unnecessary file.
Check the posts saved as drafts from the post list, and delete them if you no longer use them.
WordPress also has a revision, a feature that automatically saves posts to restore them.
This is a convenient feature because it can be restored even if you accidentally delete a post, but it will continue to be automatically saved forever, so if too much revision data is accumulated, the website will become heavy.
It is recommended to clean the revision regularly by using the plug-in “WP-Optimize”.
Leverage your browser’s cache
The browser has a mechanism called ” cache ” that stores the file once read for a certain period of time .
By using the cache, when you visit a website that you have visited before, the traffic will be reduced and the display will be faster.
The easiest and recommended way to save the cache is to enable a plugin such as ” WP Fastest Chache “.
(* However, cache plugins may cause problems due to compatibility with other plugins and themes, so careful consideration is recommended.)
You can also make improvements within your website to maximize the speed gains of caching .
First, standardize images, CSS, JavaScript, etc. that are used repeatedly in the website, and specify that the same file is used for all pages.
This will use the cache to display the page the next time you visit the website or patrol the site, so you can speed up the display.
Minimize plugins
In WordPress, disabling plugins may reduce the number of CSS and JavaScript.
Reducing the number of files will speed up the display, so try to disable or remove any plugins you aren’t using .
In addition, plug-ins that store information such as access analysis will have a large amount of data as the website is operated for a long period of time.
It is better to set the retention period to about 3 months and delete the remaining unnecessary data.
The compatibility between WordPress and plugins may become worse due to the influence of the new version of WordPress .
In that case, the version of the plug-in may be upgraded, so it is important to always update the version of the plug-in.
Server review
Reviewing your server is an effective way to speed up your website.
Check the performance of basic specifications such as CPU, memory, and storage, and use the most suitable server.
It is also important to have a mechanism that does not slow down the display when the website is heavily accessed.
” ConoHa WING ” is a rental server that boasts the No. 1 in Japan with overwhelming processing speed.
Optimal tuning for WordPress, such as support for PHP7, which is more than twice as fast as conventional PHP5.
It also has a powerful cache mechanism, so web pages load quickly.
Also, since one server is used by multiple users in a general rental server, there are many cases where the speed slows down due to the influence of other websites.
ConoHa WING’s “Reserved Plan” gives you an environment that is unaffected by other users, so you can keep your website fast at all times.
If you want to get a fast and stable server environment, why not consider it?
What if the WordPress administration screen is heavy?
Even if the display speed of the web page is fast, the operation of the WordPress administration screen may become slow .
In this case, you need to take a different approach than the method described so far.
First, make sure that WordPress itself, themes, and plugins are up to date.
There may be a delay in operation due to continued use of older versions.
Next, let’s clear the cache of the browser you use all the time .
In rare cases, problems may occur if an older version of the cache remains.
If that doesn’t work, there may be a problem with the plugin .
Plugins that add their own functionality to the admin screen are especially likely to be the cause.
A plugin called ” P3 (Plugin Performance Profiler) ” is useful when investigating problems related to the management screen .
You can measure the processing time for each plugin to find out what is causing the slowdown.
Summary of causes and countermeasures for slow WordPress display speed
If you leave WordPress displayed at a slow speed,
Bounce rate and search ranking will deteriorate, which may lead to disadvantages such as adverse effects on profits.
Let’s respond as soon as possible.
The cause of slowing down websites created with WordPress may be problems with file size such as images and server performance .
Therefore, in order to improve the display speed of the website, it is effective to reduce the amount of data and the number of files, and to review the server.
