How To improve website speed
Jun
14
2019

How to improve website speed in wordpress
Think that speeding up your website isn’t important?

In 2006, Amazon reported that for every 100 milliseconds they speed up their website, they see a 1% increase in revenue. Then Google announced, in an effort to improve the web, that page speed was a consideration in how they rank search results.

A one-second delay in page load time yields:

  • 11% fewer page views
  • 16% decrease in customer satisfaction
  • 7% loss in conversions

A few extra seconds could have a huge impact on your ability to engage visitors and make sales.

This means that having a fast site is essential — not just for ranking well with Google, but for keeping your bottom-line profits high.

How website speed optimization influences conversions

Slow speeds kill conversions.

In fact, 47% of consumers expect websites to load in two seconds or less — and 40% will abandon a page that takes three or more seconds.

This means that if your site takes more than three seconds to load, you lose almost half of your visitors before they even arrive on your site.

That alone is a huge blow to your potential conversions.

And for the visitors that decide to stick around, your slow load times can deter them from returning in the future. In one survey, 79% of customers said they would not return to a site with poor performance.

Following are few methods to improve website speed:

1. Minimize HTTP requests

According to Yahoo, 80% of a Web page’s load time is spent downloading the different parts of the page, like images, stylesheets, and scripts. An HTTP request is made for each one of these elements, so the more on-page components, the longer it takes for the page to render.

If you use Google Chrome, you can use the browser’s Developer Tools to see how many HTTP requests your site makes.

Right-click on the page you want to analyze, and click “Inspect,” then click the “Network” tab. (If you don’t see the “Network” tab, you may need to expand the Developer Tools sidebar by dragging the left border to the left.)

blog-img-1

The “Name” column shows all of the files on the page, the “Size” column shows the size of each file, and the “Time” column shows how long it takes to load each file.

In the bottom left corner, you’ll also see the number of total requests the site makes.

Reducing this number of requests will speed up your site, look through your files and see if any are unnecessary

2. Minify and combine files

Now that you know how many requests your site makes, you can get to work on reducing that number. The best place to get started is with your HTML, CSS, and JavaScript files.

These are extremely important files, as they determine your site’s appearance.

They also add to the number of requests your site makes every time a user visits it.

Minifying a file involves removing unnecessary formatting, whitespace, and code.

Since every unnecessary piece of code adds to the size of your page, it’s important that you eliminate extra spaces, line breaks, and indentation. This ensures that your pages are as lean as possible.

Combining files is exactly what it sounds like. If your site runs multiple CSS and JavaScript files, you can combine them into one.

There are several ways to minify and combine files, and if your site runs on WordPress, plugins like WP Rocket make the process fairly simple.

If you have this plugin installed, go the “Static Files” tab and check the files you want to minify and combine.

blog-img-2

This can include HTML, CSS, and JavaScript files, as well as Google Fonts.

Then, hit “Save Changes” to complete the process. You can reload your page and look at Developer Tools again to see the impact that your changes made.

When it comes to your website, leaner is better. The fewer elements on a page, the fewer HTTP requests a browser will need to make the page render — and the faster it will load.

3. Use asynchronous loading for CSS and JavaScript files

Once you’ve minified and combined some of your files, you can also optimize the way that they load on your pages.

Scripts like CSS and JavaScript can be loaded in two different ways: Synchronously or Asynchronously.

If your scripts load synchronously, they load one at a time, in the order, they appear on the page. If your scripts load asynchronously, on the other hand, some of them will load simultaneously.

Loading files asynchronously can speed up your pages because when a browser loads a page, it moves from top to bottom.

If it gets to a CSS or JavaScript file that is not asynchronous, it will stop loading until it has fully loaded that particular file. If that same file were asynchronous, the browser could continue loading other elements on the page at the same time.

4. Defer JavaScript loading

Deferring a file means preventing it from loading until after other elements have loaded. If you defer larger files, like JavaScript, you ensure that the rest of your content can load without a delay.

If you have a WordPress site, you can the WP Rocket plugin mentioned above to easily enable deferred JavaScript loading. Simply check the box next to “Load JS files deferred,” and you’re good to go.

5. Minimize time to first byte

In addition to the amount of time it takes for your page to fully load, you’ll also want to take a look at the amount of time it takes to start loading.

When a user visits your site, their browser sends an HTTP request to the server that hosts it. There are three steps that need to happen between that initial request and the first byte of data:

  • DNS lookup
  • Server processing
  • Response

You can see how long this process takes for your site using either Chrome’s Developer Tools or a third-party tool.

To access this information in Developer Tools, click the “Network” tab and mouse over the top item in the “Waterfall” column.

blog-img-3

6. Enable compression

