Improving Site Performance: An overview

The site performance workshop goes into detail explaining why site performance is important for WordPress and explains tips on how to improve the performance of a WordPress site. The workshop also covers several techniques that allow users to improve the performance of their WordPress sites.

Learning outcomes

1. Recognize the factors that affect WordPress site performance.
2. List the ways you can improve WordPress site performance.

Comprehension questions

• Why is low performance bad for your site?
• What techniques can be used to increase your site’s performance?
• What method of improving speed stores previous requests that can be reused?
• How can compression be used to improve page speed?

Transcript

Hello, everybody, my name is Hari Shanker. I’m a deputy with the WordPress community team. Today, I’m here to present a workshop on the topic improving site performance. Today, we will be looking at the following topics as part of the session, we’re going to learn what site performances, we’re going to learn how to measure what type performances. Next, we will take a look at how those factors that impede site performance are those factors that prevent your site from performing well. Finally, the as the fourth step, we take a look at some steps that we can do to improve site performance dition. This includes caching, the signals offloading, this includes optimizing site performance. And finally, this includes compressing. And finally, I provided summary of what we learned so that you can take back home these things, and you can practice it on the site that you’re building. All right, so let’s dig deeper by exploring what exactly site performance is. So To cut a long story short, what the site performance is the measure of how fast the pages of a site load, as simple as that, how fast does the page of your site load? So if the page of pages of your site load fast, that means that your site is performing? Well. If your site takes a long while to roll, that means that your site is performing bad? Now, that brings us to the question, why does site performance matter? Now, obviously, everybody likes a site that loads fast. So whatever you’re doing with WordPress, on the internet, you’re building your site, not for not just for yourself, but it’s for somebody else. In fact, it’s for tracking visitors and customers. So when your site performs well, it is an incentive for your visitors to come and visit your site again and again. So yes, better performance improves your visitor and customer experience. And next in the most important thing, we’re just getting more and more important as Google keeps improving earnings are modifying their search algorithms. Almost all search engines, especially Google, they rank sites based on the performance. So if a site performs better, it is ranked top on the search results. So you want to make sure that your site performs the best possible way so that it shows up on top in the search results. And so this factor is getting more and more weightage as Google keeps updating their search algorithms. And this applies to other search engines as well. So make so that is one great plus point of having your site perform better. And finally, an adequate site response rate helps to decrease the bounce rate, what is the bounce rate, bounce rate means the number of people who visit your site and just go away, they don’t spend a lot of time in your site. So these these are those folks that visit your site and you lose them because they don’t interact with your site. So you do not want to use us to bounce off. So let me use I’m visiting a website, I realized that that’s very slow. And I feel frustrated about it. So I did not do what I came to the site to do, and I just go away. So that is not what you want to happen. You want your users to come to your site, you want users to interact with the site, you want to give your users the best experience possible. Now, that is why site performance matters. Let’s look at some quick statistics. Around 40%. People say that they abandon a website that takes more than three seconds to load. And as you can see, a one second delay in a bass response can result in 7% reduction in conversions. Just imagine, delay of 1% takes 7% reduction. So what would a delay of 10 seconds be? Or what will what would the delay of 20 seconds be? And last but not least 47% of the consumers expected with patient glory in less than two seconds or less? So what if your site takes 10 seconds to load? What if so what if what if somebody is visiting your site on a mobile device, and it’s taking them more than 10 seconds to load that’s also pretty important to most of the people that use websites use mobile devices these days, when somebody visits a website on a mobile device, and they realize that the site is not loading as fast as they want to, it’s not doing in two seconds, or it’s probably taking five or six seconds, that is going to be frustrating for them. You don’t want that to happen. So these are the reasons why website performance is very critical in these days. And that is a reason why we strongly recommend that you do whatever you can to make sure that your site performance is best. We’ve learned about the importance of site performance. But how do you measure site performance? How do you check if your site is loading fast? Of course, you can always try loading a website on a computer or on a guest computer or on a phone to check it. But you might get a very brief if your site is slow or fast, yes, because that is the same experience that your customers get. But that is still an empirical way to response to that is still an empirical way to measure the response time of your site. You might want to dig deeper in and you might want to find some actual statistics on how exactly your site is performing.

