17 Ways to Speed Up Your Web Site in 2020

March 19, 2020

Your page speed shows the performance of your website which is measured by page load time. Page load time is the time between when a user request a page and the moment the page is fully rendered by the browser. Here we have covered some best practices for web performance including transmitting HTTP requests, resolving DNS Lookups, downloading components or resources, fetching resources from cache, etc. Our expert development team has identified a number of best practices for making web pages fast. The list includes some best practices with 5 categories.

1. Make fewer HTTP Request

Whenever you create a webpage, several components are used in it like CSS, Javascript, Images, Flash, etc. When you type a request in your browser for a web page, it requires all the components to load a page. For each component, the HTTP request sends to the server. Reducing the number of HTTP requests is possible if we reduce the number of components and we can increase the response time of a web page. This is the key to faster pages.

Here are the techniques to reduce the number of HTTP request and improves the response time:

Combined Files: A large number of components will cause a large number of requests. Combine all the files to a single file whether it’s script or style.

CSS Sprites: We use lots of background images on a web page. CSS sprites is a method which is used to minimize the image HTTP request. Combine all the images in a single image and use the background-image and position to display the desired image.

2. Use CDN(Client Delivery Network)

CDN stands for client delivery network. Basically it is a network of optimized web servers distributed on different geographical locations to deliver content more efficiently to users. CDN will deliver you the content from the nearest server and increase your website performance by 20% or more.
Some of the large companies use their own CDN, but it’s cost-effective to use a CDN service provider.

3. Add an Expires or a Cache-Control Header

Web pages are made attractive and beautiful today by using more scripts, images, and CSS. If there is more number of components there will be more number of HTTP requests. Visitor’s first-time visit to your page may have to make several HTTP requests. But we can make these components cacheable by using two aspects:

– Static Components: Use “Never expire” policy by setting far future Expires Header
– Dynamic Components: Use the Cache-Control Header for conditional requests.

Browsers stores your components in their cache to reduce the number and size of HTTP Requests which loads web page faster. You can set far future Expires header according to your requirements.
Note: There is some drawback to using far future Expires header. If a filename is image.jpg and you want to change this file by other files. Don’t upload the file by using the same filename, you have to change this filename like image1.jpg and upload it to the server.

4. Gzip Components

Gzip is a compression software used to compress the HTML files. It was developed by the GNU project and standardized by RFC 1952. It’s also good to gzip your style and scripts also. It’s also worthwhile to compress any text response JSON and XML.
Gzip reduces the response size by about 70%. If you use Apache, then it depends upon the version: Apache 2.x uses mod_deflate and Apache 1.3 uses mod_gzip.

5. Put Stylesheets at the top

Putting stylesheets in the HEAD allows the page to render progressively. Browsers block rendering a web page until all external stylesheets have been downloaded. By using Inline Style (start with ) can cause reflows and shifting of content.
By putting Stylesheets at the bottom of the document is that it blocks or prohibits progressive rendering in many browsers, including IE(Internet Explorer) that might cause viewing a blank page.

Recommendations
As per HTML 5.2 Specification. Always use external stylesheets in the head(<head>) section by using a link(<link>) tag instead of @import. Also, try to use stylesheet in the correct order with respect to scripts.
Put inline style<style> blocks in the <head> section.

6. Put Scripts at the Bottom

A browser can load all functionality-related files after our content is loaded.

Our main target to deliver the content to visitors as fast as possible by using these following priorities:

Deliver content to visitors as soon as possible.
Don’t allow unformatted or unstyled content to appear in the browser(always put CSS in)
Load the event generated files(tabbed widgets, API files) in the last.

7. Avoid CSS Expressions

CSS Expressions used to set CSS properties dynamically which accepts a javascript method. CSS expression is supported in Internet Explorer starting with version 5 but ignored by the IE8 and most of the browsers.

