Move WordPress posts with media files

I’m currently working on a website revamp for one of our clients and it’s a full redesign/restructure.

This means that almost everything will be changed, structure, pages, content, media files, etc. Only the articles will remain as they are and will be moved on to the new website.

At this point, I want to move all the articles from live site.com to the staging version that we created at staging.site.com.

Here are the steps that I took in order to move the posts and images correctly.

1. Export and import posts with WordPress Importer

The easiest thing you can do is use the WordPress Importer. Export the posts from the live site and import them into your staging version. Works like a charm.

WordPress Importer

Now that you did that you notice that there is an issue.

It will import your articles without the media files. All the media files in the articles will still point to your live site. So you’ll have images with src=”site.com/wp-content/uploads/2020/01/image.jpg”.

2. Move the media files via FTP or cPanel

You should move the media files to your new WordPress install. Do so by using FTP or directly cPanel if it’s on the same server.

The point is to move the whole uploads folder.

Don’t do it file by file, archive the folder on the server, move the archive via FTP and just unpack where you need it to be. It will save you a lot of time.

3. Search and replace the old URL in the articles

Get the Better Search Replace and run a Dry search first for your live address and see what it returns. In my example, it will be www.site.com.

Your goal is to make the images point to your current address. You will end-up running a search and replace after www.site.com and replace it with staging.site.com in my case.
Yours can be www.site.com and replace with www.newsite.com.
You’re only interested in replacing the main domain because the file structure for the media files will stay the same.

Once you’ve completed this successfully you will see the images from your posts are pointing to the new address on the current install.

Now you will stumble upon another issue: the media files are not displayed in your Media Library.

4. Add your images into the Media Library

For this step, you’re going to use a plugin called Moving Media Library.

Install this plugin on the first site (from where you want to export), export the JSON format file with this plugin, and import the file on the new site.

This will migrate all details related to images and make them available in your Media Library.

Moving Media Library

It will maintain:

  • ID
  • user ID
  • Date and time
  • Folder structure
  • File name
  • Dimensions
  • Thumbnails
  • Exif data
  • Alternative Text
  • Caption
  • Description
  • Comments

At this point, you’re done with your posts transfer and media files.
You should have all the media files in Media Library and also correctly linked in the posts.

There is an extra step that you can do.

5. Remove unused Media files

In my example, we’re doing a full revamp of the website. All things will be re-done and the content will change on pages, product pages, any other assets will be replaced.

By moving the whole uploads folder I also moved a lot of files that will not be used anymore on the new site.
I’m interested in keeping only the files that are attached to the blog posts.

Media Cleaner Pro is the tool you’ll want to use for this.
You can go with the free version, but the Pro has a few amazing features.

Once you run the Media Cleaner Pro you’ll be able to get rid of all the extra media files that are not related to articles.

To give you an example, I moved 3.6GB of media files. After I run Media Cleaner Pro and kept only those that are actually used, I ended-up with 0.9GB of media files.

Warning!
Make sure you have a backup before using the Media Cleaner Pro and that you also activate the Trash option in this plugin. Once those files will be deleted they are gone.

Store libraries locally

I have one example in mind that really annoyed me.

One of our clients needed some features really quick and I wasn’t around at that time to help with it. They got someone from UpWork to do the job and they did it, it worked as expected.

All good until the client mentioned that the loading time is quite high now. We started to look at the code and how it was created to find out that all the libraries were embedded from 3rd party CDNs/servers. Not even the minified versions, the full ones.

We ended up with OwlCarousel twice on the site (and now loaded everywhere), we ended up with Bootstrap twice and some other JS library being delivered from 3rd parties.

Keep libraries locally

My main focus here is the CDN libraries.

This is something that I noticed a lot in WordPress development projects. Mostly when it comes to someone working on an existing project.

Clients will come in and ask for improvement, or some feature to be added on their existing website. This means you need to deal with the code that someone else created, the folder/file structure, re-use some functions/scripts, etc.

This is tedious and it takes time, you just want to have that thing done and ship it. It’s totally understandable, but you also need to make your adjustment robust.

