It is well-recognized fact that sluggish page load time prompts users to leave a site. Website speed has emerged as the most crucial factor to gain success in the present competitive online marketplace.

Here at TemplateToaster website builder, I am going to discuss some tweaks to improve your website’s front-end performance considerably:

Reduce load time

A page that loads quickly augments the user experience. Most of the dynamic sites reference a lot of external objects which counts for most of the load time. Reducing the number of individual HTTP requests including pictures, JavaScript and style sheets etc., may greatly decrease the load time.

IE, Firefox, and Safari come with HTTP pipelining switched off by default and Opera is the sole browser which keeps it active. No pipelining implies every request has to be replied and its connection loosened before the following request can be dispatched. This results in an average additional latency of the ping time to the user divided by the quantity of connections permitted. Or when your server has HTTP keepalives deactivated, conducting another TCP 3 way handshake creates one more round visit, doubling this latency. You can also minimize HTTP request size and HTTP response size by allowing gzip compression for HTML and XML for compatible browsers.

After collecting a few page-load times & effective bandwidth for actual users all around the world, you can try out modifications which will better those times. You can try some of these tips:

  • Switch on HTTP keep alives for outside objects. Else you add an additional round-trip to perform one more TCP 3 way handshake and slow-begin for each HTTP request.
  • If you are anxious about breaking global server connection restrictions, configure the keepalive timeout brief, such as 5-10 seconds.
  • Also, view supplying your static content from a separate web server as against your dynamic content.

Reduce download size

Browsers use up time to download the code that constitutes your page. The HTML, style sheets, your scripts, and images have to be downloaded which can take quite some time.

A site’s resource files size will increase as web users go for more interactive site designs. Every new feature needs a fresh script or stylesheet addition which pulls down your site slightly.

You should consider the following aspects to reduce your download size.

Optimize Images

Images comprise among the most popular bandwidth issues on the internet. The first method to optimize your images is by scaling them adequately so as to minimize their size.

The second way to optimize your images is by compressing them. Free online image compression tools can decrease your image size considerably without compromising on quality and size reductions can be from 25% to 80%.

Browser Caching

Activating browser caching enables you temporarily hold some data on a user’s computer, so they don’t have to look for it to load each time they visit your site. The duration for which the data is stored is based on their browser configuration and your server-side cache settings.

Compression

By activating compression you effectively place your website in a zip file. Compression can significantly decrease your page size and make it faster. Compression can take away 50-70% from HTML & CSS files which eliminate data for your visitor to download.

Place your scripts beneath the fold

Javascript files may load after the remainder of your page, and if you place them before your content, they will load prior to your content. Put your external javascript files at the end of your page, immediately before the close of your body tag to overcome this potential bottleneck. The nature of the scripts makes the browsers stop all downloads when they detect a tag. Putting the script below the page is a method for avoiding such negative blocking impact

Reduce HTTP Requests

When your browser retrieves data from a server it achieves so employing HTTP (Hypertext Transfer Protocol). It constitutes a request between a client and a host. The greater HTTP requests your web page does the slower it will take to load.

You can decrease the number of requests by these means:

  • Inline your Javascript (provided it is extremely small).
  • Reducing assets like third party plugins which comprise a big number of external requests.
  • Don’t employ third party frameworks unless absolutely essential.
  • Utilize less code
  • Combine your CSS files
  • Combine your JS files

Optimize Assets

You can optimize assets to improve your website’s performance by following means:

Employ a Content Delivery Network

A Content Delivery Network (CDN) includes a network of servers in various geographical locations. Every server carries a copy of a site’s static files like images, stylesheets, and JScript. When a file is requested by a visitor to your site it is dispatched from the nearest server (or one which carries the least load at the time).

80-90% of the end-user response time is used up in downloading all the components of the page images, stylesheets, scripts and Flash. Instead of beginning with the complex job of rebuilding your application architecture, it’s advisable to initially distribute your static content. This not just brings a greater decrease in response times, but it’s simpler as a result of content delivery networks.

Minify Scripts

Minifying refers to removing that which is unnecessary like comments and whitespace. Obfuscating extends a step further and includes renaming and relaying functions along with variables to make the names shorter which makes the script quite difficult to read. Obfuscation is applied to keep the JavaScript source confidential, although if a script is accessible on the internet, it cannot be confidential. An ideal software program for JavaScript minification is JSMin which also contains a PHP port besides others.

Gzipping (Compressing) the JavaScript helps in maintaining the file size and only minor advantages will result from minifying or obfuscation of the script. Gzipping plus minifying of the scripts can save your file size up to 80-90%. While altering your code to minify or to obfuscate there is a possibility to create bugs. If stealing of your code is not your concern you can simply merge and minify or just merge the scripts and gzip them.

Removing Duplicates

For JavaScript optimization, one should refrain from including the similar script twice. The duplicate script will make the browser’s parsing engine to start twice and perhaps request the file for the second time. Duplicate scripts also create problems while using third party libraries.

Make use of Optimization tools

Google PageSpeed Insights

Your web page loads quickly by employing optimization tools. Optimization tools like Google PageSpeed Insights permit you to assess the loading time of resources and evaluate whether the portal’s user experience is at par with present global standards and practices. Components such as large graphics and CSS files are traced very fast and helpful suggestions on resolving such issues are also accessible.

Web page test

It is a great website speed tool and more exhaustive and feature driven compared to PageSpeed Insights. It shows finite details in waterfall graphs types about your portal’s HTTP requests.

Google Chrome Developer Tools and Firebug

Finally, you can use the Developers tools offered in Google Chrome and Firebug to trace and fix the bugs in pages. These tools offer a plethora of options that are a lifeline of web developers.

The tool displays a visual feedback and timestamps for each event and object parsed by the browser. Though PageSpeed Insights and Webpage test form excellent tools but the detailing from applying the Google Chrome Developer Tools exist within your browser. It measures first and optimizes later.

 

[call_to_action color=”gray” button_icon=”download” button_icon_position=”left” button_text=”Download Now” button_url=”https://templatetoaster.com/download” button_color=”violet”]
Create optimized websites in minutes using drag and drop interface TemplateToaster
[/call_to_action]