Website Speed Concept

Often we run into issues of websites taking too long to load. If the loading time is too long, it will cause some visitors or users to get impatient and eventually quit the website.  There are many ways to deal with slow loading time and sluggish website performance. Before we go into the list of speed testing tools, let’s talk about the concept of website speed and how we can manage it.

Determine the root of the problem

First of all, you need to identify the source of the problem and if needed, segmenting the possible causes one by one. Normally it could be due to scripts, plugins or even fonts. If a website is bloated with unnecessary items, it will contribute to sluggish website performance. On another area, older systems and slow connections are not able to keep up with “taxing” and “heavy” websites. A leaner website also helps you to retain more happy visitors.

You can also seek help from the agency like Inspiren, they are leading web design agency in Malaysia that offer affordable pricing.

Script Minifications

Having complex scripts could use up a lot of computing power thus slowing down the website. To overcome this, we can employ script minificaiton. Minification is done by analysing and rewriting the text-based parts of a website to reduce its overall file size. Minification extends to scripts, style sheets (CSS), and other components that the web browser uses to render the website. Minification is performed on the web server before a response is sent. After minification, the web server uses the minified assets in place of the original assets for faster distribution to users. Basically, minification removes unnecessary characters from your HTML, Javascript, and CSS that are not required to load including:

I. White space characters

II. New line characters

III. Comments

IV. Block delimiters

Optimizing Large Image

It is nice to use high resolution image on your website however you should choose the image format wisely. In general, you can use GIF files for all non-photographic images. Some simple animations also can be done with animated GIF.  You may choose PNG if you need to preserve fine detail with the highest resolution. If none of the above works for you, try using JPEG instead. If you need to settle large image size problem fast, Google PageSpeed Insights will actually help you to optimize the images to the ideal file size, what you have to do is just hit on the download button and replace the images accordingly. You can find out more on Google about image file optimization.

Render-blocking JavaScript or CSS

JavaScript

JavaScript is actually very useful and supported by many different operating systems. Although it is widely adapted in web technologies, it is also notorious for slowing down websites and attracting threats (Exploits and viruses). Google recommends removing or deferring JavaScript that interferes with loading above-the-fold content of your webpages. Here is a great tutorial on how to defer JavaScript from loading.

CSS

Render blocking CSS can be a bit difficult but let’s look at the example on how to do it:

  1. Identify the styles that are required to render above-the-fold content and deliver those styles inline with the HTML.
  2. Use the media attribute on the link elements that pull in CSS files to identify CSS resources that are conditional, that is, only needed for specific devices or situations.
  3. Remaining CSS resources should be loaded asynchronously, a move that is typically done by adding them with deferred or asynchronous JavaScript.

Still confused? No need to worry and take your time to understand it. In short we only load the scripts or CSS only when needed!

Time to First Byte (TTFB)

Time to first byte (TTFB) is the measurement of the responsiveness of a web server. Basically it is the duration from the user making a request to the first byte of the page being received by the client’s browser such as Chrome or Edge. By using a CDN you can dramatically reduce the impact of the loading time on your origin server, which in turn should help decrease your TTFB.

HTTP Requests

When your browser fetches data from a server it does so by using HTTP (Hypertext Transfer Protocol). It is a request/response between a client and a host. The more HTTP requests your web page makes, the slower it will load.

There are many ways to reduce the number of requests, here are some examples as follow:

  1. Combining your CSS and JavaScript files
  2. Inline your JavaScript (only if it is very small)
  3. Using CSS Sprites
  4. Reducing assets such as 3rd party plugins that make a lot of external requests

Content Delivery Network (CDN)

The speed of a webpage is also determined by distance or the location between client and server. Instead of relying solely on one server, we can actually employ CDN.  CDN or Content Delivery System is a geographically distributed network of proxy servers and their datacenters. The goal of having CDN is to distribute service spatially relative to end-users to provide high availability and high performance. CDN is not a host but a network that provides quick transfer of assets such as images, JavaScript files and Videos. Imagine you want to watch a DVD movie, instead of getting it all the way from the supplier (host) in US, you can actually pay the same supplier while retrieving a copy from a local dealer.

By reviewing all of aspects above, you can ensure an optimized website that can be fully enjoyed and enticed by your audience. To end this, here are some free website speed test tools or solution for you to try out.

  1. Google PageSpeed Insights
  2. Think with Google
  3. Google Chrome DevTools
  4. Inspiren
  5. KeyCDN Speed Test
  6. Pingdom
  7. GTmetrix
  8. WebPageTest
  9. Varvy Pagespeed Optimization
  10. UpTrends
  11. dotcom-monitor
  12. PageScoring
  13. Yellow Lab Tools
  14. Sucuri Load Time Tester
  15. Pagelocity
  16. YSlow