1. Optimize Multimedia Files

Most of the time, it is the images you add that are the reason for low page speed. But you can’t ignore them completely. 

For a blog or store, relevant images and videos are necessary to interact and engage the audience with your content.

As you are into the website monetization business, user engagement is important. Adding helpful images and guide videos are what some buyers search for when buying a product or service.

The size of each image or video and the total number of multimedia files on a page is calculated by the speed test tool.

You should consider both and optimize them without affecting the content flow.

Resizing and optimizing the images and video to a page can reduce the time to interact by 70%, says a study.

The possible ways to optimize the images are the following:

Instead of uploading a 2000 px image and setting it to 500 px on the website, edit the image and resize it to optimal value and then upload it to the site.

Another way will be compressing images. If you are running a WordPress affiliate site, WP SMUSH is a free image compressing plugin that optimizes images when uploading.

• The plugin gives an option to automatically resize the images into a specific ratio of your choice.
• If you set the maximum height and width, images above the limit will be automatically resized.
• For the Non-WordPress website, we would suggest compressor.io.

Next, you have to decide on the image formats from JPG, JPEG, PNG, and GIF.

It is always best to stick with JPG. It follows lossy compression which means some image data will be lost in compression. This data loss is not identifiable in images by visitors but gives the smaller size images.

If your website needs crisp and clear line images with great transparency, go for PNG. Otherwise, JPG images are good to go.

2. Reduce HTTP Requests

An HTTP request is made for each element on a page like images, videos, scripts, styles, and other parts. So, the higher the elements on the pages, the higher the HTTP requests will be made.

First, check how many requests your site makes and decide how many to reduce. 

Google Chrome users, check the browser’s Developer Tools to see the HTTP requests.

Open the website -> Right-click and Inspect -> Go to Network tab.

The Name column shows files names on the page, the Size column shows the size of each file, and the Time column shows its loading time.

The total requests the sites make are given in the bottom left corner.

Now you know what the elements on the page increase page speed, look through them, and decide if you need them or not.

3. Minimize JS and CSS

To omit or optimize the high loading elements of the page, you have to start with HTML, JS, and CSS files.

These three are important for the page’s appearance. They also create many HTTP requests each time the style is loaded for a visitor.

You can either minify or combine these files. So, you will reduce the number of elements on the page and the size of each element.

If you use WordPress with a templated website builder, it is important to minimize the scripts and stylesheets.

In minimization, you do remove unwanted formatting, styles, decorations, codes, and whitespace.

If your website has multiple CSS and JS files, combining them will reduce the page loading time.

In a simple method, you can install a plugin for WordPress sites. Recently, WP Rocket is a common plugin used for minimizing CSS and JS.

After you install and activate this plugin, go to the Static Files tab in this plugin settings and check the files that you want to minify and combine. Then click Save Changes and complete the process.

Now reload the website and check the Developer Tools again for the effect.

4. Decide on loading of CSS and JS files

JavaScript and CSS files usually load in either way: Synchronously or Asynchronously.

In synchronous loading, the files load one at a time. In asynchronous loading, some of the files load simultaneously.

The asynchronous loading speeds up the page because the browser loads the page from top to bottom. 

When it gets to a JS or CSS file that is synchronous, the browser will stop loading it until the full file is loaded. But in asynchronous loading, the browser loads other elements in the meantime.

WP Rocket plugin has this option in the same Static Files tab.

5. Defer Larger Files

Deferring means preventing particular files from loading until other elements on the page are loaded. On any page, JavaScript files are comparatively large files.

If you deferred these larger files, you make sure other elements are loaded without delay.

Again, the WP Rocket plugin comes in handy. It has the option to enable deferred JavaScript loading. In the Static Files tabs, next to the Render-blocking CSS/JS option, you have to check the box near Load JS files deferred. 

Look at the image in the above section for reference.

6. Reduce TTFB (Time To First Byte)

The time a page takes to start loading will also be taken into account when considering the total loading time of the website.

Time to first byte or TTFB is the time a browser has to wait to get its first byte of data from the server. The recommended value of TTFB by Google is less than 200 ms.

It is a server-side concern that also needs to be checked.

