PageSpeed Insightsと格闘！サイトの表示速度を改善するために試してきたこと

Hello, everyone! I'm Molda Molki!
PageSpeed Insights (PSI for short) is a Google tool that measures a website's loading speed and other aspects of the user experience.

I also use a tool called Google Site Kit to check my website's traffic and other statistics. I've spent quite a bit of time trying to keep my website running smoothly and improve its loading speed. 😅

Today, I'd like to look back at some of the things I've tried so far.

I hope my experience will be helpful to anyone who runs a website and wants to improve its loading speed.

I'm not an expert in web technology, though. This is a record of my trial and error as I consulted AI for advice and tried different solutions, often while still figuring things out myself.

The first thing I tried was installing a plugin to compress and optimize JavaScript and CSS.

A plugin is a program that adds new features and functionality to WordPress.

JavaScript is a programming language used to add interactive features and behavior to websites. CSS is code that controls a website's design, including text colors, font sizes, and page layouts.

Compressing and optimizing these can sometimes help a website load faster.

However, on my website, using this type of plugin alongside a security-related plugin caused a problem that prevented me from accessing the WordPress admin dashboard.

As a result, I decided not to continue using this type of plugin.

My website also contains a lot of custom code that I've created with the help of AI, including an interactive 3D theme park. Depending on the optimization settings, this code could affect how the website looks or functions.

For these reasons, I decided to explore other ways to improve loading speed rather than relying on a plugin to compress everything at once.

The next thing I worked on was changing how I saved my images.

Originally, I had many images saved in PNG format. I started switching to WebP, a format that can produce smaller file sizes than PNG in some cases.

Smaller image files mean less data needs to be downloaded, which can help reduce the work required to load a page.

At the time, I also used a WordPress plugin called EWWW Image Optimizer. It helps with image compression and converting images to WebP format.

These days, I convert photos, illustrations, and other images to WebP before uploading them to WordPress.

However, WebP doesn't always produce smaller files. The results depend on the image itself and the compression settings.

After reviewing my images and making other improvements, I stopped checking PageSpeed Insights for a few months.

When I eventually checked it again, the scores had gotten worse.

So, my next step was to review my custom CSS and PHP code.

Custom CSS is code used to change a website's design and layout. The functions.php file is used to add features and functionality to a WordPress theme, which determines a website's design and basic display structure.

With help from AI, I checked for duplicate processes and unnecessary code, looking for ways to simplify things.

Cleaning up code doesn't necessarily make a website faster. Depending on how the site is built, the impact on loading speed may be small.

Even so, I found that keeping my code organized is important because it makes future updates and maintenance easier.

When you embed a YouTube video on a website, the page also needs to load scripts and other resources used to display and play the video.

One solution I tried was a technique called a facade.

Instead of loading the video player immediately, this method initially displays a thumbnail image or similar preview. The actual video player is loaded only after the visitor clicks it.

This can reduce the amount of data and processing needed when the page first opens.

This kind of optimization may be especially useful for pages that contain lots of embedded videos.

I've also worked on several other things, including:

• Making my custom header animation lighter
• Enabling Lolipop! Accelerator
• Lazy-loading images
• Editing and enabling WPCode snippets
• Reviewing how background images and fonts are loaded

And more!

Whenever my PageSpeed Insights scores dropped, I asked AI for advice, researched what I didn't understand, and tried whatever solutions seemed worth testing.

However, PageSpeed Insights scores can fluctuate between measurements. So even if a score improves after making a change, I can't automatically conclude that the change was responsible.

It's important to check the results several times before and after making changes and evaluate them carefully.

Improvements to loading speed aren't always visible, and visitors may not even notice the changes.

Still, I've come to realize that maintaining a website behind the scenes is just as important as adding new content if I want people to enjoy using it.

Of course, the best solutions vary depending on how a website is built and which plugins it uses. Changing certain settings can also affect how a site looks or functions.

It's important to keep a record of the original settings so that I can restore them if something goes wrong.

I'll keep checking my PageSpeed Insights scores and continue battling loading-speed issues alongside my AI companions! 😅

You can read the detailed article on website speed optimization, put together with the help of ChatGPT and Claude, here:
🏃‍♀️‍➡️ WordPress PSI LCP Preload