Linking the libraries in the <head> directly from a CDN or server is not a good practice.

It’s perfect for the development environment where you want to quickly test and see if it does the job and you don’t have to worry about adding the library into the compile process or enqueue it on a specific component.
But for the real-world, when you ship that solution, you should store that library locally in the folder of your project. If the project will use a CDN and that asset will be delivered from there, then perfect.

Do not rely on a 3rd party CDN or server to deliver your library.

Reasons

  • It might get an update and break your production site (in most cases they are version controlled, but it can happen)
  • It can get deleted at some point
  • The CDN/server link my go down
  • Multiple requests on page load
  • Slowing the loading time
  • Offers details on what libraries you’re using. Might be easy to target some exploits.

Build things that are durable, robust, and don’t need any external help to run.

Stop Divi from overwriting your shortcode or element CSS rules

I ran into an issue while using Divi and it’s getting a bit annoying.

You might have clients that use Divi for their sites or maybe it’s your favorite way of creating pages. It’s a very powerful visual composer/builder and you can easily create pages without a lot of coding knowledge.

But it can come to a point where you need to display something more complex on the page, grab some specific data from somewhere, a certain type of element that Divi doesn’t have, etc. For that you create shortcodes and you add the shortcode into the page, et voilà: you have rendered whatever it was you needed on the page.

In Divi you’ll have to go an extra step because it will mess with all your CSS that comes with the shortcode.

Divi does this annoying thing where everything is wrapped in .et-db #et-boc and overwrites style added to <div> elements, <a> elements and others.
.et-db being added at the <body> level and #et-boc at the Divi container level, it will apply to all elements that are inside a Divi container.

This kind of forces you to use the Custom CSS from Divi or add CSS in the page, I hate doing that. It might be great and easy for a person that doesn’t understand code, but I don’t find it useful at all. Especially if you have created a global element like a shortcode and you want to be able to use it on different pages and don’t worry about how it renders because of the builder used on that page.

One way to deal with this is by using Sass or SCSS on your shortcode component. You will define your CSS rules for the component but also for the component when it has a parent, in this case the classes mentioned above.

The end result will look something like the code below, notice that we refer to a parent by using &. (you can learn more about the parent selector here)

					

.my-element-class {
  /*add the proprieties in here;*/
}

.my-element-class {
  .et-db #et-boc & {
     @extend .my-class;
  }
}

or you can do it like this

					

%my-element {
  /*add the proprieties in here;*/
}

.my-element-class {
  @extend %my-element;
  .et-db #et-boc & {
     @extend %my-element;
  }
}

This way you will not duplicate your code in the SCSS file and you can keep everything clean in there, the shortcode style rendering correctly in Divi or used outside Divi.

I didn’t run into this particular issue when using WP Bakery for example. That’s one of the reasons I prefer it over Divi.

Getting a VPS and things to know about

Just a little back-story about how this article came around.

We do a lot of web development, mostly WordPress projects, but started to branch out into Laravel a bit.

Until recently we used a shared hosting plan and we were very happy with it: no downtime, a lot of flexibility concerning different PHP versions, full backups for the last 14 days, no limit on traffic, databases, files, a lot of space. And because it was only used for development and no real traffic directed in there, it wasn’t slow at all. It also was in the same city, basically in our back-yard.

Things changed at the end of 2019 and we started to get a lot of downtime. Something was wrong with the server we were hosted on, meaning that at times we got 20-50 minutes per day downtime on various sites that we had in there. Support was not helpful in this matter since, being a shared hosting, they don’t track everything that is happening in there.

So, in January we switched from a shared server to a VPS.

Why switch to a VPS?

There are multiple reasons to do that:

  • Your business got bigger and you need to support more traffic.
  • You’re working with new/different technologies that require control over the environment
  • Having dedicated resources from the server and not sharing them with others
  • Taking things more seriously, by investing a bit more on something that your business relies on.
  • Problems (like downtime, or lack of support) with the shared hosting that you’re using

Let’s say that, for us, traffic was not the issue.

