Last Updated Date: 2025/1/10
- Font settings are now more detailed.
- A new measure, "Cron settings," has been added.
Page speed is an important factor in SEO. Google has also officially announced that it uses "page loading speed" as a ranking signal, and that slow sites may be negatively affected in search rankings.
Furthermore, slow sites are more likely to have high user abandonment rates, which can result in lower page views and conversions.
*Approximately 3% of users will abandon a site if it takes longer than 40 seconds to load.
Here, I will be improving the speed of WordPress in my environment (2024 new X Server), with the ultimate goal of achieving a score of over 80 on PageSpeed Insights, and I would like to share the steps I took to get there.
This is a measure mainly for the X server, but I think that there are some parts that can be covered by functions and plugins for other servers, so please try them. I will explain the minimum hurdle for getting a Page Speed Insight score of 60 or more.
The results show that the smartphone score improved from 52 to 60 to 77. The PC score improved from 74 to 91 to 88.
"First contentful paint" improved from 3.6 seconds to 3 seconds on smartphone.
This time I would like to tell you about the details of these measures.
- People with PageSpeed Insights scores in the 40s to 50s
- People who feel the site is a little slow
- Those who want to have a positive impact on Google search rankings
The beginning of things
It all started trivially.
The X server will be a new server in 2024, and it will be about three times faster than the previous one. I heard that existing users can upgrade to the new server for free, so I immediately migrated to the new server.
So I excitedly ran a test with PageSpeed Insight and here are the results:
Hmm... this... hasn't changed at all⤵︎ ⤵︎ ⤵︎
The numbers were disappointing. I had high expectations, so the shock was quite big.
As a gadget blogger, I would like to see a bit more speed evaluation...
So we wondered if there were any other measures we could implement, and after some research, we came up with the current measure.
Specific measures
I have compiled a list below of specific measures that can be taken, with reference to various websites.
- Delete unnecessary plugins
- Caching Optimization (Server Plugins)
- Image Compression and Optimization
- HTML/CSS/JS code optimization
- Lazy Loading of Images and Videos
- Turn on "XPageSpeed" on the X server
- Turn on "X Acceleration" on the X server
- Update the PHP version on your server
- Server & Database Overhaul
- Preloading Settings
- Lighten the font
- Cron settings *Newly added on January 1th
Since items 2 to 5 can be handled by the X server function "XPageSpeed," we will use the same function for item 6.
For those who are not using the X server, we will introduce plugins later.
I will try to put these into practice one by one.
We will do our best to share as many details as possible about our initiatives, so please keep an eye out.
Part 1: Clean up unnecessary plugins
One of the reasons for this is that too many plugins can slow down your site's loading time, cause conflicts, and double the processing time.
First, delete any plugins you haven't used for a long time. It is more effective to delete them rather than disable them.
Even if you disable a plugin, the configuration files remain, which seems to affect the processing. So, delete it. Also, narrow down the plugins that have the same purpose to one and delete them. If there are plugins that you really want to delete but use occasionally, it's fine to leave them alive.
Depending on the plugin, deleting it may cause the display to be distorted, so be sure to use the backup function of your rental server to back up your site data.
Part 2. Setting up "XPageSpeed"
Configure "XPageSpeed", the X server's unique speed-up function.
Log in to your X server's server panel and click on the "XpageSpeed" link.
Then, check all the boxes. *Please note that delayed loading of Javascript may cause screen corruption depending on your environment, so if it is on and you experience problems, turn it off.
If you don't have an X server, you can use a plugin.
- W3 Total Cache...This is a multi-functional plugin that includes caching functionality, CSS and JavaScript compression, and lazy loading of images.
- Autoptimize...A free plugin that supports compression and merging of CSS and JavaScript, as well as delayed loading of images.
↑Please use one of the above plugins and set it up.
Minify HTML/CSS/JS
・Delete unnecessary spaces and line breaks to reduce data volume.
- Lighter requests contribute to improved page display speed.
Image optimization (compression/WebP)
- Automatically compresses and converts JPEG and PNG to reduce file size.
- Speeds up overall page loading by delivering content in WebP format to compatible browsers.
Lazy Load feature (possibly)
- A mechanism is applied on the server side that does not load images until the user scrolls.
- Reduced data traffic during initial display for smoother display.
Browser cache settings
- XPageSpeed may be configured to reduce reloading on the browser side, such as by giving resources a longer expiration time.
-Cache plugins also often have the ability to control browser caching using HTTP headers.
As mentioned above, everything that can be done with a cache plugin can also be done with the X Server's "XPageSpeed" function, so there is less need to worry about malfunctions due to plugin installation.
Tip 3. Turn on the "X Accelerator" function
X Acceleratoris provided by the X server itself.Server-side acceleration featuresEven for dynamic sites, including WordPress, the page display speed is increased by statically caching and delivering the data inside the server. Below, we will explain the overview of X Accelerator and its main functions and benefits.
Dynamic cache (staticization)
Pages that use PHP, such as WordPress, are cached as HTML on the server in advance, and from the next time onwards, database queries are skipped for high-speed delivery.
Browser cache settings
For static resources such as images, CSS, and JavaScriptProper caching headersBy adding this and caching it in the user's browser for a long period of time, loading will be faster when the user revisits the page.
Gzip compression (or Brotli compression)
- Compresses communication with the browser, reducing data volume and speeding up page display.
- Brotli compression may be supported depending on the version of X Accelerator and server settings.
Page generation speed improved
- Dynamic pages are cached in advance, which significantly reduces the load of running PHP on the server side and the number of database queries.
- It is particularly effective on sites with high traffic or WordPress sites that use a large number of plugins.
Easy to install with no WordPress configuration required
X Accelerator is a server-side function, so you can use it without having to install or configure the WordPress admin panel or specific plugins.Activate via button operation from the server panelIt's easy to do.
No additional charge required
・X Accelerator is a standard feature of Xserver, so there is no additional cost.
・Depending on the plan, you may be able to choose the version (such as "Ver.1" or "Ver.2"), so you can use it in the version that suits your plan.
Can be used in conjunction with other cache functions
In addition to server-side caching, supplementing with detailed settings on the CDN and WordPress plugin side (DB cache, page-level exclusion settings, etc.) will enable even faster and more flexible operation.
Tip 4. Update your PHP version on your server
PHP speed improves with each new release, so I recommend checking it regularly and always keeping it one version before the latest version. I think this function is also available on rental servers other than X Server, so please check. *In rare cases, the latest version may cause the screen to break, so please switch while keeping an eye on the situation. I am trying it with the latest version, 8.3.10 lol
Interim results
Now let's check how much faster it is.
The results on PC have improved significantly! Score increased from 74 to 91. I think this is already the limit. It's amazing to get over 90 with just these measures.
The smartphone performance has increased from 52 to 60. It's a modest increase, but it's definitely a numerical increase. How far will the score increase with future measures?
By the way, when you measure the speed with PageSpeed Insights, please clear your browser cache before doing so. It would be ideal if you could clear the server cache as well.
Part 5: Reviewing the server and database
Here we would like to further review the server functions and database in order to aim for further improvements in speed.
Increase PHP memory limit
Why is this important?
If you have many plugins, or use large images or a multi-functional theme, memory shortages can cause errors and slowdowns. Ensuring sufficient memory limits will make WordPress run more stably.
Xserver's Server Panel
You may be able to specify a memory limit in your "PHP settings" or "PHP.ini settings".
In my environment, the "php.ini settings" were in the X server administration panel, so I expanded the memory limit from 1GB to 10GB. The maximum capacity is 1536GB (1.5TB), so there is still plenty of room. (You can check the maximum memory capacity in the server information in the server panel.)
Setting in wp-config.php
- Located in a different location from the theme file (directly under the WordPress root) wp-config.php Open it in FTP or a file manager.
-define( 'WP_MEMORY_LIMIT', '256M' ); Add statements such as the above to increase the memory limit.
Set in php.ini or .htaccess
Depends on the server and plan php.ini , .htaccess To
php_value memory_limit 256M
(For Xserver, the most common method is to enter values directly into the "php.ini settings" from the server panel.)
If you increase it too much, it will strain the resources of the entire server.Please adjust as necessary. *Check the limit value in the server information of the rental server.
Cleaning the database (MySQL)
Why is this important?
WordPress is used for posts, comments, option settings, etc.MySQL DatabaseIt is stored in. When article revisions, spam comments, and old temporary data accumulate, the database becomes bloated and slows down the speed.
Step 1: Plug-in routine cleaning
- Introduced WP-Optimize, Advanced Database Cleaner, WP-Sweep, etc.
- Delete unnecessary revisions and spam comments, and optimize junk data.
- It is convenient to set up a regular automatic cleaning schedule (e.g. once a week).
*The author used "Advanced Database Cleaner." Check the data you want to delete by referring to the image above, and click "Bulk Operations" → "Clean" below to delete it.
Step 2: Manual optimization in phpMyAdmin
- In the Xserver server panel, go to the "phpMyAdmin" or "MySQL Settings" screen.
- Select the target database and check the table you want to "optimize".
- Run the "Optimize Table" operation to eliminate fragmentation.
Step 6. Install WordPress' "W3 Total Cache"
This depends on the server, but for sites with many accesses,Object caches such as Redis and MemcachedYou can speed it up even further by using
This is a feature that you may not be familiar with, but if you are interested, please look into it. The condition is that the server supports it, and it may be supported with higher-level server plans.
Also, if you install a cache plugin such as "W3 Total Cache" into WordPress, you can use the cache function that XPageSpeed could not fully complement, and you can aim for a synergistic speed increase.
Below are my settings for this plugin for reference.
- Page cache/enabled ON
Page cache method/disk: extended
Compression/Enable OFF
Settings in the "Advanced Settings" tab under the "Page Cache" item.
Settings in the "Compression" section, "Advanced Settings" tab. Uncheck all.
The settings are now complete.
PS/After that, I stopped using the plugin because a display error occurred on my iPhone.
※Turning off XPageSpeed didn't help either (cry)
I hope the rest of the measures produce results...
7. Preloading settings
Preloading SettingsBy predicting the user's next action and loading resources in advance,Greatly improves perceived speedIt's a technique to make it happen.
For example, by pre-loading CSS, JavaScript, etc. required when moving to the next page, the page will display faster the moment the user transitions to the next page.
Preloading Code
Add the following code to your child theme:functions.phpPlease add the code to
The code below is set to preload two CSS and two JS files. Please change the CSS and JS file names and paths to your own.
function add_preload_links() {
// CSS files to preload
echo ' ' . "\n";
echo ' ' . "\n";
// JS files to preload
echo ' ' . "\n";
echo ' ' . "\n";
}
add_action('wp_head', 'add_preload_links');
Code to use the preloaded files
Any preloaded CSS or JS files will need to be queued and loaded by WordPress as normal.
The following code is also in the child theme.functions.phpPlease write it in. *Please use your own file name and path.
function enqueue_theme_scripts() {
// Load the CSS file
wp_enqueue_style('customizer-style', get_template_directory_uri() . '/css/customizer-style.min.css', array(), '1.0.0', 'all');
wp_enqueue_style('slick-style', get_template_directory_uri() . '/css/slick.min.css', array(), '1.0.0', 'all');
// Load the JS file
wp_enqueue_script('slick-script', get_template_directory_uri() . '/js/slick.min.js', array('jquery'), '1.0.0', true);
wp_enqueue_script('lozad-script', get_template_directory_uri() . '/js/lozad.min.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_theme_scripts');
This completes the file preloading.
Now, let's move on to the last measure.
Tip 8. Lighten your fonts
As for fonts, they take a surprisingly long time to load (the font size is about 3MB in TTF format), so they are considered essential for weight reduction measures.However, if you are an X server user, the web fonts provided by the plug-in "TypeSquare" are designed to load and display only the necessary character files, so they can be displayed quickly. So I'm already benefiting from this. I actually use a font called "Morisawa Shin Gothic" that I'm used to using in advertising designs.
If you are using a modern browser, the optimal solution is to use woff2 fonts, and I have switched from TypeSquare to them.
To use WOFF2 fonts in WordPress,
1. Get fonts
※example:https://fonts.google.com/specimen/M+PLUS+1p
*If you only have TTF available,SiteConvert to woff2 with
2. Upload the font to a rental server
3. Specify with CSS
The following steps are required.
Prepare WOFF2 font file
The Woff2 font file to use (e.g. MPLUS1p-Regular.woff2) and (e.g. MPLUS1p-Bold.woff2).
Upload your font files using the WordPress Media Library or FTP.
- Recommended upload directory:
/wp-content/themes/your-theme/fonts/ - Example URL for font file:
https://your-site.com/wp-content/themes/your-theme/fonts/custom-font.woff2
The above is a sample code, so please change it to your own server path and URL.
When you're ready, proceed to the next step.
Here is the CSS for using the font:
Specifying fonts with CSS
CSS@font-faceUse rules to load WOFF2 fonts.
When writing in additional CSS
- In the WordPress admin panel, go to "Appearance" → "Customize" → "Additional CSS".
- Add the following code. *The file path can be an address starting with http.
/* Load font */
@ font-face {
font-family: 'MPLUS1p';
src: url('/fonts/MPLUS1p-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal
}
@ font-face {
font-family: 'MPLUS1p';
src: url('/fonts/MPLUS1p-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal
}
body {
font-family: 'MPLUS1p', sans-serif;
font-weight: 400; /* Regular */
}
h1, h2, h3, h4, h5, h6 {
font-family: 'MPLUS1p', sans-serif;
font-weight: 700; /* Bold */
}
Check font application
You can check if your fonts are loaded and where they are applied using your browser's developer tools (F12). Open your site and check that the fonts are applied correctly.
You can also convert TTF files to woff2 files, which may be lighter in some cases.
Font conversion website
The woff2 format is a font format compressed for the web, and various fonts are distributed in this format. Below are some representative Japanese fonts that are widely used in the woff2 format.
1. Noto Sans JP
- Features: A font jointly developed by Google and Adobe. Modern, easy to read, and suitable for a wide range of uses.
- Use: Websites, apps, presentation materials, etc.
- Style: There are many weights to choose from, from thin to bold.
- 利 点: It supports multiple languages, with a harmonious English and Japanese design.
2. Noto Serif JP
- Features: A serif version of Noto Sans JP. It gives a classic and calm impression.
- Use: Ideal for reports, official documents, and website reading articles.
- Style: A design suitable for paragraph text.
3. M PLUS Rounded 1c
- Features: The rounded design creates a friendly atmosphere.
- Use: Educational, children's, and user-friendly web design.
- 利 点: Gives a light and friendly impression.
4. Kosugi / Kosugi Maru
- Features:
- Kosugi: Simple Gothic font for high visibility.
- Kosugi Maru: Rounded gothic font gives a soft impression.
- Use: General website, UI design, blog.
5. Zen Kaku Gothic / Zen Maru Gothic
- Features: A modern Japanese font that provides a good balance between visibility and design.
- Use: Modern design for websites and apps.
- 利 点: Supports multiple weights, making it versatile and easy to use.
6. Source Han Sans
- Features: A high-quality font that supports Japanese, jointly developed by Adobe and Google.
- Use: For professional situations and multilingual projects.
- 利 点: Free for commercial use. Both readability and design are achieved.
7. Rounded M+
- Features: A rounded Gothic version of the M+ font. It has a soft feel.
- Use: Casual web design, education and entertainment.
Find your favorite font and make your website lighter.
As mentioned at the beginning, even if it is a TTF font,This siteYou can convert it to a woff2 font using
What is woff2 font?
WOFF2 is a font file format that is a further compression of the Web Open Font Format (WOFF). It was developed as a way to reduce the file size of web fonts, making them load faster and using less bandwidth. WOFF2 uses a compression algorithm called Brotli to compress the font data, resulting in an equivalent WOFF It can have a significantly smaller file size than a font, and is supported by most modern web browsers, including Chrome, Firefox, Safari, Opera, and Edge (version 14 and newer).
Quote:FILEFORMAT
Well, that concludes our speed-up measures.
I'd like to see how much faster it is.
Final result
It's exciting and thrilling, but don't get your hopes up too high.
Wow! The smartphone score has improved significantly! I'm very impressed because it was originally 52 and is now 77. The PC score dropped from 91 to 88, but I guess this is within the margin of error. Since it's still maintaining a fairly high score, I'll retire the PC.
Although it is a smartphone, it is unfortunate that we could not achieve a score of 80, but we still achieved a decent score of 77, so I think the measures were effective to a certain extent. However, the average LCP was 4.7 seconds, so there is still room for improvement. *LCP (Largest Contentful Paint) refers to the time it takes for the main content of the page to load.
I'm glad you all got good scores too.
9. Additional measures: Cron settings
This is about the X server (I think other servers have the same function), but you can improve the speed by tweaking the "Cron settings" item a bit.
There is a good chance that this function is available on other servers besides the X server, so please give it a try.
In my environment, the page speed insight improved by 8 points.
How the Default WordPress Cron Works
- By default, WordPress uses a system called “WP-Cron” to manage scheduled posts, image processing, automatic plugin updates, and more.
- However, because this mechanism operates "every time the site is accessed," it generates extra load regardless of the number of accesses.
Load Effect
- In the case of personal blogs, unnecessary verification processes may be performed even if the number of visitors is low.
- This load can accumulate and impact the overall speed of your site, especially in shared server environments like X servers.
Range of Effect
- By disabling "WP-Cron" and managing the schedule with the "Cron Settings" on the X server, you can eliminate unnecessary processing and expect to improve display speed and server resource efficiency.
- Even blogs with low traffic can benefit from reducing resource waste.
Steps for setting up Cron on your X server
Disable WP-Cron
WordPresswp-config.phpDownload the file from the FTP server and add the following code using a text editor such as BBEdit.
define('DISABLE_WP_CRON', true);
The code should be inserted above the code that says "/* That's all, stop editing! Happy blogging. */".
Once you have finished entering the information, upload the file to the FTP server and overwrite it.
Accessing the X server and setting Cron
Please note that this explanation is for the X server. I don't think it will be significantly different for other servers, so please use it as a reference.
Log in to the X Server panel.
- From the Server panel menu "Cron Settings" Choose.
- Open the "Add Cron setting" screen.
Minutes, hours, date, month, day of the week
- Set the execution interval.
- Example: Executing every hour
- point:
0 - Time: Blank (or
*） - Date: Blank (or
*） - Month: Blank (or
*） - Day of the week: blank (or
*）
*" means "all values." - point:
Command column
- Enter the following command (adjust the paths to suit your environment):
Enter your server ID as the username and your site's domain name as the domain name (e.g. mainoriti.com for my site). - Once you have finished entering the information, click "Proceed to confirmation screen" to complete the process.
php /home/username/domainname/public_html/wp-cron.php > /dev/null 2>&1
Please check if your site is displayed correctly. If there are no problems, measure the speed with Page Speed Insights and you're done.
Summary
This time we tried to speed up the site. Until now we hadn't taken any large-scale measures and had just been doing it with little tricks, so I'm very happy that we saw real results this time.
But I think I can still aim higher, so I'd like to try introducing a CDN in the future. (I'm not sure if a CDN would be effective for a site like ours though...) I'll update again when I do.
Aim for a score of over 90 with Page Speed Insights!
![The magic of "fragrant"... How to use "solid perfume" in a chic and fun way for both men and women [Review]](https://mainoriti.com/wp-content/uploads/2025/02/IMG_0065-3-485x273.webp)
