Tag Archives: loading

The post 7 Ways to Improve Your Site Speed in WordPress appeared first on HostGator Blog . For the past several years, Google has been emphasizing site speed as a ranking factor in their algorithms. Given that, it’s amazing to see the number of under-optimized WordPress sites that exist. People spend so much time on “SEO” and content generation, and they forget to do the one thing that will increase the ranking of all their pages. Well, it’s never too late to get started. Here are seven ways to improve your site speed in WordPress. These will make Google sit up and take notice! These are listed in order of importance. Method 1: Use a Datacenter Closest to Your Clients The location of your server plays a big role in your site speed. For example, if your clients are based in the US, then HostGator is an ideal web host, since we have two data centers in the country – one in Texas, and one in Utah. You can view the speed with which your site is fetched by the Googlebot in your search console. Ideally, this should be just a few hundred milliseconds. When I switched my server to a local host, you can see how fast my site fetch speed went down: So don’t ignore this aspect of site speed. It’s crucial! Method 2: Implement Dynamic Caching WordPress generates its pages afresh each time a visitor comes to your site. This is quite a costly process and puts a strain on your database as well as your CPU. In addition, page generation takes time, so there’s a small delay for each visitor. The solution to this is dynamic caching. What is Dynamic Caching? The idea behind dynamic caching is to save a copy of the generated page and serve that copy to the next visitor. This way, each page is generated just once instead of over and over again. Not only is this faster, it reduces the resource load on your server, which means other parts of your site will work faster. It also means that your site can handle many, many more visitors! How to Implement Dynamic Caching on HostGator Dynamic caching can be implemented either with a 3rd party plugin or on the server. Having it enabled on the server is much faster. Not many web hosts allow this, but HostGator offers server caching on their WordPress plans as shown here on the product page: So if you use managed WordPress hosting with HostGator, just turn on the feature and you’re good to go! Here’s a complete review of HostGator WordPress , including all the special features! But even if you don’t have WordPress optimized hosting, you can implement dynamic caching with a plugin. I personally recommend WP Super Cache, which is an extremely popular WordPress plugin, is easy to use, and will get the job done without hassles. Method 3: Use a CDN A CDN is a “Content Distribution Network”. Apart from dynamic pages, there are lots of things on your site that never change. Images, Javascript, and CSS. Well… almost never change. Because of this, it’s best to deliver these resources from a server closest to your client. A CDN looks at the IP address of your visitor and chooses to send static content from a server closest to that location. Which means that people on opposite ends of the earth will receive the content equally fast. It’s really quite a magical technology. As before if you have WordPress hosting with HostGator, a CDN is available by default. But even without such a plan, you can use Cloudflare as your CDN. Despite it being free, I think Cloudflare is one of the best CDNs on the market. HostGator has a tie-up with Cloudflare, which allows for easy integration. You can even do cool stuff like changing your nameservers for faster access. But that’s beyond the scope of this tutorial. Method 4: Deferring or Asyncing JavaScript This one can be a bit tricky. Almost all websites use JavaScript. It’s an essential part of the web, but this adds to the page load time. The key is to wait until the page has fully loaded and is visible before loading JavaScript. It’s easier said than done, and each website works differently. Which is why we need a plugin. The one I recommend is Autoptimize . It’s open source and is almost universally recommended by WordPress gurus. After downloading and installing the plugin on WordPress, you can click the button to aggregate and asynchronously load JavaScript as shown here: The plugin has many options. Make sure to test them all so that your website’s features work properly. Stuff like resizing tables etc are all enabled by Javascript. Method 5: Inlining and Deferring CSS The CSS counterpart to method 4, this refers to delaying the loading of CSS files until the page has downloaded and displayed. However, there’s a catch. If we delay the loading of CSS, our page will look horrible and unstyled, since the CSS files are missing! The solution is called “Inlining” above-the-fold CSS. What this means is that you need to isolate the CSS rules that apply to all visible elements when your page first loads. And then paste those rules directly into every page so that they’re loaded instantly. Once your page has rendered, you can then load the CSS files at your leisure. So how do we do this? Get the Critical CSS This is pretty hard to do manually. So we’re lucky that automatic online tools exist to do it for us! For example, here’s an online tool from SiteLocity that’s quite popular. Simply type in your URL, and it’ll generate the critical above-the-fold CSS for you. Copy the rules that it gives you and use it in the next step. Insert the CSS Inline In method 4, we used the tool “Autoptimize”. Just like before, there is a section in the main settings area to enter your critical CSS as shown here: As shown above, paste the CSS into the box and save your changes. Now when you load your page, all the important CSS will be downloaded immediately, but the external files will be served later when the page has fully loaded. This makes your site blazing fast! Method 6: Lazy Load your Images Images constitute the bulk of a web page’s size. And not surprising, since a single image can be hundreds of MB. So it’s important to only load those images when necessary. “Lazy Loading” is the practice of downloading images only when the user has scrolled far enough to view them. Otherwise, if you have an image way down the article, and the user leaves the page before that, it’s wasted bandwidth both for you as well as the visitor. And it means your site slowed down unnecessarily. Lazy loading is yet another feature that’s difficult to implement manually. Luckily for us, WordPress themselves have released a plugin called Jetpack . I highly recommend using it, since it has a ton of useful features that you can play around with, and lazy loading of images is one of them as shown here: It’s just a single setting! Enable it and you’re done. Now when you visit your page, the images won’t be downloaded until you’re far enough down to see them. In which case, they’ll appear by magic as your user scrolls. Neat right? Method 7: Removing Unnecessary Emoji Code I didn’t notice this myself until I combed through my HTML code. WordPress adds a whole lot of junk useless emoji code to every page in order to render smiley faces and emojis. It’s a useful feature, but it’s a lot of wasted code, and it’s loaded every single time. Luckily, the Autoptimize plugin that we saw earlier has a way to remove them in the “Extra” tab as shown here: Click this option, save your changes, and you’re done! No more emoji code. The idea is to keep your WordPress installation neat and clean, without any unnecessary junk. These seven methods outlined here are a mix of server level and page level optimizations. Together, they should put your site on a fast track to higher rankings, and better experiences for your visitors. Find the post on the HostGator Blog Continue reading →