We wanted to fix the downtime problem that started occurring in the past month. We also wanted to work with Laravel more and it required an SSH connection. At the same time, we were intrigued by the idea of managing a VPS and working directly with the machine. Last but not least, it was about taking things more seriously by investing in something that, from our point of view, is more reliable.

VPS alternatives

There are a lot of VPS alternatives out there. Pretty much every hosting company has a VPS option.

Look into all the options and see what suits you.

Things to consider:

  • data center location
  • price
  • managed or unmanaged
  • the operating system options
  • what is included in the support

Here are some VPS providers that we worked and had good experiences with: Inmotion Hosting, Digital Ocean, Hostinger. You will find articles comparing them with one another, go ahead and read them.

If you’re mainly interested in development, get one that is in the same location as you. That’s what we did. Personally, I need the thing to be easy to access (fast) and have support in the same working hours as me.

Managed vs unmanaged VPS

All VPS options will have a managed or unmanaged alternative.

A managed VPS is one that already comes installed with a WHM/cPanel or other alternatives, it has everything set for you: installed libraries, the configuration in place, support that will do anything you need without you having to worry too much. All these, while in most cases also providing you access to all the VPS awesome features via a terminal.

An unmanaged VPS only comes with the OS installed and from there it’s up to what you need. You will have to install the WHM/cPanel, but apart from that you can install libraries and dependencies at your own will. When something is not working, it is you that has to go and look why. Also, support is limited to the OS and VPS – in most cases, they will not fix issues related to what you installed on the VPS.

To sum up, if you don’t want to ever worry about how things are working and what library is missing, etc., the managed VPS sounds like the better alternative. However, keep in mind that it is expensive. There can be a big difference in price (up to $35/month in some cases) between a managed and unmanaged version of the same VPS.

If you’re not afraid of using a terminal and you want to pick up some new skills regarding VPS configuration, go with the unmanaged version. It is not that hard. It took us half a day to get it up and running from zero to moving all the websites to it. And it will save you some money.

WHM and cPanel alternative

Something that you might not be aware of is that cPanel is actually not free. It’s licensed for about 15$ for one installment (1 account).

If you used a shared hosting until now, you most likely had cPanel and didn’t have to worry about it.

When you get a VPS you need to decide if you want to get cPanel (which comes with WHM), as it’s not included in the price.

The good thing is that most hosting companies that offer VPS are able to provide you with an offer of 5 cPanel licenses for about 20$. So you’ll be able to install cPanel accounts to manage different sites/domains however you find it useful.

Why you need WHM and cPanel

WHM (Web Host Manager) provides administrative control over your dedicated server or VPS. It allows a hosting provider to manage a customer’s account

To put it simply: WHM allows you to control the VPS and install cPanel accounts.

Without having this (or something similar) in place, you will only have to deal with the console in order to accomplish things and it might be a loss of time.

There are other free alternatives for cPanel, but I’ll mention just the one that we found to be the best: Virtualmin.

Virtualmin is easy to install, it comes with Webmin. Webmin is the equivalent of WHM.

It’s pretty intuitive, it has a nice visual dashboard, it allows you to run “scripts” – this is similar to the Softaculous part in cPanel. So you can easily install WordPress, a PHPMyAdmin, and other things in a specific folder.

Virtualmin has support for Let’s Encrypt certificates, which is also a huge plus. They are very easy to generate and will automatically be renewed, all done from the Virtualmin interface.

You have control over everything and the documentation is good.

Things to consider

  • You will need to know how to work with a terminal, especially if you opted for the unmanaged version of a VPS.

Depending on the OS that you have, the commands will change a bit.

I know it seems scary, but it’s not that bad. Yes, you can break things, but if you follow the steps and read some articles + documentation for the problem you’re trying to solve, you will be alright. Think of it as an opportunity to learn new things.

  • When installing a package/library, you need to know what it is for. You should check if you have a version of it in the first place, so you don’t have it in duplicate or add bloatware in there. You should also look over what is installed and clean things up from time to time

Our VPS option

