How to Improve Page Speed to Boost Your Traffic

Why Speed of your Site is Important?

Why do I have to visit your site if it forces me to wait longer just to open your pages?!
Do you think that all visitors have high-speed connections like you?!!

If you know the answers to these questions, you will definitely know, how speed is very important for your visitors and search engine as well. It’s not only related to earning from your site but it has more related to your website’s reputation that you build it daily by your content.
Your visitors pleased is all that your website has and nothing can make them happy more than top quality content and super fast sites especially on their mobile devices because it has less bandwidth than pc and laptops.
If you really care for your site then stop all your online activities and start serious work until you make your site speed at least load within one second. Once you made your site load faster, search engines will dig behind you because you respond so fast same with your visitors they will wait for your news impatiently.
You have to keep in mind, site speed is one of the top important rank factors in 2015 that definitely affect your traffic negatively or positively according to your speed score.

Before you start reading the rest of this topic, you have to know your current speed score to know where you will start and you don’t have to fix all issues in one day just start with easy tasks and then harder jobs so you won’t feel bored.
There is many online speed analyzing tools but i always prefer GTMetrix and Google PageSpeed Insights because they gave me all what i need simply without any complications.

What is the Benefits of Fast Load Speed of Your Site?

• Increase Conversion Rate
  Conversion happened when a visitor complete an action that you want him to complete like paying for service, purchase product, download software or application, etc.
  Each second you save on your site load time, you will tend to increase customer confidence and site reputation which leads to more actions made by your visitors.
  A huge example for this point is Amazon in 2006 presented case study between page load time and online customer revenue, the results was shocked all the internet which is every 100 millisecond delay in page rendering time resulted in a 1% loss of sales for Amazon.

• Increase PageViews
  Site load faster will encourage visitors to browse more of your pages and engage them to the most important area of your content which lead to increase your CPM (Cost per impression) driving more earn.

• Reduce Bounce Rate
  According to Google description Bounce Rate is the percentage of single-page sessions (i.e. sessions in which the person left your site from the entrance page without interacting with the page).
  and there is nothing greater than the speed load issue that force your visitors to runaway and never come back again.
  If you see 50% average bounce rate in Google analytic report for your site, it means about half of visitors whose browse your website pages leave and don’t come back.

• Increase Crawl Rate
  Why Google send its spider bots to crawl your worthless slow loading site?
  Crawl rate depends very heavily on your page load time and if search engines bots can’t crawl your site efficiently it will lead to many pages de-indexed regularly.
  Keep your eyes open on crawl errors page in Google Webmaster Tool to discover any issues that you don’t know about to fix it as soon as possible.

• Improve On-Page (On-SEO)
  One of the major factors affect On-SEO rank is load page time, improving your site speed will put you on the first step to Optimize On-Page for your site.

• Improve CTR
  CTR (Click Through Rate) is a way of measuring the percentage for the number of users that clicked on your pages when its appears in search engines results.
  As we stated before, improving your page load time will give you an incredible reputation which will let the visitors click on your pages right away once you appear for any keyword search.

• Increase Your Traffic
  Did you ever find before a site ranked on Google first page with slow loading pages? its impossible ….. Why?!
  because Google won’t show slow loading site for users who expect fast response
  In other words, fast load times bring higher rankings. And higher rankings lead to more traffic.

• Huge Revenue
  Certainly if all above factors has been improved, will bring more earn in your wallet and lead for more success of your site

How to Optimize your Page Speed?

As you will see in the following tasks you have to dig deep to find out what is slowing down your site, and who is Ruining your page speed. Matt Cutts mentioned in his blog “Google incorporating site speed in search rankings”.

Then you have to give your page speed top priority of your work as well as posting quality content. And i bring you today the Top 10 factors that affect your site speed.

• Leverage browser caching
• Critical rendering path
• Reduce server response time
• Enable Gzip Compression
• Minimize DNS lookups
• Optimize CSS delivery
• Optimize images
• Avoid landing page redirects
• Prioritize visible content
• Eliminate render-blocking JavaScript and CSS in above-the-fold content

#1: How to Leverage Browser Caching?

Do you change your header image or favicon daily? Of course not …
Do you modify you css, java or fonts daily? Of course not …
Then why you bother your visitors by forcing them to download all these resources each time they visit your site,
that’s the importance of leverage browser caching, it tells the browser to not download static resources (which is not changes regularly) every time it browse your site and use the cached files locally in the user’s browser instead. This will reduce the amount of data the visitor’s browser has to download as well as reduce HTTP requests.

Setting Leverage browser caching:-

1. Open your .httaccess file
2. Paste the following code at the end of the file (after all wordpress rules)

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

#2: Optimizing the Critical Rendering Path

It is the sequence of events the browser should do to render the initial view of a web page. In other meaning, it’s the sequential steps made by the browser to display your site on the visitor’s screen.
Optimizing speed performance needs more understating for these steps starting with HTML, and going through CSS and Javascript to use them all in rendered pixels.
By optimizing the critical rendering path you can significantly improve the overall speed of your pages by providing super fast initial view.

The Best steps to Optimize Critical Rendering Path

