Website Speed Concept

Website Speed Concept

Before we go into the list of speed testing tool, let’s talk about how the concept of website speed and how we interact with it.

Determine the Problem

First, you need to identify which segment cause the problem and solve it one by one. It could be scripts, fonts or plugins cause the load time problem.

Minification of Scripts

Minification works by analyzing 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 remove unnecessary characters from your HTML, Javascript, and CSS that are not required to load including:
a. white space characters
b. new line characters
c. comments
d. block delimiters

Optimizing Large Image

You should choose wisely on the image format.
GIF is the only choice if you need animation on the image.
Use PNG if you need to preserve fine detail with highest resolution.
None of the above? Use JPEG instead.

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.

Also, see what Google explain about images optimizing.

Render-blocking JavaScript or CSS

Google recommends removing or deferring javascript that interferes with loading the above the fold content of your webpages. Here is a great tutorial on how to properly defer javascript loading.

Render blocking CSS can also be difficult but let’s look at the example:
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.

Sound confusing? To summarize, we only load the scripts or CSS only when we need it!

Time to First Byte (TTFB)

Time to first byte (TTFB) is the measurement of the responsiveness of a web server. Basically it is the time it takes your browser to start receiving information after it has requested it from the server. By using a CDN you can dramatically reduce the impact of the load 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 using HTTP (Hypertext Transfer Protocol). It is a request/response between a client and a host. In general the more HTTP requests your web page makes the slower it will load.

There are many ways you can reduce the number of requests such as:
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 large number of external requests

Content Delivery Network (CDN)

A content delivery network (CDN) is a system of distributed servers that deliver pages and other Web content to a user, based on the geographic locations of the user, the origin of the webpage and the content delivery server. The goal is to distribute service spatially relative to end-users to provide high availability and high performance.

Free Website Speed Test Tools

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