From when a visitor’s browser sends an HTTP request to the hosting server of your website to when the hosting server displays the required data of the website on the visitor’s screen involves three stages.

1. DNS lookup
2. Server processing
3. Response

You can see the length of the process using Google’s Developer Tools or any other.

Right-click the webpage > Inspect > Go to Network Tab > Waterfall column.

When you hover over bars under the Waterfall column you can see the details below.

If the TTFB is under 200ms, your website is in the safe zone, otherwise, there may be issues.

The possible issues with slow TTFB are network issues, web server configuration, dynamic content creation, and traffic. In these four, Dynamic content creation and server configuration can be handled by you.

Your web server needs to build a dynamic file before responding to the visitor.

With WordPress websites, mostly the pages are dynamic. It means the pages have to contact the database to be built with PHP before being displayed on the visitor’s screen.

7. Reduce Server Response Time

DNS lookups are one of the important factors that decide how fast your website loads.

A Domain Name System or DNS is a server with a database of IP addresses and linked hostnames. When a visitor types a URL in the browser, a DNS server translates that URL into the specific IP address that shows its online location.

A DNS lookup is the process of finding a particular DNS record. It is your computer searching for a number in a phone book.

The ISP (Internet Service Providers) performs this DNS lookup to get the IP address of the entered URL.

Based on the speed a DNS provider gives, this step takes time to complete. The slow DNS increases the time the browser takes to locate your site.

8. Website Hosting

The quality of web hosting determines how good the website is to the users. Mostly new website owners go for the cheapest options for hosting. Well, it may be enough to start with but as your site grows and you develop it further, you have to upgrade the hosting plans.

There are three different options for WordPress hosting.

1. Shared hosting
2. VPS hosting
3. Dedicated server

Shared hosting – The cheapest option on the list. Probably costs you $5 a month. It is suitable for small sites but it does not support traffic spikes and high volume websites. In shared hosting, resources like CPU, RAM, and disk space with other sites are hosted on the same server.

VPS hosting – Like shared hosting, here also you share a server with other sites but you own some of the resources. It protects the website from other sites on your server without spending on dedicated hosting.

Dedicated hosting – You own a server for your website. No sharing! With a dedicated server, you have many features and space but it’s all on your head to maintain and manage. You have to take care of configuration and technical setup.

If you are getting more traffic for your website that might get affected by a shared hosting with dependent resources, it is time to change to VPS or a dedicated server.

9. Compression

We have already seen how compressed media helps speed up the website. The smaller the files, the faster the website loads.

Always add the contents that are necessary for visitors to read or learn. If you add images and other graphic data just to entertain the visitor or beautify the page, it will affect the quality and speed of the website.

Though most web browsers have content compression features, we can’t expect all websites to deliver compressed content. Visitors who enter uncompressed websites will get slow interactions on their pages. The primary reason for this poor behavior is due to hosting servers, proxies, browsers, and antivirus software.

The recommended compression tactics that Google wants you to follow are the below:

• Minimized JavaScript, HTML, and CSS.
• Follow the same format in CSS and HTML.
• Consistent letter casing
• Consistent quoting for HTML tag attributes.
• Mention HTML attributes in the same order.
• Specify CSS key values in alphabetic orders.

Just to know what parts of your website need compression, you can check on GIDNetwork running an audit.

The audit result shows the uncompressed size of the web page so you can make note of it for future improvements. Below that there will be an analysis of how much space you can free from the page in size and percentage using a tool called GZIP.

You can do this for HTML, CSS, JS, test, and XML files.

GZIP is a file format and software application that finds similar code instances and strings to replace them with short characters temporarily. 

But you should not GZIP images, PDF, and binary data. The data range is only between 150 to 1000 bytes. GZIP compression for old browsers is not a good idea.

If you are using WordPress sites, you can obtain the W3 Total Cache plugin for all of the above functions.

10. Cache

Web cache is the mechanism of storing copies of web content temporality to fulfill the user requests from the cache database under specific conditions. It reduces the requests from client to server and fetching time.

How it works is when a visitor enters your page, the elements on the page will be stored on a hard drive for temporary storage. So when they revisit your website, their browser loads the page from the local cache memory and then sends another HTTP request to the main server.

In technical terms, when a new visitor enters a page, their browser has to load a minimum of 30 components which runs for 2.5 seconds.

