What is site speed improvement?

Improving website speed refers to improving the loading time of a website.
This is a very important measure to improve user satisfaction and optimize SEO.

Why improve the site page?

There are two main reasons for improving website pages.
One is to reduce the stress of users searching for information.
If there is a site where you can find the information you want to know, but the site doesn’t open easily, it is stressful, is it not?
By improving site speed, you can improve user satisfaction when browsing.

Another reason to improve site speed is for SEO optimization.
Google appreciates sites that open quickly.
Google’s philosophy is “user first and Google’s mission is to provide a user-friendly search engine.

If the speed of the website is improved, more users will be happy and use Google. This means that Google will be able to make more money from advertising.

So, how can page speed be improved?
There are many ways to improve page speed, some of which require specialized knowledge.

Site Image Optimization

Image Compression and Format Optimization

Image compression and format optimization can help reduce loading times and increase user satisfaction.
Here are some useful ways to improve image optimization.
Though it might seem difficult at first, it will become easy and intuitive once you get the hang of it.

Compress images

Whether you take your own photos or use images from the Internet, don’t use them as-is. Always compress the images before using them.
Many images may contain high levels of data resulting in loading more data when your website is pulled up making your site heavy and slow.
Therefore, to improve speed, first compress images before uploading them to your site.

How to Compress Images

Compressing images is very easy.
If you look up “image compression” on Google, you will find a variety of free sites that will compress images for you.
For example, I use an image compression software called “TinyPNG.
Simply drag and drop your JPEG or PNG photos to this site and hit the download button. In my experience, on average, it decreases the data size of the image by 70% to 80%.
Then just upload those images to your site and you will see an improvement in speed.
Once you get used to it, it only takes a minute or two to compress one image.

Installing Responsive Images

It is important to adjust the images so that they can be viewed in a responsive manner.
This means paying attention to the size of the image when viewed on a smartphone/tablet.

This is another criteria that Google is paying particular attention to.
Make sure that the images are of a size that is easy for the user to view.
This will also improve the speed at which your site loads.
If your site is built on WordPress, this may not be a problem, but if it is a directly-written site, be careful to ensure that the images are the optimal size for the user when a responsive design is used.

Implementing Lazy Loading

Implementing lazy loading is a technique whereby images are loaded when they approach the viewport, rather than all at once when the page is loaded.
In other words, the images are not loaded before they are actually displayed, but asynchronously when they are needed.
This also improves site speed.

So how can this be implemented?
It can be implemented using JavaScript.
This might seem difficult, however we will show you some easy tips on how to implement this technique. 

The idea is to use JavaScript to control the timing of the image loading, and JavaScript libraries and plug-ins make it easy to implement delayed loading. Here are some common methods are used.

・How to use event listeners

const image = new Image();

image.addEventListener(‘load’, function() {
// Processing to be performed after the image is completely loaded
console.log(‘Image has been loaded’);
});

image.src = ‘path/to/image.jpg’; // start loading by specifying the image path

This method uses the “load event listener” to specify the processing to be performed after the image has been completely loaded.

・How to use the onload attribute

html

<img src=”path/to/placeholder.jpg” alt=”Placeholder” onload=”loadImage()”>

JavaScript
function loadImage() {
// Processing to be performed after the image has been completely loaded
console.log(‘Image loaded’); }
}

This method uses the “onload attribute” to call the specified function after the image has been completely loaded.

・The method using Promise

function loadImage(src) {
return new Promise(function(resolve, reject) {
const image = new Image();

image.addEventListener(‘load’, function() {
resolve(image); // resolve if image is successfully loaded
});

image.addEventListener(‘error’, function() {
reject(new Error(‘Failed to load image’)); // reject if image failed to load
});

image.src = src; // start loading with the path of the image
});
}

loadImage(‘path/to/image.jpg’)
.then(function(image) {
// Processing to be performed after the image is completely loaded
console.log(‘Image loaded’); }
})
.catch(function(error) {
console.error(error); }
});

This method uses “Promise” to manage asynchronous image loading.: Tthe “loadImage” function returns a Promise, which is resolved (.then block) if the image is successfully loaded or rejected (.catch block) if it fails.

By using these methods, it is possible to leverage JavaScript to control the timings of the image loading and perform the necessary processings at the appropriate time.
As a result, website speed  will be improved.

Utilization of Browser Cache

Browser cache is a mechanism by which a web browser stores resources that have been downloaded once. This allows for faster display when revisiting the same website without having to re-download the necessary resources.

Browser Cache Settings

There are two main benefits of browser cache.

①Avoiding resource re-downloads:
The browser cache eliminates the need to re-download necessary resources when visiting the same website again. This improves page loading speeds and enhances the user experience.
② Reduced network requests:
Since cached resources are available locally, requests to the server are reduced.
This reduces network bandwidth and improves site response time.

CSS and JavaScript Optimization

CSS and JavaScript are essential elements of website design and feature implementation but unnecessary code and redundant files can negatively impact site speed.

Removing and Optimizing Unnecessary CSS and JavaScript

To improve site speed, first remove unnecessary CSS.
Some of the CSS and selectors may not be reflected on your site.
By removing them, you can reduce the file size and as a result, improving site speed.

Combining and compressing CSS can also be an effective way to improve site speed.
The presence of several CSS files will slow down the loading speed.
Therefore, by combining files into one can speed up the process.

Next, remove unneeded JavaScript.
By removing unused JavaScript functions and variables, you can reduce file size, parsing, and execution time.

In addition, as with CSS files, combine multiple JavaScript files into a single file to reduce the number of network requests and speed up download times. JavaScript compression can be used to minimize file size and reduce loading time improving site speed.

How to Know Your Current Site Speed

In order to work on improving site speed, it is important to understand the current site speed situation.
There is a free tool that can help you do this called PageSpeed Insights.

It is very easy to use.
Simply copy/paste the URL of the site you want to check the speed of.
Then you can see how many points out of 100 you are getting.
It will also tell you where you can improve the speed.

It is fun to use this tool after implementing some measures to see how effective the changes are.

Summary of Site Speed Improvements

In addition to the above measures, there are many other ways to improve site speed.
However, we have carefully selected only those that can be done relatively easily.
In particular, the image file compression process is effective and can be implemented today, so please be sure to give it a try.
If you have any other questions, please contact us anytime.