How to Improve Page Speed for your Website

By Bhavesh Jain
February 3, 2015 | 1123 Views

Latest Industry insights to keep you updated on the latest happenings.

There are some common issues like:-

► Leverage browser caching: 

Expires headers tell the browser whether a resource on a website needs to be requested from the source or if it can be fetched from the browser’s cache. When you set an expires header for a resource, such as all jpeg images, the browser will store those resources in its cache.

► Enable compression: 

Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70% . Gzipping reduces the size of the HTTP response and helps to reduce response time. It’s an easy way to reduce page weight.

You can enable it by adding the following PHP code at the top of your HTML/PHP file:

<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>

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

► Optimize images: 

Images can contain extra comments and use useless colors. Keeping image sizes to a minimum is a big help for users on slow connections. Try to save in JPEG format. You can use a CTRL+SHIFT+ALT+S shortcut to save an optimized image in Adobe Photoshop.

► Minify JavaScript: 

JavaScript minimization tools give you another way to reduce your overall download size. These tools work on JavaScript source code for your webpage. The tools remove unneeded spaces and comments, and sometimes even change the names of variables in your program to shrink the file size even more. However, the commonly used minimization tools miss additional ways to compress the code even further.

► Minify CSS: 

But there are some principles to consider during and after you write your CSS to help keep it tight and optimized. Optimization isn’t just minimizing file size — it’s also about being organized, clutter-free, and efficient. You’ll find that the more knowledge you have about optimal CSS practices, smaller file size will inevitably come as an direct result of their implementation.

► Minify HTML:: 

Removing HTML comments, CDATA sections, whitespaces and empty elements will decrease your page size, reduce network latency and speed up load time.

These can be fixed by adding code below in .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 # 

<ifModule mod_deflate.c>
<filesMatch "\.(js|css|html|php)$">
SetOutputFilter DEFLATE
</filesMatch>
</ifModule>

 

 

► Reduce server response time: 

This issue can be fixed by optimizing code and query on server in our app.

There are two basic ways to do this:-

  • Learning – use the hosting you have more efficiently
  • Paying – pay more for hosting and hardware

 

Server response time factors:-

Four main things come together to determine your server response time:

  • Website Traffic – More traffic, more problems.
  • Website Resource Usage – If each of your webpages used less resources, you could improve server response time and not spend money
  • Web Server Software – If you change your web server software or configuration you likely could improve server response time and not spend money
  • Web Hosting – If you improve the quality and scope of your web hosting you can improve your server response time, but you will have to spend money

 

Reduce the resources a page uses:-

  • Combine external CSS files – Many themes and designs have separated all the CSS into several different files, but all CSS can be in one file so the page is calling less resources per page.
  • Combine external javascript files – Just like CSS, the javascripts your pages use can all be located in the html or in one combined external js file. Too often they are not and this creates wasteful external calls.
  • Lazy load images – Lazy loading images alows the webpage to be displayed without calling and downloading each image right away.
  • Inline small CSS and Javascript – In some cases, you do not even need to have your CSS and Javascript in an external file. If you put them in the HTML file itself, then no additional calls would be required for them. I discuss how to do this with CSS here and with JavaScript here.

Monthly industry insights to keep you updated on latest happenings

Follow us on Twitter
Follow us on Facebook
Follow us on Linkedin