So for that there are several tools. I can recommend a few of them here actually. So one of them is web page test. It’s a tool for testing real life sight performance from different browsers with different locations and different connection speeds. The other one is Google PageSpeed Insights, it’s a way to measure your precise performance and give you get clear and specific feedback on how to make improvement. So these improvements, interestingly, are good are often related to WordPress. So Google provides you specific insights related to WordPress, which will help you improve your site. And finally, your browser. So if you’re using a modern browser, like Google Chrome or Firefox, you may have your browser will have some performance measurements tools. So these are the tools that are available that that can help you measure the speed of your site. Now, these tools are not the be all and end all there are several other tools out there. If you do a casual Google search, you might actually find another several other tools. But even though I’m recommending recommending these two, these tools are not the be all and end all there are several tools or tools that he knew is wanting to share that fact as well. So these tools can help you measure the performance of your site, and it can help you find out what’s actually wrong and get it and you might also get some tips on how to improve the performance. Next, we take a look at what impedes site performance. There are several factors that do this, the most important among them is hosting. So when you start looking at the hosting factor that could potentially impact the speed of your site. We also are looking at the type of hosting. So what is the type of hosting that your site is hosted on? Is it on a shared hosting? Is it on a VPS? Or a dedicated server? Is it on a managed WordPress hosting? Or are you using a cloud host. So we’ve seen that most people prefer shared hosting because it’s very cheap. What does the shared hosting mean? It means that your website is hosted on a server, which is shared by several other folks. So several websites are hosted on a shared server. So if you’re using a shared host, there’s a and if the traffic of your site goes up, there’s a there’s very good chance that the performance of your site could go down. So if you’re using shared hosting, you might want to use some techniques that we’ll be discussing later in the session, which includes caching, and offloading, which are great ways for you to improve the speed of your site within the limitations that you have. And one of the main limitations with shared hosting is that your your site is hosted on a single server. So that’s a very less, that’s probably just one server, which is having a high traffic site in case the traffic in your site goes up. So that could cause a decreased or reduced performance in your site, that could be a reason that could be the reason behind the reduced performance on your site. The other thing that you might want to keep in mind is is the hardware performance. So obviously, as I was like, it’s just like a computer. So it depends on the performance of your site depends on the hardware of the server. So if your server is using SSDs, if it if it if it has a high processor configuration, your site’s performance might go up. But this may not really be applicable. In the case of a shared hosting this, several sites are using sharing the same infrastructure. But if you are using a dedicated server, this might be a good way to measure or improve the situation of the speed of the office. And finally, geographical distance. So where is your server located in Where are you located, let’s say if you’re based out of Thailand, and if you are, if your site is hosted in, in North America, and most of your visitors are from Thailand might actually make sense for you to get a host in your in your vicinity, maybe in Thailand, or maybe in Singapore, anywhere near you. Because when somebody from Thailand visits a website, the request goes directly to the US. And that’s going to take a lot of routing time. So you might want to fix that. And finally server load, there’s a load limit that our server can can handle. So if the load goes up, that’s that main cost is the main cost your site to slow down. So this is also a factor which might cause your site to slow down. Next up is software version and performance. So this could be a major reason why the your site is slow. So if your site is not configured properly, there is every chance that it may not be functioning well. So what could cause this. So let’s say you have a site, which has a resource, heavy theme, what is the resource, everything. It’s a theme, which has a lot of files, a lot of functions, and you have several plugins in your site. So let’s say you have like, you have maybe 5060 plugins or maybe 100 plugins. And so that means that your site site is extremely resource heavy, that is a recipe for disaster could slow down your site. Next is the use of graphics or images. Sometimes this naturally Will you may have to use lots of large images. So if you use a lot of large images and images, and if you use a lot of large content that might actually slow down your site as well.

