Yahoo Tips for Best Practices to Speed ​​Up Sites


A simple summary or perhaps a non-literal translation of this article, which contains 35 tips for speeding up websites. I only touched here on 26 tips that I promised you before when I talked about the best websites to measure your website browsing speed . The important thing is that I tried to summarize this article as much as possible and I want to point out that when I applied some of these tips, my site became faster, thanks to God, because previously I used to measure the speed of my site and found 30s to open the site and now it is almost 2.81s, I mean, Tamarha gave these tips for my important site. I don’t bother youThe important thing is that the apparent brothers who read the topic for the first time will not understand anything, but through the application, God willing, everything will become clear. Translating such articles is actually difficult for me first, because I am not an English professional, and the second thing is in words that need to be explained by themselves 🙂Advice if you are not familiar with these matters, do not rush to apply them, you will encounter many problems as happened to me previously. How many times have my site been disrupted because of these tips because I did not know anything about them and this is because I read and wanted to apply directly

First of all, the article is in English here. For those who are fluent in English, it is better to read it there

Dear brothers, we will discuss the application of these methods in later posts, God willing, in detail regarding the WordPress blogging script.

Minimize HTTP Requests

The first and most important advice ever from experience is to reduce the rate of HTTP requests, as you know. Once a site is requested, for example yahoo.com, HTTP requests are directly sent from the visitor’s device, so to speak, to the yahoo.com servers, and thus these requests are answered.By requests here, we mean the page elements or their content, i.e. html codes, formatting files (css), javascript files (js), backgrounds and images for the design, flash if any, etc.

And while responding to the visitor’s requests, the visitor’s browser downloads these files or elements. If they are many (for example, 5 format files, 4 JavaScript files, and 10 wallpapers with icons, this is only for the design, do not forget the ads and other content on the site) it will take a longer time to display this page, even if it is The page will be displayed quickly, so the key to the speed of your site lies in reducing these elements, and to reduce the rate of these requests, either the design of your site is very simple, or you make these suggestions that were mentioned in Yahoo tips, which are as follows:

  1. Compilation of files (Combined files) This method also helps to reduce the rate of HTTP requests and here will collect all formatting files (css) in a single file format and the same way for JavaScript files
  2. CSS Sprites This method depends on collecting the backgrounds of your site design and icons in one image, which is a rather difficult method and also has an important role in reducing the rate of HTTP requests, as you know some designs contain many backgrounds and icons
  3. Image maps  This method has the same role as the previous method, but its drawback, as stated in Yahoo’s tips, must be the backgrounds and icons listed on the same page. Although I know that I tried this method using a special tool for it, and it succeeded, I do not remember whether that tool was really specific to this technology or not.
  4. Inline images  This method is a way to implicitly include images in pages instead of using them externally. The method is really slow, but it has some drawbacks

Use a Content Delivery Network

The use of the content network also has an important role in accelerating browsing of websites, as stated in Yahoo’s advice, and it was talked about in a previous explanation entitled What is the CDN service and the best sites that provide this service? This method also has many advantages other than speeding up site browsing, for example, reducing the load on the server. The important thing is this method enables you to distribute your fixed site files such as format files, JavaScript images, etc., to servers geographically distributed throughout the world, and this distribution is according to the service provider. The main task of this service is to place the content of your site in the closest geographical area to a visitor and reduce the delay in data transmission, and this will help in faster loading of your site contents.

By the way, for me, I now use Google Apps service because its servers are fast and powerful, better than cloudflare. To learn more about how to use Google servers as a content distribution network, see this article entitled Using Google App Engine as a CDN

Add an Expires or a Cache-Control Header

This method is intended to give the files an expiration date so that these files are stored in the visitors’ computers for a certain period and the purpose of this storage is not to download these files again in case the visitor visits the site again and this code that is given to the files via htaccess do not use it now until we discuss an explanation This topic

ExpiresDefault "access plus 10 years"

The files are, of course, stored in a special place on the device of the browser (or the so-called cache) that the visitor uses  

The importance of this method is that these files will not be reused again when the visitor visits again, but one of the Yahoo developers studied this method, during which it became clear that 40% – 60% of visitors empty the cache to the browser, which leads to reloading all the content of the site again For more on this study, please review this article, Performance Research, Part 2: Browser Cache Usage – Exposed!

Gzip Components

