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
- 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
- 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.
- 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
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!
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:
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
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" );
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)
There is a WordPress plugin that does this and more than that as well. We will discuss it later, God willing, in detail
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
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 ->
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.
Excerpted from: Project Blog
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.
- It helps to include external content such as advertisements and the Facebook box for websites
- Security sandbox (release it ;))
- Parallel downloading of scripts
- Expensive even if empty
- It prevents the onload event on the pages
- 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
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.
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
- Arrange images horizontally instead of vertically
- 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
So, to mitigate the downsides of having a favicon, make sure:
- To be small in size and preferably less than 1K
- 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:
var img = new Image (); img.src = "";
Both forms cause the same problem: HTTP requests are returned to your site’s server
- Internet Explorer makes a request to the folder that contains the page.
- Safari and Chrome make a request to the same page.
- 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.
- 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.
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