In the first article, we talked about test tools for your website. In this article, we’re going to continue and provide solutions for some of the most common issues when it comes to site speed/loading time.
Tools for WordPress speed optimization
There are a lot of plugins that will help you with cache in WordPress. I will go through some of my favorites.
WP Fastest Cache
It’s very simple to use. This is why I like it.
You install the plugin, activate it, enable cache, Gzip compression, Browser caching and you’re set.
- it allows you to preload posts, pages, categories
- combine and minify for CSS, combine for JS
- minify HTML
More features are available on the paid version. I’m perfectly ok using the free version and it goes really well with Autoptimize if you want to handle minify and combine separately.
It has more or less the same features that you will find in any cache plugin. The main thing is that it has a double cache for desktop and mobile version. This is great!
If you end up using something like wp_is_mobile() in your code, you know that it won’t work correctly when cached. This plugin will solve that issue because it will render each page and cache it individually for mobile and desktop.
The plugin is very well optimized and uses only PHP to do the job and you will be able to use it on a hosting service with low resources.
Cache Enabler – WordPress Cache
This plugin has a different approach when it comes to caching the pages. It will create HTML static files for your pages and store them on the server. When your visitor access the page the server will deliver the static HTML and avoid any backend process that will require extra resources.
One reason to use this plugin is for the integration with “Optimus”.
“Optimus” it’s a plugin that will allow you to deliver .webp images into your pages and “Cache Enabler” will allow you to cache those pages. It will create 2 HTML files for each page: one with the standard images that you have and one with all images replaced to .webp.
Why does it need to do that? Because some browser will not read your .webp files and people will not see any images on those pages. This way “Cache Enabler” will deliver the correct cached version based on the visitor’s browser.
There are a lot of other cache plugins, but these are the top 3 most used by us.
Like any other thing, you might need to test with multiple cache plugins until you find the right one.
You will want to minify the CSS and JS files but also combine them into as few files as possible to get rid off those requests.
Some cache plugins already have this option (like WP Fastest Cache does), but I prefer to use a dedicated plugin for that.
This is my to go plugin when it comes to minify and combine.
Some of the features:
- Optimize JS/CSS
- Aggregate JS/CSS files
- Exclude scripts/style files from Autoptimize. This is very useful because you’ll see that some functionalities might break and you want to remove those scripts from being combined. Same for style.
- Inline and Defer CSS. This will allow you to add “above the fold CSS” until the main optimized CSS is loaded. Is a great way to remove all request and provide some styling for the site until the actual resources are loaded. The content will start to be displayed without having to wait for the actual style file.
- Combine Google Fonts and load them asynchronously
- Remove query strings
This plugin works with every other cache plugin that I worked with. Just make sure you don’t have to minify and combine enabled on the cache plugin. Same for Divi themes. Divi themes will enable minify and combine by default, check if you want that or not.
3. Image Optimization
Smush Image from WPMU DEV
Very easy to use and it visually it looks very pleasing.
It’s a very good plugin all around, just 2 things that you need to know for the free version:
- it optimizes in batches of 50 files, so if you’re planning to optimize a lot of images you will need to click the button to continue the process after each 50 file.
- it has a limit of 1MB per file
reSmush.it Image Optimizer
Works great and it has a limit of 5MB per file. You can run the process for all the images, no limit on the batch.
Optimus – WordPress Image Optimizer
Apart from the image optimization, this plugin will allow you to deliver WebP images into your page.
It will generate .webp files automatically and will replace those from your page. You need to use it with the “Cache Enabler” plugin that I mentioned above to offer support for old browsers also.
You will need the HQ (paid) version for WebP image conversion.
Another notable mention: EWWW Image Optimizer. I run into issues with it on different servers and I stopped using it.
If you still don’t know what a CDN is, Cloudflare has a is a very comprehensive explanation for you.
First of all, it’s free.
- SSL certificate. Note: This is a “Full” secure connection between your visitor and Cloudflare, and secure connection (but not authenticated) between Cloudflare and your web server. In order to have a “Full Strict”, you need an SSL certificate on your server also.
- Details about traffic and attacks
- Stats about performance and how much bandwidth Clouflare saved you
Cloudflare also has some tools for Auto Minify and Rocket Loder that will combine and minify your CSS and JS. I don’t recommend using them if you’re already doing this on the server side.
In a recent update, they added a similar feature to the delegation. You can add multiple users to your account. In case you have another developer that needs to work and have access to clear the cache or put the whole thing in developer mode, you can do that without sharing your login credentials.
Alongside with Part 1, these 2 articles will help you get started on optimizing your website.
Some aspect might change in the months/years to come, but these are very core and basic things that you will need regardless of the new tweaks added by Google to the algorithm.
Starting from mid-2018 Google takes into account your site speed when ranking in for mobile search results. This should be enough for you to get started on optimizing your existing website.
Besides that, having a fast website (with a very quick loading time) will guarantee you more traffic, sales, and better bounce rate.
I will go through some tools that we use to test the websites that we’re working on and I will also mention some of my favorite solutions to fix the most important issues in part 2.
Tools to test your site speed
1. Google PageSpeed Insight
This might be the number one tool used for testing website speed and there is a good reason for that: it’s made by Google. You will notice that from time to time, the facts that are taken into account by PageSpeed Insight will change/adjust.
For example, right now you can’t get a break from “Lazy image loading” and “Using next-gen image format” that appears in the test results. Lazy loading is great and I will talk about it in part 2, you need to use this if you’re not doing it already. I will also talk in there about next-gen image format, so make sure to give it a read.
I do find the PageSpeed Insight a bit too aggressive when it comes to the mobile score and recommendations. For some of them, I feel like you need to strip the site or find a lot of different ways to deliver files in a way that it will please Google.
It provides you with enough details on how to fix most of the issues and also points to specific assets that need attention.
2. Chrome Audit
Very useful and comes with your Chrome browser or other Chromium-based browsers.
Using CTRL+SHIFT+I you can access the Inspector and from there you have an Audit tab that will allow you to run tests on the page you’re on.
You will get results for Performance, Progressive Web App, Best practices and Accessibility, so it’s nice that you have some extra things in there and you can go over all the details in the Audit results.
One thing to take into account: the tests are run from your machine.
If you’re using Bitdefender as an antivirus you will notice that all the assets on the site are delivered via HTTP/1.1 instead of 2.0. This will cause the Audit report to show you an issue that you are not delivering files using HTTP/2. Just deactivate the antivirus when you do that and it will work correctly. Make sure that your PC will not slow down the test or have another 3rd party that does that.
I really like GTMetrix because it provides you with more specific details on your test runs. You will get details like file names, correct sizes for images, it will even provide the images already optimized for you if you’re too lazy to do it on your own.
- It shows you the score based on two tests: PageSpeed Score and YSlow
- It keeps a record of your site tests
- You get details if the score when up or down
- A nice waterfall that shows the loading times of assets and status during the loading
In some cases, I use the GTMetrix tool more than the other 2 from above.
This is another tool that will get you in-depth details about your site speed/loading times and the best thing is that you can select location and browser on this one.
GTMetrix has a similar feature but it’s in the PRO version they sell.
WebPageTest is maintained on Github with around 130 contributors, they do have recent updates so you can use it without worries.
It has a lot of customizations in the Advanced section: a number of tests to run, capture video, connection type, disable JS, stop the test when document complete, emulate for mobile, etc. I never messed with the settings, just left it as it is and selected the location that I wanted and it worked very well.
I moved it to the last place because I feel like the free version doesn’t provide you with a lot of details. You have a very nice waterfall and you get a lot of information on what assets are loaded, how are they loaded, status, etc. but not that much info on the other issues.
You get details like “Compress components with gzip” or “Add Expires headers” but you never get the actual files that have this issue. I feel like it’s very vague and you can’t do debugging or improvement based only on these suggestions.
They do have a paid plan and on that paid plan you get a lot more details. I assume this is the reason and the selling point for the product. It’s fair enough. If you don’t want to purchase a tool like this, you can easily use one of the others from above.
You can use any of the tools above to test your site loading time/speed. The main thing that I can recommend is not sticking just to one tool.
If you’re using PageSpeed Insight on your daily basis, try mixing things up by having also GTMetrix and WebPageSpeed as your tools. You will get a better understanding of what might be wrong and how you can improve it.
In the next part, we’ll talk about WordPress speed optimization tools that you can use to solve some of the most common issues.
After a long time o creating different custom plugins for our clients, we decided to have a little one submitted to the WordPress repository.
It’s a simple plugin that will allow you to display code inside your content in a simple and stylish way.
You can find more details on the Code Snippet DM page.
Why would you create a free WordPress plugin?
Some of you might wonder why bother creating a plugin and submit it for free in the WordPress repository?
Why not capitalize on it and try to sell it as a premium version?
Well, there are a lot of things to take in consideration, but I will try to cover those that are familiar to me.
1. Try something new
If you work with clients on WordPress projects you will end up doing a lot of work that is custom made. There will be custom plugins, custom themes, and so on. Those plugins will solve a specific problem and maybe you can adjust it so it will serve a larger audience, but there is a change you have some kind of NDA with the client.
By creating a plugin that will be public in a large repository you can test and see if there are people out there that deal with the issue you fixed. You will also be able to collect feedback, support the plugin by fixing the bugs that will be found along the way, but also take on suggestions from people that aren’t part of your team when it comes to future updates.
2. Maybe there is a market for a premium version
Based on the popularity of the plugins and the suggestions you might get from users, you can release a Pro version. Why not?
Premium products should be paid. If your plugin can be taken to the next stage where it will make sense to have a price tag on it, go for it! Don’t forget to keep the free version in the loop and updated because that was the thing that started it all.
3. To put your name on something
It might sound stupid, but when you work with WordPress and use all these plugins from the repository that you think are so cool, you kind of want to have one yourself.
You are not looking necessarily for validation, but you want to give something back to the community. It can be your small project on the side that will bring you joy as you see people using the plugin.
How was this plugin built?
At some point this year I saw this Carbon page where you can generate an image for your code snippet and I liked the look of it.
Similar controls are available to the plugin via a TinyMCE pop-up.
More things will be added in the future.
As of right now, the plugin doesn’t save anything in the database and it’s as simple as possible. It works based on a shortcode that can be added using a TinyMCE button and completing the form in there or by simply pasting it as the documentation shows.
You can also check a demo here.
As web developers, we like to create a lot of things from scratch. For different reasons: it will do exactly what you want it to do, you can put your name on something (this is always a nice feeling), and so on. Sometimes there is no need to reinvent the wheel. If a thing works don’t question it or change it. That’s why I’ll get on with a list of our most used WordPress plugins.
We noticed some plugins that we used frequently on our projects. They definitely help us make the final product better and also finish it faster (deadlines are always a pain in the ass). Continue reading “Most used WordPress plugins in our projects”
In the past weeks, you might have heard about GDPR and how it will affect the websites. Does it apply to you? What should you change on your site to be compliant with it? I will try to explain some of the things you need to take into account when making your WordPress GDPR compliant.
This is not legal advice, I’m not a lawyer. (if you’re seeking legal advice, contact a lawyer or someone with a GDPR certificate) Continue reading “WordPress GDPR compliant – All you need to know”
Why would you need a WordPress staging environment?
There you will have your WordPress installment with no cache plugins. Maybe on your own server so it will be more responsive when working on editing code.
After all is said and done, you will have to move the final product from the WordPress staging address to the live domain.
You can do this manually or use a plugin. I prefer the second option and I will explain why and how it can be done. Continue reading “How to easily create a WordPress staging or move to live?”
Is there a theme that is the best WordPress theme? One that you’ll choose and it will deliver everything you need?
If you’re looking to create a new WordPress site or re-do an old one you might want to try a premium WordPress theme.
You will be looking to purchasing a new theme that will go along well with what you have in mind. So, you’ll start browsing along and narrow it down to the one. Purchase it and get stuck because you find out that it’s the not the best WordPress theme for your project.
While working with WordPress sites and premium themes for a while I noticed some deal breakers. Continue reading “How to choose the best WordPress theme for your project?”