And And finally, it could be the size of your database content. So why does the database content blowed up? So if you say there’s a lot of content, or if your site again, has a lot of plugins as a very bloated theme, that could actually cause your database to grow up, so as you know, the wordpresser That you see that is being rendered from the database into the front page of your site, it’s rendered dynamically. So if your database is big if your database is bloated, and that’s, that’s going to cause a lot of time invested in getting those queries responded and getting in and rendering the site dynamically, so that might actually slow down your site. Now, we’ve seen some of the potential reasons which could slow down a site. Next, let’s take a look at the steps that we can do to improve the performance of your site. So there are several steps to do it. Let’s start off by looking at how to optimize your software. So the first thing that you can do this is a very obvious step is to minimize the plugins that you have to look at the number of plugins that you have in your head, how many plugins Do you have installed? Please remove any unnecessary plugins that you have, you don’t need 100 plugins. So maybe so there are some plugins which combine several features of all the plugins that you have, you can use one of those plugins, so that’s a great way. So do a do a very thorough audit of your plugins, remove all the plugins that you need that you do not need. So maybe you install a plugin some time back for a specific feature, you may not need it right away, but you forgot to remove it, now’s a good time to take audit and remove all the plugins that you do not need. Next, let’s take a look at optimizing content, which is the next step. So in this step, the first thing that you need to do is to remove unneeded images. So as I mentioned earlier on in this workshop, if your site has a large number of images, that could be the reason why it is slowing down. So you know, if you do not need a lot of images, you can remove all those unneeded images, because that’s going to speed up your site significantly. Next, again, that’s the again, your site may have a lot of very large images. So let’s say you’ve taken an image using a DSLR camera or your your your phone or your smartphone, your high end smartphone that is and you upload the image directly to WordPress. Now that image is like five MB and this five MB images on your homepage. So when somebody loads your homepage, tasks load the five MB image for a sidewalk. Now, that is going to slow down your site you’re not So interestingly, the five me image is probably at 20 megapixels, because you do not need a 20 megapixel image on your site, you can you can compress it into JPEG format, you can use JPG format, you can reduce resolution to anywhere between 204 to 151 by 1536, or even want to eighth row by 768 or one nine to zero by one’s rates. So you can reduce the resolution to that picture. So to that set of pixels, and you can use it use it with any image compression software. And that significantly reduces the load time and makes your site faster. So that’s something that you can use. Next is to reduce the file number and size. This is also something that you can definitely try. So if there’s any unnecessary, unnecessary or unneeded files, you can remove all of them from your site. And yeah, so another thing that you can use is to combine multiple files into a single optimized file and finally to minify, your JavaScript and CSS file. So you can minify your JavaScript and CSS files with the help of plugins. There are several plugins for it. One of them, which we will be recommending in this session is WP WP total cache. So you can use one of those plugins to optimize or to minify, your CSS files and JavaScript files. So that’s the optimized content part. The next one is upgrade your hardware. So if you’re on this, this applies to you. Specifically, if you’re on a dedicated server, if you’re if you’re on a shared server, this does not really have an impact on you. But if you’re on dedicated server or VPS, and if you have the freedom to increase your server RAM, do upgrade processes move to SSD drive. So SSD solid state drive technologies is the latest thing in computing, it really improves the speed of accessing files and things like that. So if your server is not on an SSD drive to upgrade to SSD, how do you do it, you can actually speak with your dedicated hosting provider, you can switch your plan. So that’s one way to do it. And for heavy sites, separate services with functions. What does this mean? This means that

