Categories
CSS Front End Java Script Network

Optimising Aljazeera.net website – Front End case study

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

Why I choose Aljazeera website?

I have chosen Aljazeera website because of the following reasons:

  1. It’s popular in the MENA (Middle East and North Africa) region and one the top 1,500 websites in the world. Alexa rank (screened on July 15, 2015):
    Aljazeera Alexa Rank
  2. The website is slow like a snail. More than 4.2 seconds download in the best case scenario. Pingdom speed test:
    Aljazeera pingdom test
  3. It has lots of issues that I wanted to cover in this post.

What does it already have?

The website is not well optimised. I can only say it’s HTML code is good. The HTML has some issues like have extra codes that are useless and some inline scripts.
The DOM is defined as HTML5 tag, which is good. And we have a “viewport” META tag, which means the website is responsive. That’s good for SEO too.
So, its going to be a big article covering all areas and optimising all aspects of this website.

Optimising HTML.

The HTML is not optimised. We have some inline Scripts that should be moved to Javascript files. There are 7 <script> tags in the HEAD. 3 are file includes and 4 are inline code.
We have 16 Javascript tags <script> in the page. All these scripts are around the page. And as i mentioned previously, 7 in the <head> tag.
As we also can see, we have around 156 requests including 3rd-party services. These requests could be optimised to smaller number by concatenating CSS files into 1 file, and Javascript files into 1 or 2 Javascript files.

Also there is a refresh META tag. Seems they use it for increasing page views:

<meta http-equiv="refresh" content="900" />

Optimising CSS.

This area needs lots of work.

  1. Commented CSS code.
  2. CSS properties better to be combined in one. Example “background” instead of background-image, background-position, background-repeat
  3. The use of !important; This !important should be used very carefully. While most of engineers say: Don’t use it at all.
  4. Use real and useful values. We have some values like:

    Your ads will be inserted here by

    Easy Plugin for AdSense.

    Please go to the plugin admin page to
    Paste your ad code OR
    Suppress this ad slot.

    text-indent: -50000px;
  5. using CSS properties in a wrong way, using “overflow:hidden” for body and html. Also using font size for html as percentage. While this, or the body, should have the initial value. Here is an example:
    html {
    	font-size: 62.5%;
    	overflow-x: hidden;
    }
    body {
    	line-height: 1;
    	overflow-x: hidden;
    }
  6. There are deep CSS calls, like:
    .CommentsLiveMod #comments .comments-section #ManinReaderComment .main-comment .start-comment-on-comment .close-commenting:hover
  7. Using generic CSS, and this is really bad. Here is an example (its only One css block here):
    .arab_world_drag_tabs>div>div>div

Optimising images.

Article images are well optimised. But when we take a look at the icons and images loaded from CSS, we find the following:

– Images are not optimised at all.
– All images and icons are separated. They should be combined into image sprites.

Optimising JS

We have lots of work here. Here are some points about improving javascript:

  • Move most of inline Javascript code to JS files.
  • Combine Javascript files together to decrease hits on server. And to decrease rendering time.
  • Call Javascript files from CDN, this will boost the website’s performance, while the file are currently loaded directly.
  • Move Javascript files at the end of document. This will affect some events handling in the website, but updating the events will solve this issue.
  • Javascript code is not minified. This means more Bandwidth and more page loading time.
  • There are couple of 3rd-party scripts are loaded, but i can’t suggest anything here while these are used for monitoring, adding features, and delivering extra features.

 

Categories
Bootstrap CSS HTML Java Script Jquery touch Web & Programming

Overriding Javascript in Twitter Bootstrap

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

You all know about Twitter Bootstrap. It’s the top front-end development framework and it’s spreading more and more. And while this framework was made on standards and most of useful components were added to it, some of us may need to override some code of it for his/her needs.

I had a chance to work on that, i mean overriding. Let me explain what I was doing and how I did that.

I was working on Left Tabs explained below:

left-tabs

I put a Youtube video in the Tab Content side and when screen size gets smaller, the video gets smaller. This is a really bad behavior for using this.
So, I added an exceptional case for Content to get beneath the tabs in small screens.

In HTML, I made this:

 
<div class="tabbable tabs-left">
	<ul class="nav nav-tabs">
		<li class="active"><a href="#tab1" data-toggle="tab">
			<span class="video-title">1st video</span>
		</a></li>
		<li><a href="#tab2" data-toggle="tab">
			<span class="video-title">2nd video</span>
		</a></li>
		<li><a href="#tab3" data-toggle="tab">
			<span class="video-title">3rd video</span>
		</a></li>
	</ul>
	<!-- Here is what i've added -->
	<div class="clearer"></div>
	<div class="tab-content">
		<div class="tab-pane active" id="tab1">
			<div class="tab-content">
				<p>
					<h4>1st video</h4>
				</p>
				<iframe width="98%" height="400" src="//www.youtube.com/embed/Sui1IDorBsQ?rel=0" frameborder="0" allowfullscreen></iframe>
			</div>
		</div><!-- #tab1 -->
		<div class="tab-pane" id="tab2">
			<div class="tab-content">
				<p>
					<h4>2nd video</h4>
				</p>
				<iframe width="98%" height="400" src="//www.youtube.com/embed/Sui1IDorBsQ?rel=0" frameborder="0" allowfullscreen></iframe>
			</div>
		</div><!-- #tab2 -->
		<div class="tab-pane" id="tab3">
			<div class="tab-content">
				<p>
					<h4>3rd video</h4>
				</p>
				<iframe width="98%" height="400" src="//www.youtube.com/embed/Sui1IDorBsQ?rel=0" frameborder="0" allowfullscreen></iframe>
			</div>
		</div><!-- #tab3 -->
	</div><!-- .tab-content -->
</div><!-- .tabbable -->

The CSS used for the <div class="clearer"></div> is here:

 
@media (max-width:480px){
.clearer {
  *zoom: 1;
}
.clearer:before, .clearer:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearer:after {
  clear: both;
}
}

Why was all that?
I needed to use Left Tabs, and clear the float when viewing in a small screen like mobile.

The problem I’ve got is:
When I click on tabs, when tab content are not in view area, I feel nothing happens. While it’s working fine. But its not scrolling down to tab content.

I tried to add scrolling on Click event, but it didn’t work. The reason is, they are using Event Delegation.

I fixed this with the code below:

// this line will remove the Previous event.
$(document).off('click.tab.data-api');
// This will add event but wthout e.preventDefault(); line
$(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
    $(this).tab('show');
});

The Bootstrap code was:

$(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
    e.preventDefault()
    $(this).tab('show')
})

The bootstrap JS file I am talking about is: https://github.com/twbs/bootstrap/blob/master/js/tab.js scroll to the end of file to line 131

Resources for solution:

 

Categories
AJAX Browsers CSS Design DHTML E-Commerce Free Stuff HTML Java Script Jquery Misc Network PHP SEO Web & Programming Web Browsers XHTML

Tips for Better Website Performance

I am here not talking about Server-side improvements. I am here talking about Front-End improvements that really affects the web page speed.

The time spent till the website is running on the client’s browser. If we analyze that time, we will get: