WordPress Page Speed Up Simple Tips and Tricks for Beginners

Site download speed always play an important role in Google Search results. Anybody as a user wants that the site he get on top in search results open early so that he see the answer fast. That's the reason we want fast internet, fast search, best results in top in SERP, etc. Now when you get a list of your answers in search results, you just click on top links to see your querry solution. But what happen when the website link opened by you take to much time in opening. It's really so irritating and most of the time people close that opened links and choose another one from the SERP. So, I think now you can understand what's the genuine reason to speed up our website.

Here I am going to give you tips for page-speedup for your wordpress site. Two major tools that are quiet good for checking page speed one is gtmetrix.com and the other on is PageSpeed Insights.You can easily solve all Page Speed Up factors through this tutorial.

Website Issues showing in gtmetrix and their solutions :

When you check your site in gtmetrix.com it will show all factors that are required for Page-speedup.

You have to just focus on following factors that are highlighted in red square. See the image :

Now you can see in the above image Page Speed recommendations like Enable Keep Alive, Enable gzip compression, etc. Page Speed recommendations can we

Server related factors:

1. Enable Keep Alive
2. Enable gzip compression
3. Leverage Browser Caching
4. Specify a Cache validator
5. Specify a Vary: Accept-Encoding header
6. Avoid landing page redirects

1. Enable Keep Alive Solution :

How Keep-Alive works:

When a TCP connection is opened on it will be sent only one HTTP request /response pair. Keep-Alive is build with the idea of sending multiple HTTP requests/responses via one TCP connection thus significantly reducing the time needed for the web browser to load files from the web server.

Keep-Alive is utilized to the fullest when dealing with static content like images as it allows the requestor to get all of the images from the page using one TCP connection instead of opening new ones for each image.

Then you will need to add this line to your .htaccess file:

<IfModule mod_headers.c>

Header set Connection keep-alive

</IfModule>

Reference : varvy.com, giftofspeed.com, fastcomet.com

2. Enable gzip compression

What is GZIP Compression?

GZIP is a file format and a software application used for file compression and decompression. GZIP compression is enabled server-side, and allows for further reduction in the size of your HTML, stylesheets, and JavaScript files. It will not work on images as these are already compressed in a different way. Some have seen up to 70% reductions due to compression. It is probably one of the easiest optimizations you could make when it comes to WordPress.

<IfModule mod_deflate.c>

 
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

 </IfModule>

Reference : kinsta.com, torquemag.io, wordpress.org

3. Leverage Browser Caching

Why browser caching?If you set an expiry date or a maximum age in the HTTP headers for static resources, modern browsers will load previously downloaded static resources like images, css, javascript, pdf, swf etc. from local disks rather than over the network.

So if you configure your web server to set caching headers and apply them to all cacheable static resources, your site will appear to load much faster. Add below to .htaccess

## 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 ##

Reference : crunchify.com,kinsta.com,axiswebart.com

4. Specify a Cache validator

How to Fix the “Specify a Cache Validator” Warning
Are you seeing the “Specify a cache validator” warning in Pingdom, GTmetrix, or Google PageSpeed Insights on your WordPress site? This is due to missing HTTP caching headers which should be included on every origin server response, as they both validate and set the length of the cache. If the headers aren’t found, it will generate a new request for the resource every time, which increases the load on your server.  Utilizing caching headers ensures that subsequent requests don’t have to be loaded from the server, thus saving bandwidth and improving performance for the user. 

To add the Expires header in Apache, simply add the following code to your .htaccess file.
## EXPIRES HEADER 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 application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 7 days" </IfModule> ## EXPIRES HEADER CACHING ##
  

Reference : kinsta.com, stackoverflow.com , keycdn.com

5. Specify a Vary: Accept-Encoding header

How to Fix “Specify a Vary: Accept-Encoding Header” Warning
Are you seeing the “Specify a Vary: Accept-Encoding Header” warning in Pingdom, GTmetrix, or Google PageSpeed Insights on your WordPress site? This is an HTTP header and should be included on every origin server response, as it tells the browser whether or not the client can handle compressed versions of the content.

For example, let’s say you have an old browser without gzip compression and a modern browser with it. If you don’t utilize the Vary: Accept-Encoding header your web server or CDN could cache the uncompressed version and deliver that to the modern browser by mistake, which in turn hurts the performance of your WordPress site. By using the Vary: Accept-Encoding header you can ensure that your web server and or CDN delivers the appropriate version.