your sitemap your site may have several features, you can actually switch split things, let’s say, which means that one part of your site lives on on a particular server and the other part of the site lives on another server. So that’s, that’s something else that you can, you can try out an example of switching services, you can separate your STP and MySQL, that’s a great way to or you can, you can probably use multiple servers or multiple VPS to serve a single site. So there are there’s software that allows you to do it. So that’s a great way to speed up your site. Let’s say you’re running a large website, and you want to make sure that the performance of your site is still good. So if that’s the case, these tips are going to be especially valid for you. The first one we can recommend is to use a managed WordPress hosting solution. What does it manage WordPress hosting solution? So it’s a solution where the web host essentially takes care of all the dirty work all the system administration things so the web host manages your WordPress it decision for you, you do not have to worry about system administration tasks, what a system administration tasks. So, you do not need to worry about the performance of a site. So the host provides you guarantee it, it takes care of all the hard things, it helps you with the cash it helps you with. It provides you several features it It improves the performance of it ensures that it gives you guaranteed uptime. So, essentially, it makes sure that your site stays up. So basically, when you are on a dedicated server, you’re on your own system administrator, you need to take care of your site’s uptime. But in the case of a managed WordPress hosting solution, you’d not have to worry about it.

So typically managed hosting WordPress hosting could be slightly more expensive than regular hosting services. But if you can afford it, and if you want to go ahead with it, you want to make sure that your site is always up, I would strongly recommend using a managed WordPress hosting solution. Next, do not run a DNS service on on over to subject so this is not very typical. Not everybody wants a DNS service on a WordPress website. But if you are providing domain name solutions, if you are providing solutions do not do that on WordPress website that could that could cause issues. Next, use techniques like server caching to prove your website’s what is server caching. We will talk about caching later. In this session. It’s it’s a topic in itself. But to summarize, caching is a way to way to ensure that your site stores the data that isn’t essentially preloads the data that’s stored on your site. So many management posts already do it. But if you can, if you have not on a management software post, there are techniques, there’s services like varnish that allow you to do it. So to set up set up server caching on your site, that’s a great way to improve your site performance. And another thing that you can do is if you are if you’re running your own dedicated server, you can use services to tune up the performance, you can update your software versions or you can you can change your server software. So this many people use a patchy people, several folks recommend using nginx, which is a different service. So you can use Apache lightspeed or you can essentially modify your site configuration using services like memcached. So there’s several things things you can do in the backend. So that is outside the purview of this workshop. So we’re just covering the basics. Yep. But again, bringing the software of your server is a great way to improve the UI of your site. And yes, you can use PHP accelerators like APC and opcache. So these essentially allow you to improve the performance of your PHP code. And that essentially, directly has a positive impact on the speed of your site. And last but not least, there’s always MySQL optimization. So what is MySQL, MySQL is a database tool that is used to manage the WordPress website, website static websites database. So when your MySQL code is optimized, it means that your site sites queries, execute faster and make sure that your site is fast, we briefly touched caching. Now let’s take a look at what caching is. So caching essentially, is a temporary storage of web pages and images to reduce server load. How does this happen to this happens in several ways, so the website itself can fill out a lot of the information so that once you when you visit the website for the first time, it loads all the information. And then when you when you visit again, again, the server will not do it. So the caching can be done on a browser level on a server and on a server level. So that’s it, there’s few ways to do caching in WordPress. So the most common and obvious way is using WordPress caching plugins. So what these plugins do is these plugins, they, they store WordPress posts and pages as static files and serve them. So when you visit a website, a lot of time is taken to fetch data from the from the server from the from the from the database and and to fetch that data to you. So this is prevented by so this is prevented by these caching plugins, what they do is they store all the WordPress blog posts and plugins, they query the database, they store all the information and they serve it to you. So it’s like visiting a static page. So the database query and a lot of the things that happen in the backend that is speeded up to that that is the real advantage of these caching plugins. So I’ve given some examples which are WP Super Cache, and that will be WP total cache. But those are not just the only caching plugins, there are several ones among them, you can you can test out one of the ones that you want. The next type of caching is server side caching. So this is typically done by the server, like the host. This is slightly complicated. The process of how server caching works is slightly beyond the scope of our our workshop today. But to go very high level overview, the server essentially preloads a lot of information. So preloads, a lot of the information that is provided by the site and gives you direct and service that you directly. So there’s a lot of complex things happening behind the scenes for in case of server side hashing. So there are technologies like varnish this bad cache memcached, which we spoke off earlier. So these are all several software add ons that can allow your server to do caching on the server side and serve data fast. There’s also a technique called using a technique of using multiple caching servers. This is called a reverse proxy. So a site has could have multiple caching servers, which means that several caching servers, the preload all the information in the site, so when there’s a request when somebody wants to visit a particular page in the site, these hours they serve the information instead of getting the information directly from your web host. Right. So this speeds up to this This removes a lot of the intermediate, a lot of the queries that happened in the back end and saves the data directly to you. So which means that your site is fast. And last but not least, this is also caching. So this is done by most modern browsers, they have some sort of server caching. But WordPress plugins, they can make use of this. So they can actually make use of the server caching to make sure that a lot of the images, CSS and JS files are stored in your use of your computer.