In the first tip, when Yahoo developers talked about reducing the rate of HTTP requests to speed up browsing, this method comes to help transfer HTTP requests faster than before, by compressing files before sending them to the visitor’s browser, and this will increase the page load speed well.

This process is done by informing the visitor’s browser to the server that the browser supports file compression via HTTP requests by sending Accept-Encoding in HTTP requests. Example:

Accept-Encoding: gzip, deflate

If the server finds this information in HTTP requests, it will compress the files according to the method the server uses, either gzip or deflate. After that, the server informs the browser via Content-Encoding when responding to HTTP requests like this:

Content-Encoding: gzip

As for the compression method, there are two types of file compression: GZIP and DEFLATE, and most hosts now support file compression and compression type according to the type of apache web server. For users of apache version 1.3 they use the mod_gzip model, and for users of apache 2.x they use mod_deflate

The most popular way to compress files is GZIP, which was developed by the GNU project for its high performance, and then DEFLATE is less effective and less popular as well.

And if you want to know whether your site supports the compression method or any type, use the following site: GIDZipTestBy the way, you should activate this method through the Htaccess for static files, but do not rush until I explain this method

Put Stylesheets at the Top

In this method, they talk about placing the format files at the top of the page or the header (haader). After they tried this method, it became clear to them that the page loads faster and by placing the format files at the top of the page inside the tag Head will make the page load gradual.

As for the gradual loading of a page, it is of special importance, as it displays the closest content, meaning anything that the browser will reach first, for example, wallpapers, icons, texts, etc. It is also important for pages that contain large content for those with weak connections

It is important to sum up, do not put the format files at the bottom of the page because it has some negatives

Put Scripts at the Bottom

In this way, they talk about placing the JavaScript files at the bottom of the page (footer), completely opposite the format files, because the JavaScript files prevent the parallel loading of the site’s contents, in other words, no element of the site’s contents is loaded until the JavaScript file is downloaded. Perhaps one of you has encountered this problem before, when you enter a site, the page loading stops at a .js file, and this is the problem they are talking about, so the best thing is to put the files at the bottom of the page

Avoid CSS Expressions

As stated on the Yahoo site, CSS expressions have important advantages, but they are dangerous for your site at the same time. These expressions are a way to give automatically changing properties without your intervention. As you know, formats in CSS are fixed. This is an example of css expressions:

 background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

By the way, these expressions are executed by JavaScript. It is important that you avoid these expressions because they affect the performance of the site pages poorly

Make JavaScript and CSS External

In this method, they talk about the importance of hosting formatting and JavaScript files in external sites, and by using this method, you will increase the speed of displaying pages, because if you use these files implicitly, that is, you use them from your site directly, they will be downloaded every time your site pages are displayed, and as we know that the use of files is implicit Reduces the number of HTTP requests requested but increases the size of HTML pages. On the other hand, if JavaScript and format files are used externally, the HTML pages will be reduced in size without decreasing the rate of HTTP requests.

The important thing is not to prolong this talk. It is recommended to use external files so that they are not downloaded every time for visitors who browse your site heavily.

Reduce DNS Lookups

Domain Name System (DNS), short for Domain Name System, is a system that translates domain names from words to numbers known as (IP Address). The important thing is that this is only a definition from wikipedia as it is known that when you type, for example, mwordpress.net in your browser, the first step that your browser takes is to query the IP of this site, and this is done via DNS, or the domain name system, and in this case the search takes About the range, usually 20-120 milliseconds, by the way, the browser does not load anything from the page if the search for the domain is not completed completely.

The important thing here is that the site advises to reduce the number of domain names on your pages, but this has a negative impact on parallel downloads, although it helps the site’s response to HTTP requests. Domains names) you should not exceed 4 domains (in the application you will understand more)

Minify JavaScript and CSS

In this method, they talk about reducing (Minify) the size of JavaScript files and format files by removing unimportant symbols to reduce file size and achieve a good download speed. When files are reduced by removing code comments, spaces, etc. in this case, the file size will become much smaller, and this will help in a faster response to HTTP requests. There are many tools that do this, the most famous of which are JSMin and YUI Compressor .

There is a WordPress plugin that does this and more than that as well. We will discuss it later, God willing, in detail

Avoid Redirects

Here is the talk about redirecting the visitor via HTTP status codes, which are 301 and 302, and this is an example of redirecting a 301 response to an HTTP request:

HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html

Here the browser automatically directs the visitor to the link in the Location field. All the information required to redirect is present http headers. To learn more about (HTTP Headers) review this post from here