The smaller your files, the faster your pages will load. Compressing files is one of the easiest ways to reduce load times, and today, enabling compression with Gzip is considered standard practice.

Gzip is a file format and software application that essentially locates strings of similar code in your text files, then temporarily replaces them to make the files smaller.

This works well with CSS and HTML because these files typically have repeated code and whitespace.

Most web servers can compress files in Gzip format before sending them for download, either by calling a third-party module or using built-in routines. According to Yahoo, this can reduce download time by about 70%.

And since 90% of today’s Internet traffic travels through browsers that support Gzip, it’s a great option for speeding up your site.

If you’re not sure if your site has Gzip enabled, you can use checkgzipcompression.com to see. Just enter your site’s URL, and if you have Gzip enabled, you’ll see something like this:

blog-img-4

If your site runs on WordPress, both WP Rocket and W3 Total Cache plugins support enabling Gzip.

7. Enable browser caching

When you visit a website, the elements on the page you visit are stored on your hard drive in a cache, or temporary storage.

This means that the next time you visit the site, your browser can load the page without having to send another HTTP request to the server.

Once the page has been loaded and the different components stored in the user’s cache, only a few components need to be downloaded for subsequent visits.

In Theurer’s test, that was just three components and .9 seconds, which shaved nearly 2 seconds off the load time.

Increase your website speed in WordPress with W3 Total Cache

If you run a WordPress site, you can use a plugin like W3 Total Cache to easily enable caching.

Once you’ve installed it, navigate to “Page Cache” under “General Settings” and check the box next to “Enable.”

blog-img-5

8. Reduce image sizes

Images can play a major role in your site speed. They’re often very large files, which can slow down page load times.

Reducing their size could likely have a big impact on how long the page takes to load.

In fact, in one study, resizing 22MB of images down to 300KB resulted in a 70% reduction in time to interact, or the amount of time a user needs to wait before they can interact with a site.

One of the easiest ways to reduce image file sizes is cropping your images to the correct size. For example, if you want an image to appear as 570px wide, resize the image to that width.

Don’t just upload an image that is 2000px wide and set the width parameter the size you want. This requires your page to load the full image, then adjust it to the appropriate size, slowing your page.

If you use the width parameter to make images appear smaller on your site, resizing those images should be a priority. It’s an easy way to reduce the total size of each page and can have a major impact on your site’s speed.

If you don’t use WordPress, you can use a non-WordPress tool like Compressor.io.

After you’ve saved the new image file, you can upload it to your site.

Next, you’ll also want to make sure you’re using the appropriate file types for each image. This may seem like a minor concern, but the file types you use can affect each file’s size.

You have a few different options and the most common are JPG, PNG, and GIF.

JPG is generally your best option for photos. It uses lossy compression, which means that some of an image’s data is lost when saved in this format.

This data loss is undetectable to viewers in photos but results in a smaller file size than most image file types.

So if you’re uploading pages with lots of photos, making sure that they’re all JPGs can significantly decreasing load times, without impacting their appearance at all.

PNGs, on the other hand, use lossless compression. This means that when you save an image as a PNG, you don’t lose any data, and the resulting file size is larger than a JPG.

blog-img-6

If you need to have clear lines and crisp detail, PNG is the way to go. This is the best option for logos, screenshots, line art, and other detailed graphics.

Finally, GIFs should only be used for small or simple graphics of less than 10×10 pixels, a color palette of 3 or fewer colors, and for animated images.

Once you’ve got your image sizes and formats right, you can make sure that the code you use to implement them is right, too. In particular, make sure to avoid empty image src codes.

In HTML, the code for an image includes this:

blog-img-7

When there’s no source in the quotation marks, the browser makes a request to the directory of the page or to the actual page itself. This can add unnecessary traffic to your servers and even corrupt user data.

Fortunately, this is an easy fix to make. Either add the file path of the image you want to include or remove the extra tags altogether.

9. Optimize CSS delivery

CSS holds the style requirements for your page. Generally, your website accesses this information in one of two ways: In an external file, which loads before your page renders, or inline, meaning it is in the HTML document itself.

The external CSS is loaded in the head of your HTML with code that looks something like this:

blog-img-8

Inline CSS is nested in your page’s HTML and looks like this:

blog-img-9

As a general rule, avoid including CSS in HTML code (like in divs or your headings) like in the inline CSS pictured above. You’ll get cleaner code if you put all of your CSS in your external stylesheet.

This reduces the size of your code and creates fewer code duplications.

When setting up your styles, it’s also best to only use one external CSS stylesheet, since additional stylesheets increase HTTP requests.