From the next visit, the browser has to download only a few components as most of the others have been stored in the user’s cache. It includes a minimum of 3 components and runs at 0.9 seconds which literally saves TWO SECONDS. 

You still remember the value of a one-second increase in page speed, don’t you?

Thus enabling page cache saves you a lot of time and provides a great user experience.

For WordPress website owners, the W3 Total Cache plugin does the job.

After activation of the plugin, go to General settings > Page Cache > Check the box and Enable. 

This step can cut down a few seconds of your page loading speed. 

To get more, enable browser caching.

For this, General settings > Browser Cache > Check the box and Enable.

In order to speed up the dynamic elements on a website that is hosted on VPS or a dedicated server, enable Object Cache in General Settings.

Set caching from one week to one year for resources like JS, CSS, images, PDFs, and other media files.

11. Content Delivery Networks (CDN)

A CDN, Content Delivery Networks is a network of servers that works as hosting servers to decrease website or page load times for visitors.

In single-server hosting, each visitor to the page sends requests to the same server which creates traffic, in other ways, it increases the processing time of each request which in return decreases response time for all requests.

Also, if a visitor is not reachable or far from your web server, the request extends even if there is no traffic. It is not a good sign.

A CDN can deter this condition. Using a CDN, the cache of your site is placed on global networks of servers. When there is a request from visitors’ browsers for files from your website, CDN routes this request to the closest possible server.

The content visitors get from different locations is identical but the server and response time will vary. It eliminates website lagging and latency that visitors from far locations experience with a single server website.

The geographic server accessibility for each visitor is the primary benefit of CDN including performance boost, website ranking, and high availability.

If you just took the first step to CDN, we recommend Cloudflare CDN. It combines optimization and security.

Using Cloudflare is simple, signup to their website, create an account, enter your domain and click Begin Scan. 

• Select the plan you want and click Process and Continue.
• Note down the nameservers given by Cloudflare for your domain.
• Login to the domain registrar and change the Name server to “Custom Nameservers“. This option differs for each registrar.
• Paste the Cloudflare nameservers in the given boxes and Save changes.
• Go to Cloudflare admin and verify the installation.
• Navigate to the Overview tab and if you see CDN is running, you will receive an Active status code.
• It shows you did the CDN setup correctly.
• Finally, check if your SSL records are right. Check it in the Crypto tab.

All done, now your visitors from other ends of the world can also load your website perfectly.

12. Optimize CSS delivery

CSS or Cascading Style Sheets is the place where you add styles to display the webpage. The CSS file of the website is accessed in two ways.

1. By an external file where it loads before the page rendering starts.
2. Inline which is an HTML document.

The external CSS file is placed in the header of the website whereas Inline CSS is inserted in the HTML file of the page.

From these two, adding CSS in HTML code like inline CSS is not recommended. It looks messy and repeats the same code multiple times.

Unlike, in external CSS, all the style coding is formatted in a separate file that is easy to see and access which also reduces the size of the code and averts duplications.

Generally, a single external CSS file for a website is best as the visitor’s browsers have to download only one CSS file which minimizes server requests.

Some of the recent practices followed by experts to optimize CSS delivery for website speed include the following:

Shortcodes – Try to reduce the size of the code by adding a few declarations and operators. The lesser the codes, the fewer the process. It eventually increases response time and provides the expected delivery of the website to client servers.

Browser Specific CSS Hacks – CSS files face major risks with endless and difficult browser-specific hacks that are often mentioned as correctional declarations which add unwanted weight to CSS files. The speed-optimized CSS script codes are simple and light for all servers to execute easily.

Minify CSS – All the Free and Paid website speed test tools used to mention minification of CSS as a common suggestion for improving the speed. The short, simple, and clear CSS code makes it easy for client servers to download and process efficiently.

Code placement – Place CSS code in the header and JavaScript in the body to prevent browsers from displaying CSS files immediately after download.

CSS delivery – Avoid using @import call, go through and remove unused CSS codes, do not add CSS in HTML tags such as H1 and DIV, and use small inline CSS.

13. Lazy Loading

If you can’t totally avoid inline CSS and adapt a single CSS file, better you focus on improving the speed of above-the-fold content.

