All thoughts started from class presentation at BCIT (British Columbia Institute of Technology), and I got excited attending in Style and Class Conference
One day, facing with the presentation on own portfolio works, most of classmates were struggling with how slow and heavy their websites are. At that time, what I knew for improving performance was;
- Decreasing HTTP Request
- Scaling down file sizes
- Checking the result by Chrome developer tool (> network)
I have just heard Rendering Block issue before, but did not know specifically what to do. Surprisingly the next day when I attended in Style and Class Conference in Vancouver, one of the topic was “Improving Smashing Magazine’s Performance”. It really motivated me to learn the issue considering my job background.
In case of beginners, where should they start thinking about website performance?
HTTP Request
Just for getting one small image file, several steps to transmit data are required, and when summarizing;
- DNS Lookup: inquiry for DNS server to solve the relationship between domain name and IP address
- Establishing connection with server
- Sending HTTP Request for getting certain data
- Receiving Response to the request
So, as the number of files increases, more requests and responses between client and server are necessary. That’s why CSS sprite or Data URI scheme are often used.
Also, since the data transmission is conducted, server response speed is important. Probably many people think this is the causality of making their website slow. But it is not always the reason to cause it. Server has normally limitation for number of receiving request at the same time, so if you have 10 images with relatively large size, some of files have to wait until others finish processed.
Rendering Block
Files: HTML, and often CSS and JavaScript are Rendering Block Elements. This means, until finishing to set up DOM / CSSOM, browser stops rendering contents, and if JavaScript is loaded as the element, it holds rendering too. Whether or not JS is loaded so depends on how we write code and there are several ways to minimize the problem, but sometimes it can be a big problem for WordPress Users using theme which is already set up (free or paid do not matter).
When I checked some of the websites, for instance, it processes images by using jQuery. Perhaps it is because the theme adopts Graphical User Interface to set up images, and the function depends on jQuery. Thus, in this case, rendering is blocked until the site fully loads jQuery, which is relatively large size especially for mobile users.
Check Your Site
I just mentioned the background knowledge, but for your first step, let’s check your website by following tools.
The first one is light version compared with second, and has instruction how to improve page speed. Anyway, I have to modify my site, too…