If you’re not sure how your CSS is currently set up, you can use this CSS delivery tool to find out. Enter your URL, and you’ll see a report with all of external your CSS files.

If you have more than one external CSS file, each one adds to your page load time. In some cases, this is unavoidable — but in most, it’s best to combine them.

Fortunately, this is a simple process and one that can usually be accomplished with nothing more than copy and paste.

Simply copy the contents of each CSS file you have, and paste it into one main CSS file.

10. Prioritize above-the-fold content (lazy loading)

Having just recommended that you use only one CSS stylesheet and no inline CSS, there is one caveat you need to consider.

You can improve user experience by having you’re above the fold (top of the page) section load faster — even if the rest of the page takes a few seconds to load.

This is called lazy loading and is particularly helpful for pages with lots of content below the fold.

For example, let’s say you write a blog post that includes 20 photos. Normally, a user’s browser would need to download all of those images before displaying anything on the page.

With lazy loading, it can load the content within view first, then load all of those photos after.

This way, the user doesn’t have to wait to access the page, and the images will load as they come into view.

This can significantly reduce load times on posts with tons of images (like this one).

And if you run your site on WordPress, enabling it is as easy as installing a plugin. There are plenty of options you can use to start using lazy loading on your site.

11. Reduce the number of plugins you use on your site

As you’ve likely gathered from this post so far, plugins can do a lot to improve your WordPress site. You can use them to add custom functionality, clean up your code, improve user experience, and more.

They also eliminate the need to mess with a lot of code, which makes for an extremely user-friendly experience when working on your site.

Plus, they’re extremely easy to install.

This makes it easy to continue adding and installing plugins, without considering the potential downside.

Unfortunately, having too many plugins installed can cause some issues.

They can slow your site, create security issues, and even cause crashes and other technical difficulties.

Plus, keeping up with maintenance and updates can be tedious when you have a lot.

And even if you don’t have a ton of plugins, it’s a good idea to evaluate the ones you have installed on a regular basis. Any that are outdated, inefficient, or incorrectly configured can have a negative impact on your site speed.

Deactivating and deleting any that are unnecessary can both improve your overall speed and make maintenance easier in the long run.

12. Reduce redirects

Redirects are often necessary when you move and delete pages, and are the best way to eliminate issues with broken links.

But having too many of them can create additional HTTP requests, which can negatively impact speed, particularly on mobile devices.

This means it’s best to keep them to a minimum. In fact, Google says that ideally, site owners would eliminate them entirely.

Unfortunately, this is not realistic for most site owners who’ve ever eliminated or restructured their content.

Still, in most cases, there’s room for improvement.

You can start by using Screaming Frog to quickly identify all of the redirects currently on your site.

Run a site scan, then sort by the “Status Code” column to see all of the 301 redirects on your site.

You can look through these redirects to see what they’re accomplishing, and make sure that they serve a necessary purpose.

You can also use this opportunity to identify redirects chains, or redirects that point to other redirected pages. This creates unnecessary extra requests, which can slow down your load times.

If you find any redirect chains, you can edit your .htaccess file to point all of your redirected pages directly to the most recent versions of that page.

listed in this post, you can continue testing your site and moving up in the ranks.

13.Optimize MySQL

Databases tend to get larger as your website grows, and queries take longer to execute due to vast amounts of data being stored.

You’ll want to tweak your MySQL settings to increase the overall speed of your database server, and take advantage of indexes to reduce the time a query needs

For most servers, MySQL tends to be the biggest bottleneck; so you’ll want to place a lot of focus on improving the reliability and speed of your MySQL queries.

Index frequently accessed data.

When you know a table is going to be accessed a lot, it’s best to create the index as soon as you create the table.

Tables that store a lot of information will benefit from indexes because it will speed up the time to perform queries when the data needs to be retrieved.

To add an index to an existing table, the following would be used.

blog-img-10

These methods are very simple, and large tables should always be indexed when there’re a lot of requests to retrieve data.

14. Put CSS at the top and JS at the bottom

It’s considered best practice to put your CSS as close to the top of your page as possible, as browsers won’t render your page before rendering the CSS file.

Javascript, on the other hand, should be as close to the bottom as possible, since it prevents browsers from parsing after the tag before it is loaded and complete.

15.Code optimization

One of the methods to ensure the quality of your code is to have the best code optimization process and techniques.

Your code may be optimized so that it utilizes memory, executes more rapidly, and also performs fewer input and output operations.

Even though code optimization is one of the best tuning tips, it does not mean that your code must be complex, or you need to replace any standard libraries.

Sometimes optimization takes up a lot of time to trace and maintain the code.

Worst case, these optimizations don’t contribute any advantage because you’re wasting a lot of time optimizing non-critical portions of your application.