Nowadays, if your website doesn’t appear on the first page of Google search results, it means you are practically invisible to your potential users. And if you want Google to love you more and bump you up, one of the most important things you need to do is improve your WP site performances. Plus, your users will be happier not to have to go for a coffee while your page is loading 😉
Let’s see what you can do in order to optimize your website performance.
1) Website image optimization
If your website has images, it’s almost certain that they are the heaviest part of it. Usually, more than 90% of your website’s size comes from images. It makes sense to optimize them as much as you can, right? There are many techniques to do it, and we created 2 plugins for WordPress that implement them. Also, you won’t believe how easy to use these tools are!
ShortPixel Image Optimizer (SPIO)
This was our first plugin, and the origin of our success 🙂
ShortPixel Image Optimizer is an easy to use and lightweight plugin that can compress all your old images and PDF documents with a single click. In addition, new images are automatically resized/rescaled and optimized on the fly, in the background.
As an example, let’s take a random image from Unsplash. The image we link to weighs 4.45 MB with a resolution of 5184×3456. Looks like an image you would take with a regular camera. This is what happens when it gets processed by ShortPixel Image Optimizer:
After setting a Lossy compression and a maximum size of 1920px, we reduced the size by 87.52%! Now it weighs 398KB. Impressive. And the quality of the picture is almost the same. See the final result here:
If you want to check how our image optimization service performs with your images, feel free to test it with our web tool. You’ll be surprised how much we can reduce the size of the photos!
ShortPixel Adaptive Images (SPAI)
The ShortPixel Adaptive Images plugin optimizes your images like SPIO, but it includes 2 additional services: a CDN and an image resize/adaptation service. ShortPixel AI processes the original images taking into account the visitor’s viewport/placeholder, and it generates new URLs for the images, according to the user’s settings. These will be served instead of the original images. Such images will be then optimized and served from our CDN, with the appropriate size.
Let’s take the following site, for example. This is a GTmetrix report before installing Short Pixel Adaptive Images:
And this is after installing ShortPixel Adaptive Images:
And the installation and configuration of SPAI is even simpler than SPIO’s! This is literally an install-and-forget-about-it image optimization plugin. Download it now for your WordPress site!
If you want to know more about both plugins, have a look at these documents:
– How does ShortPixel Adaptive Images compare to ShortPixel Image Optimizer?
– How does ShortPixel Adaptive Images work?
– How does ShortPixel Image Optimizer work?
What if I don’t have WordPress?
No problem, ShortPixel has got you covered. In addition to the previous two plugins, ShortPixel Image Optimizer and ShortPixel Adaptive Images, we offer the following services that take care of your images:
– A straightforward web interface to our API, available to any PHP website (Magento, Joomla, Drupal, custom brew, etc.). More information about our Website Optimizer.
– A command line tool which optimizes image folders from the command line, so it can be configured as a Cron (or other task scheduler) job. More information about our Command Line Tool.
– A reducer API, which allows you to shrink an image based on the URL of the image. You can call it from any programming language that allows you to send an HTTP POST request. More information about our Reducer API.
– A Post-Reducer API, which allows you to shrink an image that is not accessible online, by uploading it to our servers via a POST HTTP call. You can call it from any programming language that allows you to send an HTTP POST request. More information about our Post-Reducer API.
– A PHP client library which features a quick configuration and an easy fluent syntax for accessing our services. More information about our PHP client library.
– An app for Zapier, allowing you to shrink images located on Dropbox / Google Drive folders via a Zapier connected workflow. As this is still in Beta phase, you need to get an invitation from us. To know more about this, here’s additional information about the integration with Dropbox and here about Google Drive.
Must-have tools for even more optimization
Do you want to go even further? There’s still a lot of room for improvement if you are computer-savvy enough. Together with ShortPixel’s tools, have a look at how else you can improve your website image optimization.
2) Get a good hosting
It is exasperating to visit a website and to see this for more than 0.5 seconds:
That’s what happens when you get a hosting service from a company that offers hosting for $1 a month. You will be having a server that is shared between lots of other people, all of them using the same resources as you.
Ideally, you would be getting a single server for your website, also known as VPS, but since it’s not for all budgets, a good choice would be to get a shared server from a good hosting company, one that is reliable and offers good support. We recommend you do your own research, since each person has their needs and every hosting offers something different; here’s what you need to look for when searching for a new hosting:
– Enough disk space: avoid those “unlimited disk space” offers. Nothing is unlimited in the hosting world, and if they offer you that, it means they have a very strong limit in something else. Calculate how much your website needs, and double it, so you can have enough space to make, at least, one local backup.
– Good support: make sure your hosting will be there for you 24/7 and that you can contact them via chat, email or phone. You don’t want to have your website down on a Sunday and have nobody available to help you.
– Free SSL certificates: your hosting should support Let’s Encrypt, which provides free SSL certificates, and they should be able to install it for you. This is very important not only for your users’ security, but also for better SEO, as Google doesn’t like websites that are not https.
– Backups: a good hosting should at least make backups for free. If you get a cheap plan, usually you will have to pay in order to restore a backup, but at least you will have a backup.
– Enough bandwidth: it will be very easy to find unmetered bandwidth, which means that the hosting provider is not metering the amount of data being sent from your website. This is fine for most users, but you’ll need to read the terms and conditions to know exactly where is the limit (remember that there’s nothing unlimited when talking about hosting services). Most of the time, “unlimited” won’t affect you, as most websites don’t actually hit the hidden limits.
We’ve heard good things about these companies; you may want to check out their websites and see if they are good for you:
– SiteGround: officially recommended by WordPress and always one of the highest-rated hosting providers.
– Bluehost: one of the veterans, also officially recommended by WordPress.
– WP Engine: a bit more expensive than the rest, but ideal if you want a managed WordPress hosting.
– Liquid Web: one of the best hosting providers focused in managed VPS hosting, managed cloud hosting, and dedicated server hosting.
3) Use as few plugins as possible
This situation is very similar to a recently purchased phone or laptop. They come with a lot of software you don’t use and that makes the device slower. On WordPress, when installing lots of plugins, the same happens.
Try to keep the list of plugins as small as possible; only use the necessary ones. Here’s what you can do in order to clean your WordPress installation:
– In general, check out each plugin and ask yourself if you need it. If you don’t, remove it. Don’t keep it “just in case”. For example, do you have a plugin that adds a cool effect to the titles of the admin area? Not needed.
– Do you have two plugins that do the same task? Get rid of one. For instance, something we usually see – two cache plugins. It doesn’t make sense; caching twice your pages doesn’t have any benefit.
– Do you use a huge plugin just for a single feature that’s included in that plugin? Try to look for a smaller plugin the purpose of which is exactly that feature you want, or you can even look for the piece of code you need on Google.
Remember that the goal is to reduce the number of plugins so WordPress doesn’t need to load too much stuff.
4) Use good plugins
A single badly-coded plugin can ruin your whole website and make it very heavy. In order to choose the best plugin for each necessity, have this checklist close-by, and over time, you’ll be able to detect easily which plugins are the best in each category:
– Last updated: If a plugin hasn’t received any update in the last 6 months, this usually means it’s outdated, and will probably have functionality or compatibility issues, even security issues. Our advice is to avoid outdated plugins unless you know they are safe to use.
– Active installations: Usually, the more a plugin is used, the better service/product is offering. Otherwise people would not use it 😉
– Compatible with the latest WordPress version: If the plugin indicates that is compatible with the latest WordPress version, it usually means that the developer took some time to test the plugin against the most recent version of WordPress.
– Screenshots: This is one of these things that show whether the developer cares about the users or not, since some good screenshots will help them see if the plugin will fit their needs or not.
– Good description: It’s fundamental to have a good description to know what the plugin does and how it does it. If you find yourself needing to install it to check how it works, it’s not a good sign.
– FAQ: It comes with screenshots. It shows that the developer wants you to understand how the plugin works.
– Average rating: Obvious, but make sure to match it with the number of reviews, because a plugin with a single 5-star rating doesn’t mean it will be better than another with 34 4-star ratings. That single 5-star rating will probably be from the author…
– Support: You’ll want to have a good support in case things go wrong. Check if the plugin or extension has some public place where you can see the questions and answers. For example, WordPress has the public support forums. Another thing that we recommend is to try to contact the plugin author(s) directly and ask them a simple question. The aim here is not the answer itself but how the support is handling your question.
– Developer profile: More nerd-oriented 😉 but it’s nice to see who is the developer, what they do… It gives you a more personal feeling about the plugin.
5) Use a CDN
CDN stands for Content Delivery Network. What a CDN does is basically duplicate your website’s resources across a network of servers around the world. That means that your website in your server’s country will load as fast as it would load for somebody in the other side of the world.
Here’s a quick list of the most famous CDNs out there:
– Amazon CloudFront: here’s the CDN offered by Amazon Web Services. If you use the Internet (and if you are reading us, you do), you are probably using them, as companies such as Spotify, Slack or Hulu use Amazon CloudFront.
– Cloudflare: it operates one of the most efficient DNS services in the world, and they also offer DNS servers since not so long ago: 1.1.1.1. They usually partner up with hosting providers like SiteGround, so you’ll have a very deep integration.
– KeyCDN: they offer very low prices, and even though you won’t get the biggest network, they are usually partnering up with hosting companies, so it is very easy to set up.
– StackPath: guess who uses StackPath? ShortPixel! The CDN that SPAI is using is based on StackPath, so if you want to check out where our CDN has points of presence, have a look at this page: https://www.stackpath.com/platform/network/
6) Make use of the available caching services
Between the user and the server you may have several caching services available and you didn’t even know it!
– Page caching: depending on the technology your website is using, you may have available some page caching plugins or extensions. These will generate HTML files in the server’s hard disk or memory, and will serve them whenever a request is made instead of executing PHP code and MySQL database queries. On WordPress, for example, you got these (they are not all of them, remember that WordPress has more than 50,000 plugins!):
– Hosting: some hosting providers offer you caching features under different names. For example, Siteground offers their Supercacher feature, which is simply another caching method on a server level. Make sure you review all your hosting features you have available and take advantage of them!
– CDN: a third layer of cache. Each CDN provider will offer you (or not) a caching feature, which actually makes sense coming from a CDN. Cloudflare, for instance, offers you a cache option which you can enable or disable. We suggest that you go to your CDN control panel and review all its settings and features; you will probably find a caching method for free.
7) Update your PHP version
If you use PHP, and you do if you are using WordPress, make sure you use the latest version of it. You will definitely notice the loading speed increase, especially if you upgrade from PHP 5.6 to PHP 7.0. Kinsta ran some benchmarks and the results are clear. The latest version of PHP is the clear winner.
However, updating the PHP version can cause some problems on your website, as it is a sensitive part. Be sure to test extensively all parts of your site after updating the PHP version, and have an easy way to rollback too. To help you with this, you can try a sandbox WordPress system, where you can test plugins and/or themes without fear of breaking something. They probably won’t have the latest PHP version, but at least an “almost latest” one. Here’s a couple of these sandbox systems:
– Poopy.life
– Sandboxwordpress.com
8) Optimize your code
There are several ways to optimize the code of your website, such as…
Reduce HTTP requests
Every time a web page is loading, there are a number of HTTP requests and responses between the client (your browser) and the server. The more requests are done, the more time the page will take to load. To reduce this number of requests, you can do several things:
– Use less code 😉
– Use CSS sprites.
– Inline your Javascript (but only if it’s very small!)
– Combine your CSS and Javascript files.
– Use less plugins/extensions that will add more load to the page (see above, section 3).
Depending on the CMS you use (if you use one), you’ll have available some plugins or extensions that will help you achieve the results we are looking for. For instance, on WordPress, you have available the Autoptimize plugin, which can help you inline and combine your CSS and Javascript files.
Minify the code
What does minify mean? Basically, removing any unnecessary character from your HTML, CSS or Javascript files. What are unnecessary characters?
– New line characters
– White space characters
– Comments
A minified code will usually look like this:
As you can see, there are no new lines, comments or unnecessary white space characters.
For WordPress, Autoptimize is again a good plugin to use for this purpose. Give it a try!
9) Optimize your database
Optimizing your database is also essential. Perhaps you won’t notice it if your website is a small one, but if you have had it for quite a while and/or you have a big website, you will probably see and feel a difference once you clean your database.
Every environment and setup is different, so there’s no “magic code” that will do this for you. However, we can give you some tips regarding the most popular database, MySQL. WordPress uses it too.
– The MySQL Tuner script is a script written in Perl that will assist you with your MySQL configuration and make recommendations for increased performance and stability.
– If you use phpMyAdmin, you can optimize your databases with a click. This can be time-consuming depending on the size of the data and indexes, but unless there is a power outage, running this does not harm the data. This process is similar to defragmentating a computer. To do it, follow these instructions:
1) Log into your phpMyAdmin. If you don’t how, your hosting provider will be able to help you.
2) Click on Databases at the top
3) Select the relevant database
4) Click on Check All (unless you want to target a specific group of tables) and then select Optimize table
5) You should receive a confirmation message. You are done!
If you don’t want to get your hands dirty when using WordPress, there are many plugins that will help you do this. For instance: WP Clean Up Optimizer
10) Compress your code
Yes! In the same way you can compress some files on your computer, web pages can be compressed too! Why would one do that? Easy, to save bandwidth and speed up your website. As they show on Pingdom (they are experts in web performance), you can easily reduce the size of your website by more than 75%.
On WordPress, there are multiple plugins that will help you do that, usually with a single click, such as WP Fastest Cache or Enable Gzip Compression.
If you don’t have WordPress or any other CMS that accepts plugins or extensions that will do this for you, you’ll probably have to configure your server. For example, on Apache, it’s as easy as adding the following code on your .htaccess file:
# compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript # Or, compress certain file types by extension:SetOutputFilter DEFLATE
You should note that some older browsers may have trouble with Gzip compression. Take this into account if your website is visited by these older browsers.
11) Make use of AMP (if you can)
AMP stands for Accelerated Mobile Pages, and it was developed by Google “to dramatically improve the performance of the mobile web.”
Basically, AMP is a mobile-optimized HTML with very strict rules, aiming to offer really fast page views, which involves stripping down the website and offering just what’s needed. Think about it like a Reading Mode of your website, distraction-free.
Here are all the rules you need to follow, and here’s how you can validate your page.
Obviously, you need to think about whether AMP is good for you or not. It is true that Google gives a boost to your website on search results if you use AMP, and that your website will load super-fast, but so it is that your site won’t look as nice as you want and you won’t have analytics or ad revenue.
On WordPress, the process is very easy. You just need to (guess what) install a plugin and that will be it. The plugin is AMP. Here’s a good video tutorial made by WPBeginner:
We suggest you also read an older post of ours where we talked about AMP: It’s time to get acquainted with Accelerated Mobile Pages
12) Analyze your website speed optimization
Lastly, we have the famous website performance test tools. These are websites that analyze other websites (yours) and give you a very extensive report about how your website can improve its speed. Let’s check one of the most notorious ones: GTmetrix.
1) Enter your URL in the big box:
2) Now wait until the analysis is done…
3) And now you will be presented with a report. Usually, as you can see here, you will be given a score and then some recommendations to improve your webpage performance.
All these tools work in the same way. Here’s a small list:
– GTmetrix
– PageSpeed Insights
– Pingdom Tools
– WebPageTest
As a side note, don’t get obsessed with them and try to go always for the maximum score possible. They are great tools, but you need to take them as a reference. For example, let’s say you got this:
The effort and time used to pass from 99 to 100 will not be worth it; your website won’t load noticeably faster and you won’t get better SEO rankings.
Extra ball: Monitor your WordPress site performance
For those of you who like to be picky and want their WordPress website to load as fast as possible, it may be a good idea to do some profiling if you are technical enough.
Profiling is the process of analyzing the execution of an application, measuring the frequency and duration of function calls, memory consumption and more. It helps you figure out where exactly is the bottleneck in your application, in this case, WordPress.
As a starting point, the WordPress Codex has a short tutorial on how to do this. If you are not a WordPress developer, that may seem difficult, so even though it may sound ironic to fix a plugin or script with another plugin, you can give Query Monitor a try.
Query Monitor is a pretty famous plugin which shows you all the queries happening on a page and much more, such as PHP errors presented with their responsible component, enqueued scripts and style-sheets or HTTP API requests.
For example, here you can see on a test site how many queries happened and by what component:
At the moment of writing this article, Query Monitor has 304 5-star reviews out of 312. It must be good, right? 😉
We hope this article helps you improve your website performance so it experiences the boost it deserves!
Author’s bio: Gerard Blanco is a freelance web designer and content writer, and a part of ShortPixel’s team. If he’s not busy manipulating CSS, you’ll find him reading the latest tech news, watching Barça matches or playing Red Dead Redemption 2.
You can get in touch with him on his website www.gerardblanco.com
Image 1 by Jonathan Peterson from Pexels
Original article Published here >
* Optimise WP Website Images with ShortPixel – Super Fast Website, Optimised SEO, WordPress Plugin (Referral Ad)