So it can improve the browser caching, which is already done by browsers to make sure that your site’s load fast. So all these three techniques are used by several caching plugins or several caching methods to make sure that your site’s load fast. And this is a great way, this is one of the most recommended in the most common ways to improve the speed of a site. So if your site is slow, I would strongly recommend setting up caching because that’s a great way to improve the speed of your site. Next is content offloading, so what is called an offloading, it means set. So your site is hosted on a web host, all of the contents in your site’s site is hosted on the web host. So this includes images, web pages, and there’s a lot of database queries and visit actually, obviously database. Now, content offloading means that a lot of these a lot of these files which are served from a database, they are stored elsewhere. So how can how does this really happen? So there are several ways to do this. Again, the most common way is through content delivery networks, or CD ends. So you may have heard of this term, the term CDN is pretty popular. So what is the CDN? a CDN is a network as a service, which takes a lot of the information in your site, and it stores it. So when there’s a request, the CDN server the information and the information does not I mean, not not all the information comes from your site. So how, how it improves the performances. So when you load a page, your web host does not have to serve the images, the images come from the CDN so that naturally improve the hosting speed, improve the speed of delivery. So that’s a great way to do it. So if you want to try out a free option, there’s always setbacks in Jetpack so very similar to slugging it has its own photon CDN, which loads all the images from the wordpress.com network. But if you’re looking for paid options, which are more enterprise grade, there is CloudFlare, which is very popular solution does Amazon CloudFront are two different discrete services called Maxine and key CDN. They all have WordPress integrations, and they can allow you to build a CDN to load your site fast. The other option is static content. So a lot your site may have a lot of static content. What is that? What is static content, this includes like static files, like images, style, script, CSS, etc. So one of the major reasons behind a slower loading time is that your site, your site, fetches requests from your web server and delivers it to you. So so the web server where your site is hosted, that has limited in the number of requests. So when the whole when the whole data transfer takes place, that takes a lot of effort, that takes a lot of resources on your server. So all the things, which means the request could take a long time. Now this can be fixed by adding multiple host names. So how can this be done in reality, you can host all the content in multiple host teams. And you can, in your URLs, you can make references to those URLs. So there are there are, you can actually even do this with the help of custom coding. Now, if you set up multiple host names, that’s also great way because like, if, let’s say if you have to, as I mentioned earlier, each host has a limit of two requests. So if you if you set up for hostnames, that is two into four, you have eight, you now get a request simultaneously. So that is a great way to improve to improve the routing suite. And finally, hosts your feed separately what is a feed, each WordPress website comes with an XML feed XML RSS feed. So this feed is really helpful in feed readers. And it can also help with your search engine optimization. Now this feed when you when you load a website, the feed is also loaded on another feed could be resource heavy. This can be prevented by hosting like offloading the hosting to another service. So Google Feedburner is very popular to for hosting hosting content. So you can probably try out a service like that for hosting fees. The next way to improve the performance of a WordPress website is using compression. So what is compression compression means that you can reduce the size of the files on a WordPress site so that it loads faster. So one of the reasons why a site does not load fastest because of the larger file size of its contents. If we can reduce the file size, then it means that that site loads faster. How can you actually get into this? One of the ways is minification. So minification. It removes all the unnecessary or redundant data from the code without affecting performance, minimizing the size of the file that needs to download with the user’s browser. So what are the files that can minify so WordPress uses JavaScript files, what produces CSS files, all these files can be minified, which means that their sizes can be reduced. The COVID Don’t go away. Some of these files could be quite big, they could go into several megabytes. So we can actually by minifying, reduce their size to a few kilobytes. So that’s actually some plugins that can help with this. So I’ve shared some examples of the slides. One of them is WP total cache, which we’ve seen in this workshop quite a bit. And there’s WP smashing, II ww Meetup optimizer, there’s several plugins that can do the minification, it can really help with reducing the size of the images by compression.