The bottom line is that you do not use a redirect, because it slows down the speed of browsing the site, and also you should use mod_rewrite in order to avoid problems with DirectorySlash for folders, because it also causes a lot of redirection to the browser, and this increases the display time of the page to the visitor or browser

Remove Duplicate Scripts

Here we are talking about attention not to frequent use of JavaScript files, and as Yahoo pointed out with regret that two of the top 10 sites in the United States have fallen into this problem, and there are two main factors that increased the probability of repeating the same files, which are the number and size of these files

The bottom line is that when you download the file twice, this will increase the display time of the page, and this is a bad thing of course, as we previously talked about the importance of putting JavaScript at the bottom of the page. When a JavaScript file is requested, all http requests (eg images and format files) stop until the JavaScript is loaded.By the way, most sites these days have become dependent on jquery libraries. Therefore, before using any new script, you must check that there are not the same JavaScript files included with the template you are using, and then you can use them if you do not have them, but in the case of the opposite, you can dispense with them

Configure ETags

The ETags abbreviation for entity tag is part of the HTTP system based verification of the validity of the files stored in the visitor device. The important thing is, as stated on the Yahoo website, this method has some problems and it is recommended to remove them to reduce the number of HTTP requests and also reduce bandwidth consumption. This can be done using htaccess by inserting the following code:

# Remove ETag
Header unset ETag
FileETag none

Flush the Buffer Early

This method helps reduce the page display time for a visitor by displaying other elements of the site in case the server is busy fulfilling other HTTP requests. data (you may have noticed this before and how long you wait :)). Fortunately in PHP there is a flush function which allows us to send parts of the html page to the visitor’s browser while the server or hosting server is busy making other requests

This method will also help us in parallel downloading files, which have an important role in displaying the page at the maximum speed for a visitor, and the best place to include this function between the end of the head tag and the beginning of the body tag, as in the following example in the header.php file for WordPress users:

… <!– css, js ->
</head>
<?php flush(); ?>
<body>
… <!– content ->

Post-load Components

I did not notice this method and did not try it before, but it seems that it has advantages, and I think that they talk about the method of displaying images and javascript files implicitly, as in the image inline method, and God knows, I may test it later

I took a look at the description of this tool YUI 2: ImageLoader, which uses  Lazy Loading , and Brother Abdul Rahman Al-Otaiba talked about it in an amazing and detailed article. This is a definition or introduction from the explanation of Brother Abdul-Rahman Al-Otaiba for this method:

Download Zombie expression or Lazy Loading is usually used in programming languages, and is called when an object or delay loading of an item until it needs. That is, it means that we do not load any objects or elements even if the program uses them at a later time, until we need or call them at that time, and then all the resources required for downloading and recalling are harnessed.

Lazy loading is used in several languages, but in this article, we will see how we can use it in JavaScript on a number of popular libraries YUI, jQuery, MooTools, and how it can benefit us.

Excerpted from: Project Blog

Post subject: Lazy loading in JavaScript

Reduce the Number of DOM Elements

Here we are talking about reducing the use of DOM elements. The important thing is that it is not difficult. If you check your site through yslow and find a reference in it to reducing the number of DOM elements, you only need to modify the template to reduce these elements. I will give you a simple example to understand this method

For example if you use:

<div id="nav">
<ul>
….
</ul>
</div>

Instead, use the following method to get rid of the div . tag

<ul id="nav">
….
</ul>

This way you will reduce the number of DOM elements

Split Components Across Domains

Dividing or separating the site elements into subdomains or other domains if you have $$$ allows you to increase parallel downloads better and faster, but make sure that you do not use more than 2-4 primary or subdomains because if you use more, you will run into the problem of DNS Lookup We have talked about it above

The important thing is to see how to use Cookie-free Domains for Components below. It is the same way to use subdomains to increase parallel downloads.

Minimize the Number of iframes

Here we talk about the lack of use of Iframes, as the latter allow full html pages in your pages. It is important to understand how Iframes work so that they can be used effectively.

<iframe>Positives :

  1. It helps to include external content such as advertisements and the Facebook box for websites
  2. Security sandbox (release it ;))
  3. Parallel downloading of scripts

<iframe>Negatives :

  1. Expensive even if empty
  2. It prevents the onload event on the pages
  3. Non-semantic (release it ;))

Use Cookie-free Domains for Components