Details at the time of writing this article:

  • KVM VPS
  • 50 GB storage (SSD)
  • 4 GB memory
  • 3 cores
  • CentOS 7 (didn’t go with 8 because at this point Virtualmin doesn’t have support for CentOS 8)
  • Unlimited bandwidth
  • Unmanaged
  • Virtualmin
  • 9 EURO/month (+taxes)

How do you set-up a WordPress Staging environment?

What is a staging environment?

It’s an exact copy of your production site but in an “offline” mode. And by “offline” I mean that it will not be accessible for users or search engines. Its purpose is to provide you with a playground in order to make adjustments/changes to the existing site without possibly breaking the live version in the process.

Why do you need a WordPress Staging environment?

The purpose of a staging environment is to make certain changes that you want to test before having them on the live version.

When it comes to small changes, adjusting the color in a CSS file or changing the submit button value, you can do it without creating a staging environment. You shouldn’t go through that process just for a small change, unless you have a very active site and you don’t want to take any kind of risk.

When should you create a staging environment?

  • You are about to make major changes to the site and everything needs to be tested; A new theme is developed, a new custom plugin created, new 3rd party implementation and so on.
  • You want to fix a bug and it needs a lot of testing and errors might appear on the front-end or certain workflows might get broken;
  • There is an ongoing process of changes on the site and you always need a staging that will test new changes before having them sent to production. This might happen if you have long term projects/clients and it’s a great idea to have a pipeline in place staging to production.

How to create a WordPress staging environment?

There are 3 ways of creating a staging environment:

  • using tools from your hosting provider
  • using a plugin
  • manually create a staging environment

No matter the option you choose, I recommend using a subdomain that is located in a different folder compared to the actual production site. If the staging version bursts on fire, you don’t want it touching the production site. This being said you can also have it on a different server, but you’ll want to have the same server configuration.

1. Using tools from your hosting provider

Hosting providers now offer tools to create staging environments on WordPress. WPEngine and Siteground have this staging feature available. I only worked with those, but I’m sure there are many others that do the same thing.

They let you create a staging on a subdomain and then push from that staging back to production when you’re done with the changes.

2. Using a plugin

My go-to plugin when it comes to migration is All in One Migration. It’s an amazing tool and it works perfectly. It’s good to know that this plugin doesn’t have an option to push from the staging to live once you’re done with the changes. You will have to create a copy and move it again through its interface.

On the downside, it’s not as fluid as you might like it.

Another plugin that does this and is created with the staging environment approach in mind is WP Staging. This will allow you to create a staging in a subfolder on your main site in a few moments and on the premium version you also have the option to push changes to the live version.

3. Manually creating a staging environment

This is the most complex way of creating a staging environment. You will have to do everything from creating the subdomain, moving the files, moving the DB, changing the address/path in the DB, etc. It’s not that pretty, but it’s also the one in which you have the most control.

Do the push to live manually

I recommend option #1 or #2, but without the push to live from the hosting provider tools or from the plugin. From my experience, those options are good if you have a stating environment, if you have an e-commerce, membership site or an active blog community, you don’t want to push from staging to live using those tools.

The fact that you can risk overwriting or losing transactions, articles, registration that happened between the 2 moments in time, is something that I wouldn’t take a chance on.

Use the tools from hosting providers and plugins to create a staging environment.

Do the file updates on production directly with a theme/plugin update, have a deploy bot maybe once you do a pull request into the master Github branch or via SFTP.

The WordPress option/settings that you’ve done on staging, you’ll pretty much have to replicate those by hand.

I know that easy staging set-up with push to live sounds good, but it doesn’t always work. Or at least it doesn’t work for every project.

To have in mind

  • Remove any cache system on staging. If you have to do a lot of changes or work on a completely new component, the cache will become frustrating. You can activate it once you’ve finished and tested with it.
  • Make sure crawlers can’t get to the staging version. Update the robots.txt and block all kinds of foreign access to the staging subdomain.
  • Try to use a similar server configuration to what you have on production. Don’t have the staging environment on your own machine (localhost), because you want to test it against the real-world situations.
  • Make sure you share the staging link with the client or tester. (you won’t be able to do this if you host it locally)

 

Things to check before going live with a WordPress site