Next, let’s take a look at the other speed optimization techniques. So we’ve seen quite a bit of techniques, we’ve seen the caching, we’ve seen speed optimization, we’ve seen offloading some of the other techniques is one of one of the main ones is database tuning. So what were what was database might really bloat it, the size of it might go up, it might get really big. So this can be improved. With the help of database tuning, what is database tuning, it’s a technique to remove all the clutter in the WordPress database and improve its speed overall. So this can be done using a plugin like called WP optimize. But again, that’s not the only plugin, there are several plugins that can allow you to do it. Or if you are brave enough, and if you want to really dig deep into the SQL and remove all those details, you can probably do that on your own as well, you can probably dig deeper into your WordPress database and do some tweaking if you have those skills. But otherwise, you can use one of these optimization plugins to improve the quality of the database and make your site fast. The other techniques that we use to achieve that support briefly is by adding servers. So a website if it’s especially large, it can be served using multiple servers. So it’s a great way to speed up your site. So you can distribute the content of your of your server office site to multiple servers. Now, one great way to use to achieve this is by moving all the web pages images to it to another server to reduce the server load. So there’s actually a tool called load balancers which allow you to balance how the content is being served from different servers. So that’s also a great way to optimize the performance of your site. So we’ve discussed a lot of things today. Let’s do quick summary, let’s do a quick roll up. To see what we’ve discussed. The first thing that you need to keep in mind is to choose a reliable and powerful hosting. If you can only afford a shared hosting plan, that’s completely fine. But if you are planning to run an enterprise web site, you might want to reconsider it. So you can probably offer a cheap managed hosting plan. If you’re using a dedicated server or if you’re using a VPS, it may be a good idea to configure it to your to your liking to make sure that it’s configured properly, because that can play a major role in improving speed of your site. And you can always you always have the option of falling back on a managed WordPress hosting service, which can reduce all your system administration pains. Next is enabling caching and compression. These are really easy techniques which you can achieve with the help of plugins. So by minifying your files and by setting up some caching plugins on your WordPress site, you can really, really improve the speed of your site. And third, this very obvious step, use a lightweight theme and do not overload your site with plugin. So I cannot stress the importance of this because this is a way even though it’s very obvious, it’s sometimes not very much practiced. So you might want to try out this step as well. And finally, try to use third party services to offload reconnect. So especially if your site is really big, if there’s a lot of information, use a third party service to offload your content, which could be images, which could be JavaScript files, which can be CSS files, if you if you if you’re able to offload a good amount of content that can significantly improve the speed of your site. All right, folks. With that we come to the end of this workshop, this Learn WordPress workshop on improving site performance. We’ll have more of these workshops on this specific topic and other topics in Learn WordPress soon. This workshop was intended as a very beginner audience with a very general audience. So we didn’t really dig deeper into the nitty gritties of improving site performance. That is for another workshop which is coming soon as we speak. So with that, we wrap up this workshop. Thank you so much for listening and I will see you online soon in a Learn WordPress workshop or on discussion group. So bye for now.