WordPress website page load speed optimization

When we talk about any website first thing that we consider is UI/UX design and the second is how fast the site loads. Then only we dig into features and services of the website.

Specially for people with shared hosting speed is the most important feature. In web development process, web page speed optimization matters a lot. Talking from search engine point of view the slower site decrease the search engine raking also. To be an optimized site for search engines, page speed has to be considered.

Here we will be discussing some basic things about site loading speed optimization using .htaccess file. Though there are a lot of factors that affect the loading speed of site, below are basic factors that help boost speed of any site.

  1. Compressing site resources
  2. Leveraging browser caching
  3. Keeping connection alive
  4. Reducing HTTP requests

What is .htaccess file?

.htaccess stands for “hypertext access”. It is a small text file that controls many aspects of webpage display. Generally it is located in the root directory of the website. Each folder also can have one .htacess file. By default it is hidden. But web host provides an option to see hidden files. For optimizing purpose we use the one that is in the root directory. Activities like redirects, enabling compression, rewriting URLs, leveraging browser caching and more can be accomplished by adding some code to this file. For your information even a small mistake while updating this file can make the site down. To be in safe side, before editing this file make sure to keep a backup copy.

How to compress site resources to increase page loading speed?

Enabling compression is the standard process to minimize resource size. All modern browser now understands and accepts compressed files. Resource compression can be enabled by adding some code to .htaccess file. This Compress HTML File, CSS File, JavaScript File, Text File, XML File and Fonts. For this open the .htaccess file and add below code and save.

# Begin compress site resources
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
# End compress site resources

Leveraging browser cache

Each time user visits a webpage, browser download the resources and cached in local machine. Leveraging means, next time when the user request the same resources then the cached resources are shown. This makes the page load faster for the second time. To liverage browser caching add below code at the top of the .htaccess file and save.

# EXPIRES CACHING
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
# EXPIRES CACHING

Keeping Connection alive

It refers to the conversation between the web server and web browser. Also known as persistant connection, it allows the same TCP connection for HTTP conversation instead of openinng new conversation with new request so the same conversation grabs just more than one file at a time. Simply by adding below code in .htaccess file you can enable keep-alive connection.

# Keep connection alive
<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>
# Keep connection alive

Reducing HTTP requests

Each time we browse any webpage, all our actions produce HTTP requests that a sent to the web server. Server replies to each of these requests. The browser uses these server responses and generates webpage in the browser. The more request the more time it will take to load the resources. The resources to any webpage can be CSS, HTML, JavaScript, Images, Fonts etc. By compressing the files we can reduce the load time. But to reduce the HTTP request below are some best practices.

  • Using less CSS file. We can combine CSS to one and decrease HTTP request.
  • Using less JavaScript file. We can combine multiple Js files to one.
  • Using image sprites. Instead of using individual images like for icons and other small image. We can create single image sprite and use it with CSS. This helps to decrease the number of images hence the HTTP request.

Read by topic of your interest

Search for more