You started the project, moved along through all the revision checkpoints, your client is happy and you’re ready to move it on a live environment with the proper domain, server, and so on.

Even if the project works well on your development environment, there are a few things you might want to look over before making it live and ready to be accessed by visitors and search engine bots.

Dynamically deliver assets

On long projects or because you want to do a quick test, there might be assets that are hardcoded in your project.

Some bits might need to be hardcoded, but be sure it’s dynamically made so when you change the domain it will still work.

An example from the top of my mind is when you add a background image in CSS with the URL from WP Media Library. You want to quickly test something, the image is in Media Library and you just add it in your CSS to test.

You forget about it and when you delete the dev version of the site you end up with broken content.

Search from your IDE in the project folder after the dev URL address to be sure nothing is left in there.

Server details

In most cases, this shouldn’t be an issue if you have a good hosting company.

  • Check the PHP version on the server and what you need for everything to work properly
  • Check if there is any kind of restriction on the number of requests and files that you can have

Basically do a full run of your functionalities on the new server just to be sure no surprises appear.

Clean any test data

You tested and tested the site for all the edge cases and now it’s ready to go live.

Make sure all the test data is removed when the site goes live. Sure, some data needs to stay in there (you might have standard pages or users that should be in there), but everything else should be removed and the database to be as clean as possible.

Content ready

If you cleaned the database and removed all the extra users, posts, pages, etc, now add in the content.

Be sure the right content is on the pages before making it live, or else you risk having search engine bots crawl on your site and index pages with “Lorem ipsum” text on them – this is not very professional.

Forms functionality

In most cases, contact forms are your way to get customers or feedback. This might not seem like such an important thing, but from your client’s point of view, forms not working means the site is not functional. If this part is broken and fails on sending the message, you and your client are losing business.

For example, in Contact Form 7 (or any other contact plugin) you might need to install an SMTP or else the emails will not go out.

Of course, not only contact forms, but any other ways of gathering the data should be tested on the live environment again.

Conversion rate is very important when you invest money in promoting the site or certain landing pages. Having the potential customer landing on the page but failing the conversion part, it’s just bad business.

Security

Always keep an eye on the security details. There is no need to explain how important this is regardless of how big or small your website is or if you have other users or just the administrator.

The most important and easy things to do:

  • Change the default administrator user to something else. Usually, you get the standard “admin”, don’t stick with that.
  • Change the password to something complex. I use the WordPress auto-generated password all the time, because it’s simple and helps me not having to create a password on the spot. Your client might want something that they can remember – suggest them to be a strong password (case sensitive, numbers, symbols, all that stuff).
  • Change the default login URL for WordPress. The standard login address from WordPress can easily be targeted by bots. You should change the wp-login.php to something personalized. Don’t do this by hand (you altering the code), just use a plugin like WPS Hide Login.
  • Install a security plugin. Wordfence should do the trick, it’s easy to use and it’s very popular.

A backup system in place

Periodical backups are a must: the files and database should be backed at least once a week. You can also go for twice per week, it really depends on the site and how much activity there is on it. If the content stays pretty much the same and there are no transactions happening, then you can set a longer period between backups.

A good option is UpdraftPlus – Backup/Restore. It’s one of the most used WordPress plugins and it does the job really well.

The hosting provider might also offer a backup system, use that too if you want to be sure nothing gets lost.

Make sure search engines can access the site

When you have the WP site (or any site) in development, the robots.txt is denying access for bots on your site. Or at least that’s the way it should be.

In WordPress, there is the option of Discourage Search Engines from crawling in Settings > Reading.

You should uncheck this after you cross all the points from above. Having the robots.txt still blocking search engines will make the site invisible for potential customers.

Clubhouse – a great project management tool

When I started working as a freelancer, I had no clue that I needed a project management tool. During the first year, I worked either from notes that I made in Notepad, or going through my emails and seeing what some of the requirements were for the project.

In retrospect, that was definitely not the most effective way to keep track of tasks in a project.

As I stepped into my second year and more people were involved in the same project, I started to look around and see how the “cool kids” were dealing with this issue. It was becoming quite clear that I needed a project management tool, but I didn’t know where to start.

