Hello, and welcome back!!
Lot of websites, even very successful ones, consistently and
unforgivably ignore the website client side optimization.
And it is unbelievably painful to sit through such websites.
My Very Simplified Definition of Website Optimization:
A set of practices which enable a webpage
render faster on browsers, be meaningful to crawlers, reduce server load and
enhance user experience.
May be many of those biggies don’t care about website optimization because they already have enough users with high degree of loyalty but I suggest if you have a website, you should always go for client side optimization.
My simple reasons would be:
1) There are lots of websites around these days,
and the number is sure to grow exponentially. So, if you make a website which
has lot of customers but you fail to optimize it and then someone else makes a
website with all optimizations applied, believe me, loyalties are going to
shift :D even if your competitor offers much lesser features.
2) With extremely optimized websites like Facebook which load in a snap (in spite of pushing so much data), the expectations of an average user from any website have increased a lot.
3) Even if the server sends the response in a second, unoptimized websites can take as much as 5-30 seconds to load (render). As of today, it’s a lot of time for an impatient internet user.
4) The search engines may find it hard to decipher a complicated, heavy & unoptimized website and consequently many not index such websites. Even if indexed, the ranking of such sites may be affected.
So, let’s dive straight into finding out what are the key areas for websites to be slow, where can we focus, what is the correct attitude for website optimization, tools to use and what are the most common mistakes people make.
Which means, that I we will discuss both technical and non-technical aspects of website optimization here.
(Note: I have my major experiences on Tomcat sever for Java based applications, hence, hereafter server => tomcat )
There are essentially 2 aspects that need to be addresses by website optimization:
1)
Reducing load time for all files on Browser
2)
Reducing rendering time for all components on Browser
So, what are the main reasons for a website to be slow?
1)
Wrong presumptions
2)
Wrong attitudes
3)
Insufficient knowledge of website optimization
(Obvious, huh?).
4)
High No Of Http Requests
5)
Heavy Requests
6)
Heavy responses
7)
Request Limits
8)
Insufficient Caching
9)
CSS Expressions
10)
Placement of JS files & synchronization
11)
Usage of inappropriate Javascript frameworks
12)
Inappropriate usage of Javascript features
13)
Environment issues
14)
Ignoring worst case scenarios
15)
Heavy technologies and HTML elements
Let’s start discussing above points & finding solutions for them:
Wrong Presumptions:
i) This is
the best I could have done:
People tend to think that their websites cannot be optimized after a
certain extent. Such presumptions can develop if a person is working on a website
for a very long time & doesn’t keep in touch with market (Read
technologies)-Over indulgence.
Solution: Get out of your
cocoon, read and enhance yourself. Times are changing.
ii)
It’s a
heavy website with so many things on:
Undeniably, lots of websites have lots of features and sometimes people
can feel that with so many features & data, there is hardly any scope for
optimization.
Solution : Think like this
=> Optimizations always focus on individual web pages, not entire websites
and the amount of data & features a single webpage is going to deal with,
will always be limited (Until you have goofed it all up really bad !)
iii)
I am a
simple man and things like optimization are not my cup of tea. They require so
much knowhow of technologies and processes:
Not a completely incorrect presumption but surprisingly, most of the
optimization techniques don’t necessarily need the knowhow of Big &
Complicated technologies. Solution:
Common Sense is the most prominent requirement to optimize a website. Tools
& technologies will definitely help but treat them as a plus
Wrong Attitudes:
i)
It’s a waste of time to client optimize my
website. I can instead focus on adding more features in my website and
improving server performance: Yeah right, add more features & then use
them yourself (Bear Bombing :D)!!
ii) Best user
experience can come only with latest & greatest of technologies:
Similar to point iii of Wrong Presumptions, the difference being, this time,
its arrogance and overconfidence talking.
iii)
Intellectual
overindulgence: Usage of most complicated frameworks & technologies to
prove your intellectual capacity. Taking the entire website on a ride for
personal satisfaction!
Insufficient
knowledge of website optimization:
Well, only way to handle this case. Read more, apply more and test more. It will take much less time than you are thinking and the ROI (Return on investment) will be much higher.
I recommend the following awesome book:
O’reilly website optimization
For Indian Users,
Following blogs are also doing a commendable job digging in and out of website optimization and other challenges.
http://www.smashingmagazine.com
High No Of Http Requests:
Browser gets all the stuff for creating the webpage from a server and ALL requests that it makes are Http Requests. By ALL, I mean ALL.
Whether it be a JS file request, image file request, or CSS
file request
To reduce the no of HTTP requests, combine all JS files into
1, all CSS files into 1, all possible image files into 1 sprite image.
Heavy Requests:
This is, generally, a trivial issue. But sometimes what may happen is, along with lot of request parameters, the browser may send excessive amount of cookies with the request if the server is not on a cookie free domain.
Imagine, if you have hundred images loading on your web
page, all those image request will also, have cookies passed with them which
can lead to traffic congestion and eventually slower rendering time.
It is advised to place all static components of your website
which don’t need cookies in your request on a static cookie-free domain.
Heavy responses:
The amount of response sent by server for different HTTP Requests definitely needs to be trimmed down so that the response can be lighter and faster.
It can be achieved by:
i) G-zipping the file. Configure your server to
send zipped files. When the browsers send a request to server for files, they
also inform the server if they can accept the zipped files and the format of
zipped files. In tomcat it can be
achieved by modifying the server.xml file :
ii)
Minifying CSS and JS files. There are very smart
websites & tools which can shrink the CSS and JS files. However, when
minifying JS files, do take care of safety v/s size aspect. If the compression
ratio achieved is less than 8%, it is probably better to use the original JS
file as the risks associated with minifying JS files do exist and they are real
business risks ad some minifiers can alter the JS in such a way that the
behavior of script may change!! I would deal at length with CSS & JS minification
in my upcoming articles. Stay tuned !
iii) Sending much lighter Sprite images instead of
sending multiple images. Making sprite images is pretty simple. Using them is
also fairly simple as the co-ordinates of the image to be used need to be
specified from the sprite image.
iv) Sending images with minimum possible size that
can be accepted by the user
v) Checking if the amount of data being sent by the
server Is actually needed on the client side. Only send significant and useful
data from server to client.
Try using CSS for developing stylish
buttons, separators etc.
http://www.cssbuttongenerator.com
is an excellent place to begin with.
Also, try to reduce the amount of code in your HTML by putting all the styles in a separate CSS file. Inline styling can make the code look really horrible and scare the Search Engine Crawlers away.
Request Limits:
Till 2009, most of the browsers used to be limited to making 2 maximum connections with the server in parallel. It means, that at the most, only 2 files could be downloaded in parallel from the server
While most browsers psot-2009 can now make 6+ parallel
requests, it is still advisable to keep the no of files to be fetched from
server to be as less as possible.
Also, if you have a huge user base, many of them may still
be using pre-2009 browsers which will leave them susceptible to the dreaded
2-connecton limit.
Ideally, combine all Javascript JS files into one JS file
and all CSS files into one CSS file.
Similarly, combine all background-images into 1 Sprite image
and use them.
Insufficient Caching:
Add “expiry” information with all resources so that the browsers can cache all the cacheable resources and reduce the sever calls.
Refer this brilliant piece of simple code and you should be
done!
http://juliusdev.blogspot.in/2008/06/tomcat-add-expires-header.html
CSS Expressions:
CSS Expressions need to be addressed by the browsers before rendering process begins just like any other resource which is placed in head tag. Hence avoid using CSS Expressions in your CSS files as well as STYLE tags
Placement of JS files & synchronization:
If the JS files are placed inside the head tag, the browser will wait for downloading all the JS files before starting the rendering process. In fact any resource which is placed inside the head tag is processed first and then the control goes to body tag. Hence, it is advised to placed all resources which are not important/needed for rendering in the end, preferably just before body tag ends.
Also, load all the JS related resources asynchronously, and
prioritize them in such a manner that the files which tend to be used more
& earlier are loaded first.
Usage of inappropriate Javascript frameworks:
If you are in awe of Javascript Frameworks like Ext-JS & Dojo, and want to get your hands dirty, drink a glass of water, breathe & ask following questions to yourself:
i) Is this framework really required & useful
for the webpage?
ii) What amount of complexity is going to be
introduced in the application because of this framework?
iii) What is the extra size of JS files that I will
need to deal with for utilizing these Javascript frameworks?
iv) How many bugs this framework has? How may extra
files I will need to add to utilize this framework?
v) Will the end user feel some value out of this
framework?
vi) Is this framework fully supported by all
browsers used by all existing users?
If your answers to above questions are positive, I would suggest you go with the framework. However, introducing excess JS frameworks can load your system in such a manner, that the optimization can be affected very badly and lot of features may require excessive handling.
If you think that the framework can actually add value,
recognize those pages, where this framework will be useful. Don’t include these
JS files on all web pages where they may be unutilized.
Inappropriate usage of Javascript features:
Some features of Javascript frameworks can be extremely substandard & they may affect the performance very badly.
E.g. If you are using DOJO for Internationalization, then,
all the internationalization related property files will be loaded first by
your browser and rendering process will begin only after that. This is an unsolvable
delay. In my opinion, it is always better to address internationalization from
server side rather than client side frameworks.
Similarly other Javascript features which are crippling the performance
should be got rid of! It will require some testing & analysis though.
Environment issues:
Many a times, it happens that the developers are in a completely different environment than users of the website. It is contingent on developers and testers of an application to be in sync with the actual users of a system. For e.g., the internet speed (bandwidth) and machines (Computers), Browsers (Browser versions) which are being used for development and testing an application may be way more advanced than what are being used by a proportion of users resulting in completely different experiences by developers & end-users of a website.
Ignoring worst case scenarios:
Many people always tend to see the best cases while developing an application and end up ignoring user concerns.
Always keep the worst case in mind while optimizing
(developing & testing) a website. Few pointers would be:
i)
Lowest versions of browsers
ii)
Capacity (Speed & memory) of computers
iii)
Capacity of user to understand, navigate &
connect to the website
iv)
Visibility aspects of a website
Heavy technologies & Elements:
Usage of certain heavy technologies can severely impact the usefulness of a website:
For e.g. If Flash files are used for UI, they make take a
lot of time in loading & rendering. Also the response time with flash
elements (e.g. mouse clicks) may be very high.
Similarly if you are using Tables in your HTML file, it can
severely impede the rendering time as the browsers need to understand the table
structures completely before rendering. Nested tables can exponentially
increase the browser rendering time even more.
Use Div tags instead of tables with appropriate application
of CSS
Tools to consider for Website Optimization:
Efficiency with following tools can really help you accurately point out the pain points in your website and understand which portions need an immediate fix:
1)
Firebug:
This Firefox extension does not need any introduction. In the net panel, you
can easily see which resources are taking how much time to load.
2)
YSlow: This free extension offered by Yahoo, directly gets to the point by all
giving a rating between A and F to various parameters affecting the website optimization
along with giving a solution.
3) PageSpeed:
This new extension form Google is fats making its mark because of efficient
data it generates and insights it gives in analyzing the website load &
render processes.
Summary of Website Optimization processes:
1)
Reduce the amount of data being sent to Browsers.
2) Reduce the number of files that the browser
needs to fetch (No of Http requests)
3) Place all the Javascript related files just before
the body tag ends. DO not place the Javascript files
in the head tag as all these files will be loaded before rendering process
starts, hence the rendering process can get delayed a lot.
\
\
4)
Avoid heavy stuff like Flash elements, images. Try
using CSS.
5)
Reduce the size of files (Javascript & CSS
etc files) by minifying and G-zipping. Reduce image sizes. Use sprite images
for background-images
Website optimization is a continuous process & hence, it is not possible to cover everything in a single article. I have deliberately not ventured into topics like AJAX but they may also requires lot of optimization. If you are using AJAX, better use correct libraries and optimize. My suggestion would be to not use libraries as they bring lot of unused code and increase both complexity and size of the files. However, cross-browser and cross-domain related issues may exhaust you and force you to use Javascript frameworks.
Ok, then.
Drop your suggestions & feedback, if you found this post useful (or if you expected something more).
I will discuss Server side optimizations also soon.