It still benefits the better user experience when having the fast loading above the fold section even if the rest of the page contents take a few more seconds to load.

Technically called Lazy Loading gives a chance to websites that have a lot of sections below the fold to attain the recommended page speed.

Lazy loading is a method where the browser loads the content (mostly the media files) when a visitor moves to that section instead of trying to download all of them in the first place.

If a blog post has 5 sections with 10 images, the website without lazy loading tries to download all sections and images from the server to display which takes more time to finish. But with lazy loading, the website loads the first viewable section content and loads the remaining as the visitor scrolls to view.

In this way, the user gets the first contentful paint (FCP) in less time and reduced first input delay (FID) which reduces the bounce rate and engages the users with a page.

For a WordPress website, there are a lot of FREE and PAID plugins available for lazy load. Some of the plugins we tried on our sites are Lazy Load for basic and BJ Lazy Load for customization, but if you already have WP Rocket then GREAT because the plugin has an option for Lazy Load too.

Go to WP Rocket -> Basic tab -> Check the boxes next to LazyLoad.

You can set custom conditions like preventing lazy load for a specific page or post with WP Rocket.

14. Plugins – Choose All in one

As you read through this post, plugins can help WordPress sites in a lot of ways. You can customize them, improve user experience, and eliminate messing with coding.

These are easy to get and use too. This makes many of you install plugins for each function. But all of these come at a price: slow site.

Having plugins on the website is not a problem but if it goes to TOO MANY, you will definitely have a problem.

The first and far most disadvantage of having tons of plugins will be the lower site speed, the next will be security issues, technical difficulties, software crashes, and so on.

It also wants you to maintain and manage them with regular updates.

Even if you use only a few, when your website loads slower, it is time to start regular plugin evaluation if you did not already.

An outdated, not fully configured, and unnecessary plugins can negatively impact your site.

Make sure you have only the necessary plugins that are up to date to improve speed and ease maintenance.

There are two ways to test the plugins to find out the culprit that is putting your site down in the run.

The first way will be a manual action. Try to deactivate plugins one by one and check the website speed. It encounters the problem causing plugins. But it is a tedious and long process when you have a lot of plugins.

Unfortunately, the better solution for this task would be to install another plugin. 

I admits the controversy, but tools like Plugin Performance Profiler are a great option to find the unwanted plugins that add a huge weight to the website.

Aside from trying these methods, identify the functional overlapping in plugins. There are only a few plugins that serve single functionality. So, high chance that most of the plugins you use serve many purposes which are sometimes the same for multiple plugins.

For example, WP Total Cache and WP Rocket are the two greatest plugins that support site speed, but more or less, both have the same purposes. In this case, evaluate them and stick with one.

Also, don’t use plugins for tasks that can be done manually. Plugins for font, tracking, or table can be avoided as you grow with the website.

You get a lot of HTML references for creating a table, you can use embedded code for different fonts from Google, similarly, try to cut down the need for plugins.

15. Reduce Redirects

No one knows when a page or post is going to be unwanted. So, deleting is uncertain. Moving or deleting the pages creates broken links which cause redirection.

But it is better to think before creating and deleting a page in the first place. If it is really important, you have to maintain the right redirection methods.

Because redirections create additional HTTP requests which reduce site speed, especially on mobile devices.

So, Google says site owners would remove them completely. But it is not ideal for most site owners who already redirected the pages.

You can use tools like Screaming Frog to identify the redirects on a website and make sure they serve a needed purpose.

You can also encounter the redirect chain that a redirect page directs to another redirect page which maximizes HTTP requests and deletes them.

Also, if your website has many 404 pages that are Not found pages, it will affect the website’s performance on Google.

Use Google Webmaster Tools to identify these pages and if a 404 page has many external links, try to set it to 301 redirects.

16. Manage WordPress Revisions

WordPress revision feature is one such perk that its users enjoy about it. The CMS stores the content creation session on the CMS which is available for users to see and revert.

It may benefit the website owner to get back their old content with a click, but when seen on a server-side, it slows down unnecessary processing by fetching the database entries which are not needed for visitors.

Manage the revisions by limiting or disabling them.

If you run a WordPress website, below are the codes for disabling and limiting revisions.