Other project management tools

Searching for project management tools I found 2 that stood out: Asana and Trello. Not knowing which one to choose I said Why not both?.

So I ended up using Asana for most of the projects and Trello on a bigger project since the client was already familiar with it.

Both Asana and Trello have great features and integration with 3rd parties.

Both have a free option so you can enjoy the basic stuff without a paid subscription.

and what they’re missing

As I worked with Trello and Asana I noticed a few things that slowly managed to drive me crazy.

In Asana:

  • No way to switch from a list view to a card view after you started the project and selected one or the other.
  • If you are using the list view, there is no way to actually group tasks together easily. Yes, you can add a different heading for a section or add a tag to a task, but that is not enough on a complex project.
  • No way to assign relationships between tasks.
  • By default, the completed tasks just disappear, which is nice but not useful. You will have to go back and switch to ‘Completed Tasks’ or search for a specific task in order to find it and see what it was about. Basically, ‘Done’ tasks are not handled that well.
  • The subtasks will be forgotten. They get buried so deep inside the tasks nesting (especially if you’re using list view) that it’s impossible to go to a subtask’s comment/details. I just prefer not to use them at all.
  • The search option is a bit of hit and miss. When I’m in a project I expect to be able to search within that project only and not all over the place.

In Trello:

  • The missing relationship part is an issue here also. You end-up with duplicates or similar cards and there is no way to tell how they are related.
  • Because there are no categories/epics, you end up with a lot of columns in the project. So you’ll have to scroll a lot through the board so you can move the card where it’s needed.
  • No easy way to filter the cards in a board

None of them have an iteration solution implemented. In Trello you can create one by yourself if you add even more columns to the board.

To be honest I never bothered purchasing the premium version of Asana or Trello because it didn’t feel like it would change the situation.

But Clubhouse came around

I got it (even if it wasn’t a free option) and I loved it from the first minute.

What I like about Clubhouse

It’s really compact.

Everything is where it should be and you don’t need to scroll or click 3 times and load 2 different pages in order to get where you want to.

It starts with you creating a Story to which you add all the details you want: assign an Epic, set the state of it, add an Owner, provide details, set a relationship (if it’s the case) and more.

Clubhouse Story

As you begin working on the project and more Stories are added and/or completed, you start seeing how useful it is to have a design that is visually compact, but allows for much more information to be available when you open a story (all the details, comments, who is related to who and so on).

Another plus is the fact that you can filter Stories by Epics, see the progress of an Epic, change its status

The predefined Story Types – Feature, Bug, Chore – are very useful. The Bug one highlights that respective Story in red for better visibility.

Clubhouse dashboard

Do you like Milestones and tracking the project status based on that? Clubhouse has that too.

Also, a big plus for the search that works like a charm. You can search by Story name or ID, which is great.

And last but not least the iteration option that you can enable in Clubhouse, this will allow you to set tasks based on sprints.

There is a full list of those awesome features on their product presentation page.

To sum up, Clubhouse not only checks all the boxes already present in Trello and Asana, but it also brings the (really useful) features that the other 2 tools were missing.

Do you have any other reasons to recommend it?

Yes. It has Dark Mode and yes it’s free now.

Using it for roughly 6 months now, I can say it’s a perfect fit for a small team with medium to large projects.

WordPress speed optimization tips 2019 – part 2: Optimization tools

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

1. Cache

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.

Other features:

  • 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.

Hyper Cache

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.

2. Minify/Combine

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.

Autoptimize

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.

4. CDN

If you still don’t know what a CDN is, Cloudflare has a is a very comprehensive explanation for you.

Cloudflare

First of all, it’s free.

You get:

  • 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.
  • Firewall
  • 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.

 

Conclusion

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.

WordPress speed optimization tips 2019 – part 1: Test tools

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.

3. GTMetrix

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.

4. WebPageTest

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.

5. Pingdom

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.

 

Conclusion

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.

Code Snippet DM – WordPress plugin

Code Snippet DM

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.

Starting from that I used prism.js and clipboard.js to put together the plugin.

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.