Contents
How to speed up WordPress (or how to improve WordPress loading) – a question that every website and online store owner asks themselves at some point.
Wanting fast WordPress and achieving it are very different things. There’s an awful lot of information on the internet about techniques for speeding up WordPress. Most of this information is very detailed and useful. In most cases, what you’ll find may be too complicated or have too many steps. Also, when it comes to making a WordPress site load fast, we need to keep in mind that every site is different and requires a unique approach to maximize the best result.
At Pixadoro, we have a dedicated WordPress speed optimization service where we run detailed tests and create a dedicated plan to improve loading speed. In this article, we’ll highlight the two most important things that will improve your website’s loading speed. By following the two main points and implementing them correctly, you will see a huge increase in your website speed. Most articles on the internet talk about caching and setting up your hosting environment, which is undoubtedly important, but here we will go to the basics as these two things apply to all WordPress sites.
Contents
See also: 5 common reasons why WordPress is slow
In the following lines, we will explain in detail about the necessary actions to take in order to ensure a good speed increase on your website.
1. Page size reduction
First, a clarification – page size is the amount of content and resources used to load a URL. Or to put it another way, page size is the sum total of all the elements required to load a URL on the web. Below is a list of what those elements might be that make up the page size:
- Text content
- Multimedia content (images, video, audio)
- Video / Audio players
- CSS/JavaScript files
While the above is not an exhaustive list of all the things that can make up the size of a web page, these are the most common elements that make up a page, and the ones you can aggressively reduce to improve speed.
When you think of WordPress speed, think of the word DECREASE. The more you reduce everything it takes to load a web page, the faster it will load and the happier you, your visitors and Google’s other search engines will be.
In the following lines, we will look at each element in more detail and see what steps we can take to achieve a reduction in each one and then a reduction in the overall page size.
⚡️ Text content
Unless you have a super long web page, you have nothing to worry about on this one. Text loads very quickly to begin with, and is usually not a reason that slows down page loading. But if you have an extremely long page full of content, like a list of blog posts, it’s better to split that content into separate pages with links between them (pagination).
At Pixadoro, we often see a client blog page where the site owner has chosen to display more than 30-40 posts, making the page very text and image heavy. The solution here is to easily limit the number of articles per page.
⚡️ Multimedia content
The most common thing that can increase page size is large images. The average width of an online image is between 500px-700px, but in many cases the site uses images that are far over the required size. The larger the image, the larger the file size and most importantly, the longer it takes the browser to load the image file(s).
You need to make sure that the images in the page content have the same dimensions as what is actually displayed. It’s not necessary to upload a 2000px wide image and then scale it (scaling) to 700px to display on the site. Yes, the image displays at the size you want, but the browser still loads an image 2000px wide instead of 700px wide. Scaling an image on the page (e.g. adding style=”width:700px”) is not reducing the size!
The second thing that is important to do, once you’ve used the correct dimensions for all your images, is to optimise them. This will ensure that the images you display on the site are the smallest file size possible without losing any photo quality. This can be done using a plugin or external image optimization services.
USEFUL IMAGE OPTIMIZATION PLUGINS:
EWWW Image Optimizer – https://wordpress.org/plugins/ewww-image-optimizer
Smush Image Compression – https://wordpress.org/plugins/wp-smushit
ShortPixel Image Optimizer – https://wordpress.org/plugins/shortpixel-image-optimiser
Imagify Image Optimizer – https://imagify.io
BONUS:
TinyPNG – https://tinypng.com
At Pixadoro, we mostly use TinyPNG / TinyJPG to optimize and reduce the file size of images before uploading them to WordPress. With this tool we often achieve up to 70% size reduction. They also have a WordPress plugin.
See also: image optimization – fast loading WordPress
⚡️ Video/audio players
This is often overlooked in speed optimization. Let’s use an embedded YouTube player as an example. There are several ways you can embed a video from YouTube, but the most common way is by pasting the URL into the WordPress page editor or taking the embed code directly from YouTube. In either case, the output is an IFRAME loading the video. This IFRAME needs to call resources from YouTube to load the video. These riquests can’t be sped up since they’re not hosted on your site, so you have to do something else called LazyLoad. This technique is great as it will wait for the iframe to load until the ptoreader website loads/displays first, instead of loading the iframe first, on the first page load.
Below are a few free plugins to do just that:
FREE LAZYLOAD PLUGINS:
BJ Lazy Load – https://wordpress.org/plugins/bj-lazy-load/
a3 Lazy Load – https://wordpress.org/plugins/a3-lazy-load/
Easy Lazy Loader – https://wordpress.org/plugins/easy-lazy-loader/
One more thing: some themes support APIs of various services like YouTube, Vimeo, SoundCloud, etc. that are not needed to embed video on the site. Review the theme settings and turn them off if needed.
One more thing: some themes have a lazyload setting and you may not need to install an additional plugin.
⚡️ CSS/JavaScript files
This is where it gets a bit more complicated. WordPress and all the things we add to it usually need CSS and JavaScript to function. In some cases these files are well written, clean and fast, but in most cases they are heavy and slow. Reducing the size (minifying) of CSS and JavaScript files will certainly improve loading speed. The problem is that this can cause problems and improper loading/functioning of the site, so care should be taken when performing this action.
The best way to reduce CSS and JavaScript files on your site is through the minification process. Minification (minify) is the process of removing all unnecessary characters from source code without changing its functionality. These unnecessary characters typically include whitespace characters, newline characters, comments, and sometimes block delimiters that are used to add readability to the code but are not necessary for its execution.
Many of the CSS and JavaScript files can be minimized to reduce the overall file size, which will make WordPress fast. While it is possible to do this manually, we highly recommend against it. Below are a few free plugins that will do this automatically. Always check the functionality of your site after activating any minification plugin.
FREE MINIFY PLUGINS:
Autoptimize – https://wordpress.org/plugins/autoptimize/
Minify Javascript – https://wordpress.org/plugins/optimize-javascript/
CSS Minify – https://wordpress.org/plugins/css-optimizer/
Fast Velocity Minify – https://wordpress.org/plugins/fast-velocity-minify/
2. Reduce requests
Here’s what happens every time someone visits a web page: the browser (Chrome, Firefox, etc.) pings the web server that hosts the web page the user is trying to visit – in this case, a web page on your website. The browser asks the server to send it the files containing the website’s content. These files contain any text, images and multimedia that exist on that web page.
This request is called an HTTP request. HTTP stands for “Hypertext Transfer Protocol”, which is just another name for the process when a web browser sending a file request and the server sending (returning) that file to the browser.
Once the server receives an HTTP request from a user’s browser, the server responds and delivers the files to that user’s browser. The user’s browser then renders the web page.
What’s the problem: The browser needs to make a separate HTTP request for each individual file on the website. If your website doesn’t have many files, then it won’t take long to request and download the content. But most good websites have lots of files, including large high-resolution images.
Reducing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads.
So, now that it’s clear what a request is, can we reduce them to speed up the loading of web pages?
⚡️ Remove unnecessary images
Since we are talking about charging speed, so the less is more rule applies. Don’t clutter your website pages with too many images. Each photo/picture is a separate request to the server. The more image requests, the slower the page will load. Review all images on individual pages and remove unnecessary ones to increase loading speed.
⚡️ Remove unnecessary plugins
Plugins are the heart and soul of WordPress functionality. WordPress users love to add and add and add plugins to their site to introduce cool new things and features. The bad news of it all is that most plugins add a bunch of code and files that probably load on all pages of the site. This code may even be loaded on pages where the plugin functionality doesn’t exist. For example, WooCommerce adds scripts and styles that are loaded unnecessarily in blog posts.
Plugins is certainly one of the biggest causes for slow loading speed. Take a look at the active plugins and decide if you really 100% need each one individually. Ask yourself if the site can do without this and that plugin. If it can run smoothly without a plugin, disable it and remove it.
Bonus: Keep in mind that even if you delete a plugin, there may be traces of it left in the database – data tables – which put extra load on the database and make retrieving information from it slower. After deleting a plugin, it’s a good idea to perform a database cleanup and optimization.
There are plugins that are used to add functionality, but it is possible to achieve the same result without installing a plugin. A great example of this is using a Google Analytics plugin to add the tracking code. No separate plugin is needed to add Google Analytics. You can simply paste the tracking code directly into the theme’s header/footer file or into the theme settings itself.
⚡️ Removal of third party additives
Social media accounts added to the site could be a great way to increase user engagement, but they certainly slow the site down. One of the worst things is pulling content from Instagram. To display Instagram photos, you need to load a whole bunch of code from a 3rd party site (Instagram).
This also applies to any other third-party content that is downloaded to be displayed on your site. Some common examples other than Instagram are Facebook, Twitter, YouTube, Vimeo, SoundCloud, and any live chat solutions like Zendesk, Tawk.to, email subscriptions – Mailchimp, Mailerlite, etc.
The easiest thing to do is to simply remove the third party content and you’ll see how the load times will improve. However, if that’s not an option for you and you want to display that content on the site, the only other thing you can do to speed up the site is to turn on LazyLoad. We talked about this above. The type of LazyLoad we’re talking about here is JavaScript LazyLoading. The Swift Performance plugin allows third-party JavaScript files to be selected and loaded once the visible part of the page is displayed for users.
Learn more about our WordPress and WooCommerce Speed Optimization service.