Fix “Specify a Vary: Accept-Encoding Header” Warning in Apache
To fix this in Apache, add the following code to your .htaccess file via FTP. This file can be found on the root of your server. You can also edit your .htaccess file with the Yoast SEO plugin if your permissions are set correctly.

Important! Editing your .htaccess file could break your site if not done correctly. If you are not comfortable doing this, please check with your web host first.

<IfModule mod_headers.c>
<FilesMatch ".(js|css|xml|gz|html)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>

 

Reference : kinsta.com, stackoverflow.com , gtmetrix.com

5. Avoid landing page redirects

What is "Avoid landing page redirects" ?
This rule triggers when PageSpeed Insights detects that you have more than one redirect from the given url to the final landing page.

Reference : developers.google.com, gtmetrix.com , wordpress.org

JS related factors:

1. Defer parsing of JavaScript
2. Minify JavaScript
3. Inline small JavaScript
4. Prefer asynchronous resources

1. Defer parsing of JavaScript

What is "Defer parsing of JavaScript issue" ?

There are a few reasons why we should defer parsing of JavaScript in WordPress. The most important one is speed and performance. Generally, JavaScript is placed between the <head> </head> tags. When opening a website, it loads the code from top to bottom. This means that if you have lots of JS or long strings, it will take more time for the website’s content to appear, as it first waits for all the JavaScript to load.

By deferring parsing of JavaScript, the website would not wait for the JS code to load, which would result in a quicker loading time. Nowadays, optimizing a website for social media is crucial. Such features as Facebook, Twitter, Google+, Linkedin and other social network sharing buttons or feeds use JavaScript. However, we must keep in mind that content should be the priority, meaning that by deferring parsing of JavaScript we can greatly increase front-end user experience and SEO ranking.

Reference : hostinger.com,laplacef.com

2. Minify JavaScript

What is "Defer parsing of JavaScript issue" ?
One of the ways that Google and other search engines evaluate your website is your page load speed. This is also one of the ways that your visitors will evaluate your website – especially on their first visit. If your pages take too long to load, it is likely that visitors will move along. The Internet has too many distractions to expect visitors to wait.
Your website has to load a lot of files, including your HTML, CSS, and JavaScript. You need this code to be as clean and fast as possible. The problem is this code was written to be read by humans. It includes extra white space, comments, and formatting that computers don’t need in order to run the code. Fortunately, this can be fixed! A great way to help speed up your code is to minify it. Minify? What is minify? Let’s take a look.

What it Means to Minify and Why it is Beneficial ?

Minify is a programming term that basically means to remove any unnecessary characters that are not required for the code to execute. Minifying your code speeds up your page loading, making visitors and search engines happy.
Minifying your code removes:

• White space characters
• New line characters
• Comments
• Block delimiters

These types of characters are used to add readability to the code but they are not required for the code to execute properly. Minifying your code is especially useful for interpreted languages that run over the Internet, such as CSS, HTML, and JavaScript. It reduces the amount of code that has to be transferred over the web. The superhighway that is the ‘net still has a limited amount of bandwidth and supplying the smallest and cleanest code possible is in our best interest as web developers. 

W3 Total Cache is a best plugin to solve this issue. Install activate and set the plugin according to following screenshot.

Reference : technumero.com, elegantthemes.com

CSS related factors:

• Minify CSS
• Avoid CSS @import
• Inline small CSS
• Put CSS in the document head

Image related factors:

• Optimize Images (replace images with images given by Gtmetrix )
• Specify image dimensions (we can not Specify image dimensions because it makes site unresponsive so we leave this factor)
• Serve scaled images(we can not Specify image dimensions because it makes site unresponsive so we leave this factor)
• Combine images using CSS sprites (Can do by designer.)

Content related factors:

• Avoid bad requests
• Minify HTML
• Specify a character set early
• Remove query strings from static resources
• Minimize redirects
• Minimize request size
• Serve resources from a consistent URL
• Avoid a character set in the meta tag

CSS/JS related factors:

• Optimize the order of styles and scripts 

Rest of the things can be customized through check the link  W3 Total Cache Plugin Settings