• Defer loading low priority Javascripts
• Lazy Loading images
• Combine multiple CSS and Javascript in one or two files
• Inlining Small Javascripts and CSS in HTML
• Reduce the size above the fold
• Lazy loading images
• Compressing your CSS, Javascript and HTML

Don’t worry about all these steps because I have written about it with more details in my Optimize CSS and JavaScript Delivery page.

#3: Improve Server Response Time

Its all about your web hosting company and server configurations.
Server response time is the way to measures how long your server takes to responds to begin rendering the page. As Google recommended “You should reduce your server response time under 200ms.”

What is the Most Factors Affect Server Response Time?

• Bad server configurations
• Slow database queries
• Using bad proxy server
• Consume all CPU or Memory server limit
• Wrong firewall setting
• Traffic bigger than what your server can handle
• Misconfiguration web server software

#4: Enable Gzip Compression

Compression is used generally to reduce the size of files served to the user’s browser like HTML and CSS to load your pages faster and save bandwidth.
Using compression will help you to reduce the sizes of pages by up to 70% before it sends to your visitors This reduces transfer load time pretty much since the files are much smaller.

Apache: Use mod_deflate

(Add the following code to .httaccess file)

<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

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Nginx: Use ngx_http_gzip_module

(Add the following code to .httaccess file)

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

You have to check if this works fine or not by Online Gzip Checker Tool.

#5: Minimize DNS lookups

DNS (Domain Name System) maps or guide hostnames to IP addresses, when you browse topseotut.com the browser must resolve the DNS name of the web server to an IP address to start the initial contact which called TTL (time-to-live) DNS record validity.
This process takes 20-120 milliseconds for DNS to lookup the IP address for a given hostname and the browser can’t download anything before this process is completed.
DNS lookups are cached for better performance maintained by the user’s ISP or local area network and also caching on the visitor’s computer (operating system’s DNS cache OR browsers cache)
When the visitor’s DNS cache is cleared and purged (browser and operating system), DNS lookup will be the same as the original hostnames number which will increase load time and cause slow pages.
Reducing the number of original hostnames has the possibility to reduce the amount of parallel downloading that takes place in the page. And then get faster pages load.

How to Reduce DNS lookups?

• Increasing your DNS records’ time-to-live setting
• Minimizing CNAME records (which require additional lookups)
• Replicating your name servers in multiple regions

#6: Optimize CSS and JavaScript delivery

CSS and JS files are common reason to increase load time because its increase RTT (Round Trip Time) and HTTP Requests which means more delay in your page load.
You have to reduce the size above-the-fold area to get fast loading and light HTML page.

• Combine external CSS and JavaScript files.
• Inline small CSS and JavaScript directly in HTML.
• Minify CSS and JavaScript files.
• Avoid CSS @import technique.
• Avoid using style CSS attributes.

Learn more about optimize delivery CSS and JS files.

#7: Optimize images

Images are the biggest files on your site, it negatively affects your page speed if not optimized correctly. One of the most factors that affect your page speed is big-size images which it has to download first in the visitor’s browser and consume more bandwidth from users as well as your server’s bandwidth limit.
Here is the most effective ways to optimize your images without affecting its quality, also check this tutorial to get more details about following tasks and how to optimize images in wordpress simply and fast.

• Lazy images
• Compress images
• Serve scaled images
• WP Smushit plugin
• Sprite image CSS
• Data URI scheme

#8: Avoid landing page redirects

Redirects is an additional HTTP request and delay page rendering. Minimizing HTTP redirects from one URL to another cuts out additional RTTs and wait time for users.

Types of Redirects:-

1. Domain Redirection: (non-www to the www sub-domain)
2. Location/Language : Redirects users to a different version depending on the geographical location of the user.
3. Device Specific Sites: (example.com >>> www.example.com >>> m.example.com) very slow mobile experience

#9: Prioritize visible content

It’s the same meaning as the above-the-fold area, it’s the first visible upper part of your content before the visitor scroll down. Place the content section before the sidebar section to get light pages.

Rendering a modern web page requires lots of network resources but not all of them are needed right away. The visible content of the page is prioritized on the network and the browser so it doesn’t have to compete with the rest of the page. Also, JavaScript is deferred until page load so that it doesn’t block the rendering of page content.

#10: Eliminate render-blocking JavaScript and CSS in above-the-fold content

The browser won’t render your page until it fetches and downloads all external javascript and CSS files which leads to very slow loading pages because of a large number of HTTP requests.
You have to remove all blocking external JavaScript files above-the-area (Upper part) of your page to reduce the delay time to first render.

What is the best ways to Eliminate render-blocking JavaScript?

1. Defer all Javascript to the footer
2. Load CSS asynchronously
3. Combine multiple JS and CSS Files
4. Minify Javascript and CSS

Page Speed Best Practices

• Make your site speed at least load within one second.
• Reduce the size above-the-fold area to get fast loading page.
• Your visitors expect pages load faster otherwise they wil leave your site
• You have to give your page speed top priority as well as posting quality content.
• You don’t have to fix all issues in one day just start with easy tasks so you won’t feel bored.