Table of Contents
Page Speed Optimize
The page speed of a website is the most important factor for your online presence. First, this is an important factor in SEO. Second, it will provide a valuable experience to the user.
The question is; how to speed up the loading time of the website. Our discussion this time will be long because it will discuss how to improve site performance from various factors. Especially WordPress-based web.
You probably won’t finish it in one go, so make sure to bookmark this page. For later you can continue again when there is time.
So, make sure to implement the main steps that have a high impact on the speed of access of your site / blog.
About Website Loading Speed.
There are 9 ways to speed up the page speed of the most important sites. And this is a technique that will have a big impact and will obtain page speed dramatically. And furthermore, there are additional strategies to improve. Let me settle the first. And there is one more thing you should know. This is the right tactic that I use and is also used by web developers in building fast-loading sites.
Some of the site loading speed benchmarks are;
3s slow load time (slow)
Open time 2-3s good
Open time 1-2 seconds fast
Loading time 0-1 is very fastSo in standard SEO Friendly sites, the site loading speed should be in less than three seconds. It is very important to achieve this benchmark. If not, other than deemed not SEO, slow sites will be left behind by viewers who tend to need something fast.
9 Ways To Increase Website Loading
If you apply 9 ways to speed up the page speed of the site, then achieving a load time of under 3 seconds will be easy. And if you want the speed below that, then some additional points you also have to do. You don’t need to be all …
You might want to get started now, so this is the most important step you can take to improve the performance of your site.
1. Use High-Specifications Hosting
Hosting is the main power of your site. Good hosting will automatically support faster loading times. You can apply it to every other technique. It will still have an amazing effect, but everything will get better if the host foundation is high-performing. I use Google Cloud for hosting and some of the sites that I manage are also on the same service.
I have tried quite a lot of hosting. So it is enough to experience to say which is the best. But I will not publish it here. Because of this post, it’s not to bring down business hosting friends.
2. Use The Caching Function
What is the number when 5230×13 is divided by 2?
To know for sure, you might need a calculator, so you are sure the answer is 33,995.
And when you are asked again the same question?
This time it’s clear, you can immediately answer it instantly. Because you have saved the amount in your memory.
That’s the way caching works.
When someone visits your website, it will run many processes, until it finally appears in the form of pages that you can see. Without caching, this happens every time someone visits your website.
That means you have to use a calculator every time you get the same question repeatedly. And that makes a long time…
With caching, your site will need one page access time. And then the system stores it. Like you store the number 33,995 in your memory. Then when someone visits your site again, the cached copy is presented immediately without the need to run all processes from the start.
Makes sense right?
If the answer is yes, let’s talk about how to use this caching to take advantage of this great technology on your website.
How To Add Caching To Your WordPress Site?
First, your hosting se5vice might provide default caching. This is done because their average host uses Litespeed Web Server. Replaces Apache which has been commonly used so far.
So, by default, your site might have a caching function. If your host does not provide default caching, then there are many caching plugins to choose from. Both the free and premium (paid) versions.
Some argue the WP Rocket to be the best option. While some websites that I manage already have built-in caching. I do not think to change it. Litespeed is quite simple and easy to use. WP Rocket is said to provide ultra-fast caching and many other performance optimization functions. Many websites also use W3 Total Cache.
If you want a free but ‘convenient’ alternative, I suggest WP Super Cache or W3 Total Cache.
High-performance hosting and caching will have a great impact on your site’s page speed. This is the most important speed feature that your site needs.
If it’s ok. This means we can immediately talk about how to deal with slow websites.
Must Implement The Next 3 Steps
After you set the caching plugin, now switch to your site image. If you don’t optimize your images, your site will never achieve perfect loading speeds. Images can be a big obstacle at loading time, so these are about three ways to optimize images on a site.
The first way to optimize an image is to compress it.
3. Compress Your Image
Many tools can be used for image compression online and for free. I sometimes use compressjpeg.com. This tool can reduce the image file size by 70%. And that without affecting its quality. The point is, you can display images on your site with faster loading times, without reducing quality. This is cool – seriously!
For other options, you can also use the image optimization plugin installed on your site. Like Optimal. Another pretty good alternative is the ShortPixel plugin.
4. Resize Your Image
Let’s examine the following details. The larger the dimensions of the image, the larger the file size. For example, an image with a width of 3,000px might be 900kb, but when resized to 600px wide it is only 60kb. The reduction in file size reaches up to 15x!
That is why this is very important. Images in this blog post will only display a maximum width of 900px. And the file size is only 100kb less. Why don’t I use the 3,000px version, because, on this site, the default page width is only 900px? The image will look the same to the user, but it takes 15x longer to load if using a 3,000px wide image.
The point is to use the image size as needed. Use the width of the image according to the standard width of your post. The impact will be huge.
This is the problem.
You might not know exactly how wide your image appears in your post. In addition, mobile devices make this method more complicated. Regarding screen size, if we consider all the different monitors and mobile devices, there are thousands to think about.
If you want to present images that are the perfect size for your visitors, they need to be dynamically sized, which is why you can use plugins like Optimal. Actually, there are many alternatives out there. There is one more way to reduce your site’s loading load from image factors. Also a very big impact. It is;
5. Enabling The Lazy Load Image System
This blog post is very long and has lots of images in it.
If you’ve read this far, chances are you’ve been on this page for at least a minute.
Knowing this, how stupid it makes you have to wait for loading all pictures when this page is first opened.
When you first arrive, you only need to look at the first part of the picture. That is the very top. You don’t need to see the next picture yet.
With the Lazy Loading function, only images that appear on the screen are loaded. So when the first access, which requires loading only the top image. Then when you scroll down the page, the remaining images are loaded in the next process.
That’s how lazy loading works, let’s talk about implementation.
How Do You Use Lazy Loading?
Adding lazy loading is very easy, so I don’t think you should ignore this step.
In some of the plugins above, have the default lazy loading function. Like Optimole, WP-Rocket, W3 Total Cache, and others.
In this picture, you can see that enabling Lazy Loading is only enough to check the mark on W3 Total Cache. Then it automatically works.
Until this point, does everything look troublesome? The answer is no if you are familiar. Because if your work is planned, everything can be done easily.
Let’s continue …
6. (Minify) Minimize Your File
When talking about file sizes, we are talking about loads. So compressing the image means reducing the load.
The idea is reducing the site load will make it load faster. That means it’s also about reducing the file size. In any form. Besides images, your website is also burdened with CSS files, Javascript files, and font files. Hold that thought for a moment, and let’s talk about Minification (Minify).
Minification is a programming term that basically means compression for text-based files. You compress the image and reduce the file. Just as you compress your image, you can reduce your CSS and Javascript files (and HTML) to make it smaller and reduce the burden on your site.
How To Minify Files
Once again, the way to Minify files to your site is very simple.
With WP Rocket, there is a checkbox to enable minification for CSS, JS, and HTML. In W3 Total Cache it’s also the same. Much like activating the Lazy Loading function earlier. Just tick and it works right away.
Minify is very important for WordPress sites. Because you might have at least six plugins and themes when loading files on your site. Oftentimes, developers can’t shrink the file itself, so the cache plugin does it.
If you want a free alternative to Minify, see the Autoptimize plugin.
7. Concatenate Your File
Concatenate is another technical term that means “to join.”
When you merge files, it is a way to speed up website loading dramatically. Again, because you have all of these plugins on your site to load files, it’s important to use plugins like WP Rocket to merge them into as few files as possible. You already know that reducing the weight of your page makes it load faster, but there is one other major performance factor to be optimized for: HTTP requests.
I know this post is getting more technical, so I will make this as simple as possible. Every file that you load requires an HTTP request. Every image, JS file, CSS file, etc. – all require one HTTP request. Your website has a fixed number of HTTP requests that can be handled at once, so there is a bottlenecking effect that occurs when loading files. For this reason, the fewer HTTP requests your site makes, the faster it loads.
For example, if your website has 5 CSS files that are all 5 kb in size, it will load faster if you combine them into one CSS file that is 25 kb in size.
With minification, it reduces the weight of your site’s files, and then by merging it to reduce HTTP requests.
How To Add A Series
We can switch to the WP Rocket plugin for this optimization too. There is a checkbox for combining CSS files and JS files. All you have to do is check both boxes, save your changes, and you’re done. This option is also available in the Autoptimize plugin.
The following tips may surprise you, but in my opinion, this is a must-have optimization.
8. Load Files With CDN
The internet is magical. Let’s see…
This is a computer network and the connections in this network are all physical in nature.
It might be weird to think about, but the distance between the server where your site’s content is stored and the location of visitors is very important.
If your server is in Singapore and someone from Tokyo Japan visits your website, it will take longer for files to be accessed if someone else in Delhi visits. I say it’s strange to think about it. So what if you keep a copy of your site on a server in Tokyo too? Doesn’t that make it faster for visitors in Japan?
Yes! And that’s what CDN does. CDN stands for content delivery network and basically, it’s a server network that stores cached copies of your website worldwide. This way, no matter where someone is when they visit, there is a server near them to deliver your site’s content.
When you first activate the CDN, it doesn’t seem to help if you live near the server from your host. What’s more important is how quickly the website loads for the whole world.
How To Use CDN For Your Site
There are several powerful options for adding CDNs to your site. First, if you use a particular hosting, you can use their default CDN. All you have to do is activate it from the menu. You can also use the Cloudflare CDN. There is a free option. If you use the Cloudflare CDN you can also use their firewall. This is useful for blocking a lot of bot traffic that enters your site.
Setting up Cloudflare is fairly easy and comes with a variety of other benefits. For how to use Cloudflare I will make a separate post. But if you are impatient, you can search through Google.
There are other popular paid CDNs besides Cloudflare, but I haven’t tried one of them personally. So I can’t make additional recommendations.
9. Choose A Fast WordPress Theme
This last tip is important. Many WP bloggers will tell you to choose a theme that loads fast. Let me explain how this actually works. WordPress themes will not speed up your site. Instead, you search for ones that won’t slow down your site.
However, unless the theme is really poorly made, it will not slow down much of your site, if you use the 9 Ways to Speed Up Loading WordPress Website technique described above.
Well, if you have on a WordPress theme that supports your site’s loading speed, then the things you need to get from a site are:
- One CSS file
- One minimized Javascript file
- One Google Fonts request
- Font Awesome font (for social icons)
Without sacrificing design (such as using a system font), themes should use as few files as possible.
Not all themes are optimized like this, but not always a problem. That’s because even though your theme isn’t optimized properly and contains two CSS files and three Javascript files and none of them is minimized, a plugin like WP Rocket will still unify and minimize it for you, so the end result is almost the same.
Basically, it is unlikely that your theme will slow down your site a lot if you use the performance strategies listed above.
Choose a theme from a reputable developer and theme performance won’t be a problem.
Then, don’t use many plugins on your site. If it’s not really important.
Additional Optimization
This post is a lot longer than I expected, and if you’ve come this far, I hope you want to learn more about optimizing performance. In the rest of this post, I will discuss more specific and technical optimizations. I have made these tips as simple as possible for beginners. Some of them are easy to implement but to be honest, some need more understanding of web resources
This additional section is only a surplus. And remember, if you have implemented 9 ways to speed up the page speed site above that is more than enough.
10. Delay Javascript
If you only use one additional factor in how to speed up website loading from the rest of the list above, then use this one. The idea is that your site’s CSS must be loaded first. Because your website will become a blank white screen until that happens. As for Javascript files, they might be used for things like analytics that don’t need to be loaded immediately.
Instead of saving a blank white page when JS is loaded, you can delay the JS file until everything on your site is loaded. In this way, your site loads in the same amount of time, but it appears visually faster which makes it appear faster.
The concept is somewhat advanced, but again not difficult to implement.
How To Delay Javascript
If you use the WP Rocket plugin.
Unless you know what you are doing, I strongly recommend leaving the “Safe Mode” option checked.
While in W3 Total Cache, you can simply enter the Minify option earlier.
11. Optimize CSS Delivery
Just like Javascript, CSS is rendering-blocking so you can also postpone it for better performance. Now I know what you are thinking: don’t we just postpone JS so that CSS can be loaded, and now we also delay CSS?
This is what happened …
To remove CSS that blocks rendering, you will describe the critical CSS used to organize the parts of your site that immediately appear. Then the rest of your site’s CSS is loaded later. Again, this means your site appears visually faster.
This is a very sophisticated way. And this function can be your application using WP Rocket.
How to optimize CSS delivery?
You might be familiar with this now …
All you have to do to optimize your CSS delivery with WP Rocket is to check this box:
WP Rocket then generates the critical CSS needed for each page and puts it in HTML. The rest of the CSS is then suspended. I will never try to do this manually, so this is an optimization that is risky enough to be automated this way.
Furthermore,
12. Turn Off WordPress Emoji Support
WordPress added emoji support back in version 4.2. To make sure emojis work on your site, WordPress loads a small Javascript file on each page of the site. This is the problem …
We might not need this file for emoji support. Because almost every device already has an emoji font installed. So this can be removed from the site. But you still see emojis. Because your device has already installed it. By removing the emoji function, your site will no longer load additional Javascript files, making it a little faster.
You can install the Disable Emojis Plugin. It’s simple and free.
13. Disable WordPress Embed
When you paste a link from Twitter to the post, WordPress will automatically create a nice embed box.
That’s cool, but what’s troubling is, this is also a burden. You can deactivate it. Because WordPress contains additional Javascript files for this embedded feature, removing them reduces the weight of your page and eliminates other HTTP requests.
It’s a small optimization, but every bit helps.
14. Update Your PHP Version
Modern coding languages are very fast.
Most performance tactics have nothing to do with how fast the code on your site is executed. Instead, it can optimize the speed of your website content being sent to the visitor’s device. That’s the part that takes time. This tactic is different because it actually speeds up how quickly the code on your site runs.
Newer versions of PHP are getting faster, so if you are still using PHP 5, you will see a big benefit by switching to 7.
It’s important to understand that doubling the PHP speed of your site won’t make your site load twice as fast. That only makes PHP code run twice as fast. This is a small part of your site’s load time. This has the potential to get very easy and better performance for plugin security and compatibility.
How To Update Your PHP Version
Lower quality hosting companies use outdated versions of PHP. And the best hosting companies stay up-to-date with developments in PHP releases. Updating to the latest PHP version will speed up your site and depending on your host, it should be very easy to do.
You need access to Cpanel.
The time needed: 5 minutes.
How to Update PHP version
- Log in to the control panel.
Enter your username and password.
- Advanced settings
Then select PHP and database settings.
- Scroll and below search for PHP Version updates.
Then click the latest PHP version. Then save …
These tips speed up the loading speed of WordPress websites. There are still a few more. I will update this page too. As; DNS prefetching, limiting posts per page, merging Google Font requests, Gravatar Optimization, Lazy loading comments, Lazy loading videos, Reducing redirects, Host Google Analytics locally, limiting font type usage, etc.
What is clear, some of the tips above are more than enough.
Conclusion.
The series of tips or ways to speed up loading the website mentioned above is part of the main factors in optimizing WordSpeed pages. Assuming you don’t use too many plugins.
ALSO READ: How To Start A Blog In 2023 For Beginners