When browsers request a static image and send cookies at the same time as HTTP requests, the server or server has no need or use for these cookies and so browsers create network traffic for no good reason. Here you should make sure that static files are requested with cookie-free requests. Just create a subdomain and host your static files in it

If your site domain is like www.exemple.com, you can put static files in a subdomain, for example static1.exemple.com, but if you set cookies for the top-level domain, for example, you use your site like this exemple.com without www. Here are the files The firmware from static1.exemple.com will be requested with cookies, meaning to no avail. In this case, you will have to reserve another domain and host the static files and set the cookies in it in a cookie-free way, such as the Yahoo website that hosted the images in a special tag yimg.com and ytimg.com And so on …

Another benefit of hosting static files in a subdomain is that some proxies may refuse to store items that are requested with cookies.With regard to booking another domain, you can exclude this method if you are a WordPress user. We can do it easily. I will discuss the hosting of static files in a separate and detailed explanation, God willing.

Choose <link> over @import

One of the previous best practices mentioned above is that CSS should be at the top of the page in order to allow the rendering process to progress incrementally.

In explorer browsers, it is @importused in the same way as placing <link> at the bottom of the page. This is not good because it must be used at the top of the page, so it is better not to use@import

Avoid Filters

Here, as stated in Yahoo’s tips, it is recommended to stay away from using Microsoft’s proprietary AlphaImageLoader Filter permanently because it causes an increase in memory consumption and also causes the browser to hang while the image is being loaded, so the problems of AlphaImageLoader Filter are multiple, as you can see, for this it is recommended to replace it with saving images in PNG8 format.

Optimize Images

Improving the size of the images is also important, so it must be dealt with seriously as well. I will not hate here the details that came on the Yahoo site because it is very tiring and may bored your life if you apply it. Fortunately, there is an add-on that helps in the process of improving images, which is  WP Smush.it. This add-on reduces the size of images as much as possible through the Smush.IT site, where the site compresses image files and makes their area as small as possible, thus reducing the time of their download significantly.

Optimize CSS Sprites

  1. Arrange images horizontally instead of vertically
  2. Combining similar colors in an image (sprit) helps you to have a low number of colors

Don’t Scale Images in HTML

Do not use images that are larger than you need because you can specify the width and height via html if you need to. Example

<img width="100" height="100" src="mycat.jpg" alt="My Cat" /> 

The important thing is to make the idea clear. For example, if you have an image of size 100x100px, do not use values ​​in width and height greater than 100px, for example, the image is 100px in height and 100px in width, and you use it like this:

<img width="500" height="500" src="mycat.jpg" alt="My Cat" /> 

Make favicon.ico Small and Cacheable

The icon of the site favicon.ico, as it was said on the Yahoo website, that it is an evil that must be present in the main folder of your site because the visitor’s browser always requests it and in the absence of it, it will be answered with an error 404, and the other problem lies in its presence also in the server because cookies are sent in every Once requested via HTTP, it also has downsides to serial downloading.

So, to mitigate the downsides of having a favicon, make sure:

  1. To be small in size and preferably less than 1K
  2. Give the icon an expiration date. Talk about it in a tip above

This is a tool suggested by the site to create this icon Imagemagick

Avoid Empty Image src

In this advice, Yahoo warns against using an image tag with an empty link. The way to insert images has two forms:

1 – Using a plain HTML tag:

<img src="">

2- Using JavaScript:

var img = new Image ();
img.src = "";

Both forms cause the same problem: HTTP requests are returned to your site’s server

  1. Internet Explorer makes a request to the folder that contains the page.
  2. Safari and Chrome make a request to the same page.
  3. Firefox 3 and the version before it have the same method as Safari and Chrome, but the new versions fixed this problem and no longer make these requests.
  4. Opera does not make any requests.

Why are these behaviors in browsers bad?

You are sending a large amount of unexpected traffic, especially pages that get many views, and this may lead to problems with your site’s server

The server gets lost due to the steps involved in executing the page creation instruction, which leads to the page not being displayed at the end (I understand something that tells me :))

Data may be lost. If you track orders, whether through cookies or another method.

In summary, you should avoid using empty image tags, as in the example above, and there are many ways on the Internet to avoid this problem.

Conclusion

These are just some tips, not all of them explicitly. They have a great impact on speeding up the site, and I hope you are not upset with me because I faced many difficulties in delivering this article to you as it should be. The first of these difficulties is that I do not know English and the second is in words that need lessons alone and it is difficult to translate them into Arabic

Leave a Comment