background-color: expression( (new Date()).getHours()%2 ? “#A5327F” : “#O4567F” );

Expressions are evaluated more frequently, they are evaluated when the page is rendered and resized, but also when the page is scrolled and even when the user moves the mouse over the page. the number of evaluations could affect the performance of your page.

8. Use Javascript and CSS External

Why we use javascript and CSS as an external file for a web page? Which increase the number of HTTP request. Using external files generally produces faster pages because the javascript and CSS files are cacheable by the browser. JS and CSS that are inlined in an HTML document get downloaded every time when the HTML document is requested. It decreases the number of HTTP requests but increases the size of the HTML document. The HTML documents are not cached by the browser. So always try to make javascript and CSS external.

9. Reduce DNS Lookups

The Internet is based on finding services through IP addresses. Because the IP address is not easy to remember, URLs contain hostnames instead. But the IP address is necessary for the browser to make its request.
DNS takes 20-120 milliseconds for the browser to look up the IP address for a given hostname. Everything can’ be downloaded by the browser unless the DNS lookup is completed.

DNS lookups are cached for better performance. This caching can occur on a special caching server maintained by the user’s ISP or local area network, but there is also caching that occurs on the individual user’s computer. The operating system has a cache that contains the DNS information. All browser has their own cache separated from OS cache. Whenever the browser keeps the DNS record, it doesn’t bother the operating system with a request for the record.

When the DNS is empty form OS and Browsers, the number of DNS lookups is equal to the number of unique hostnames on a web page. By reducing the number of hostnames we can reduce the number of DNS lookups.

As we know reducing the number of unique hostnames has the potential to reduce the amount of parallel downloading on a page. Avoiding DNS lookups cuts response but reduce the parallel downloads which may increase the response time. I would suggest to you that split these components across at least two but not more than four.

10. Minify Javascript and CSS

Javascript and CSS can be minified by removing unnecessary characters and whitespaces from code to reduce its size thereby improving load time. Several tools are available in the market to minimize the code like JSMin and YUI Compressors. YUI compressor can also minify CSS.

11. Avoid Redirects

Redirects are done by using 301 and 302 status codes. Here is an example of the HTTP

Headers:

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

The browser will redirect the user to the URL specified in the location field. Redirects slow down the user experience. By using redirect between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived.

12. Configure Etags

Etags or Entity tags are a part of HTTP or we can say a mechanism that web servers and browsers use to determine whether the component present in browser’s cache matches the one on the origin server.
An entity is mainly used for the “components”: images, scripts, stylesheets, etc. Etag is a string that uniquely identifies a specific version of the component.

The origin server specifies the component’s ETag using the ETag response header.

HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c12bc-4ab-257e1c1f"
Content-Length: 12495

13. Flush the Buffer Early

Flush is a function that allows you to send your partially ready HTML response to the browser so that the browser can start fetching components while your backend is busy with the rest of the HTML page.
A good place to consider flushing is just after the HEAD tag.

Example:

... <!-- css, js -->
<!--?php flush(); ?-->
... <!-- content -->

14. Make Ajax Cacheable

Ajax(Asynchronous Javascript and XML): one of the benefits is that it provides instantaneous feedback to the user because it requests information asynchronously from the backend web server. Google suggest and Google Maps as examples of web interfaces where things are done instantly.
Using Ajax is no guarantee that the user won’t be twiddling his thumbs waiting for those “asynchronous javascript and XML” responses to return. In a web-based email client, the user waits for the result of an Ajax request to find all the email messages that match your search criteria.
To improve web performance, ajax optimization is important. The most important way is to make ajax responses cacheable using Add an Expires or Cache-Control Header.

We can also apply these rules to ajax:

  • Gzip Components
  • Reduce DNS Lookups
  • Minify Javascript
  • Configure ETags

15. Use GET for AJAX Requests

When we use XMLHttpRequest, POST method is used as a two-step process: which sends headers first and then sends data. We use GET method instead of POST which takes one TCP packet to send. We can’t send data more than 2K because the maximum URL length is 2K.

16. Remove Duplicate Scripts

There are two ways that duplicate scripts hurt performance: Unnecessary HTTP requests and wasted JavaScript execution. A review of the 10 top U.S. web sites shows that two of them contain duplicate scripts.
Unnecessary HTTP requests happen in IE but not in Firefox. In IE, if an external script is included twice and is not cacheable, it generates two HTTP requests during page loading. Even if the script is cacheable extra HTTP requests occur when the user reloads the page. With these HTTP request time is also wasted evaluating the script multiple times. This will happen in all browsers whether the script is cacheable or not.

17. Split Components Across Domains

We use several components for a web page like javascript, images, stylesheets, etc. We can split these components into different hostname to maximize parallel downloads. Don’t use more than 2-4 domains because of the domain lookup penalty. For example, you can host your HTML and dynamic content on www.appstarsolution.com and split static components between static1.appstarsolution.com and static2.appstarsolution.com.

 

Some Of The Other Factors That Might Help With Website Performance:-
  • Keep Components Under 25K: Some of the devices like the iPhone won’t cache components bigger than 25k. So make your component size less than 25k.
  • Avoid Empty Image src : We use <img src=””> in HTML. Which sends the unnecessary request to your server and increase the number of the HTTP request.
  • Minimize the number of iframes
  • No 404s: Always avoid broken links that cause 404s.
  • Minimize DOM Access: Using DOM elements with javascript makes website performance slow.
  • Choose “link” over @import: It’s best to use over @import
  • Optimize Images: Always try to use optimized images for a web page and keeps their sizes small.
  • Don’t Scale Images in HTML: Don’t use width and height properties for an image to resize the image. Like
  • Make favicon.ico Small and cacheable