comment 0

Web Performance Techniques Part-02

10 Basic Web Performance Techniques

Since we have discussed different ways to identify issues related to page load. Here are some common issues which we need to look after while designing or developing a site.

While writing this blog post I came to know that its lengthy to lengthy to read it in one sitting therefore, I have covered only first points in this post. More will come up in the next.

1. Image Optimization
2. Reduce Http Requests
3. Minifying CSS & JavaScript
4. Removing Render blocking CSS & Scripts
5. Use CDN
6. Web Font Performance
7. Scaling Images
8. Pre-fetch and Pre-connect
9. Caching
10. Removing un-used code

1# Image optimization

According to a study 64% of websites page weight is made up of images. Therefore, it’s critical to optimize images for web. You can use following tools to optimize them.

1. Tinypng (a web based image optimization utility)
2. Photoshop

Photoshop save as for web
Photoshop save as for web

As most of the designer know Photoshop well therefore, I have only listed options below. This window can be accessed from File -> Save for Web or via shortcut key Ctrl + Alt + Shift + S

A. Display options
B. Toolbox
C. Optimize pop‑up menu
D. Color Table pop‑up menu
E. Animation controls (Photoshop only)
F. Zoom text box
G. Preview in Browser menu
H. Original image
I. Optimized image

2# Reduce http Requests

Browser fetch data using HTTP (hyper transfer protocol). When page is requested on client side will be a request from client and response from server to provide resources. More request means more communication between client and server which cause delays.

Therefore, it’s always recommended to reduce http requests. Below are some useful tips to reduce http requests.

There are a number of ways one can reduce http requests:

• In file JavaScript (only if its very small)
• Use CSS Sprites
Reducing and removing JS as we sometimes use 3rd party libraries. I would suggest to write your own JS for menu’s it won’t take long and save you plenty of extra time. It usually causes conflicts with other plugins as well. These scripts are one of the biggest reason for site loading issues.
• Combining CSS and JS files (Keep CSS, JS which was added at the last, keep it on the top)

3# Minify CSS and JavaScript

Minifying resource help reduce page size which is need to be requested to server.

There are number of online resources available which can make your job easy. Normally they do following

• Remove white space
• Remove new line characters
• Remove comments
• Block delimiters

HTML minify, CSS and JS minify

4# Removing Render blocking scripts

First step is to Identifying issue. As mention in Web performance Part 01 google speed insights or chrome developer tools network tab can be utilized for this purpose.

Google speed Insight
Google speed Insight

CSS
• Move CSS to header
• Use media query blocks wisely to target a screen specifically
• Concatenate multiple CSS files

JavaScript
• Move all JavaScript to footer
• Concatenate JavaScript
• Minify JavaScript

Async allow script to be downloaded in the background without blocking the DOM. Once it finishes downloading, then rendering is blocked and that script executes. Rendering resumes again if script has executed. E.g.

<script async  href=”webPerformance.js”></script>

5# Use CDN

CDN stands for content delivery network. Using a CDN can reduce site load time by 73%. See Website Latency With and Without a Content Delivery Network.

Sometime CDN not reliable but we can create a fallback for them. For example jQuery CDN

<script src="https://ajax.googleapis.com/jquery.min.js"></script>
<script>
if (typeof jQuery === "undefined") {
   document.write('<script src="/path/to/your/jquery"><\/script>');
}
</script>

What’s next?

Web performance Part 03

In the next blog post on web performance we will discuss following techniques:

6. Web Font Performance
7. Scaling Images
8. Pre-fetch and Pre-connect
9. Caching
10. Removing un-used code

Keywords

Web Performance, Website performance, Website load time improvement, Web Performance Techniques, Web Performance Techniques, Web Performance, website load optimization, website speed optimization