Speeding Up A Website
Web performance from the users/visitor’s point of view is measured as the loading time of websites. This is the lapsed time when the users request a page and the moment the page finishes rendering itself. A fast website process this smoothly and progressively. The website gives the user visual feedback that the page is leading and gives the users the information they requested as soon as it is available. There are several additional best practices that you can apply to optimize progressive rendering for most pages. First, a fast page should render the content visible to the user and render the off-screen content later. Second, a fast page might also load and render the lightweight resources such as text before loading and rendering heavyweight resources like images and video. On the other hand, some techniques are known to inhibit progressive rendering. The use of large tables, even for layout, disables progressive rendering in some browsers. Applying style sheets late in the document, even if those style sheets aren’t needed for the initial page load, can also prevent progressive rendering.
Everybody hates those loading times when opening a website. And with Google using the loading speed of a website as a factor to decide the website's rank, it is high time for webmasters to get serious about optimizing their websites for speedy access.
High-performance websites lead to higher visitor engagement, retention, and conversions
High-performance websites lead to higher visitor engagement, retention, and conversions. Web application performance is affected by many factors, including the size of request and response data, the speed of the database, how many requests the server can queue and how quickly it can serve them, and even the efficiency of any client script we might be using. If performance is critical in an application, or if testing or experience shows that application performance is not satisfying, we should follow normal protocol for performance tuning. Measure to determine where performance bottlenecks are occurring, and then address the places that will have the greatest impact on general application performance.
The solution to improve website performance
The website performance depends on various factors such as the content on your pages, browsers, location of access, etc. It is often possible to make the contents of a web page take fewer bytes without changing the appearance or function of the page. Reducing the number of bytes a client must download makes the page load faster. There are many ways to make websites run faster.
Reducing the file size of HTML documents, a clear way to improve your site's load time is to decrease the file size of your HTML documents. There are several ways to do this, from compression to set ID and class name changes.
Properly including stylesheets and scripts. Typical web pages speed a lot of time of their loading time waiting for the network. A powerful technique to reduce the amount of time spent blocked on the network is to get rid of patterns that cause some browsers to serialize resource downloads.
Combine external JavaScript files
Combine external JavaScript files, downloading an external script file is unique because it causes popular browsers to block subsequent downloads until the script has been completed. This is in stark contrast to downloading images that may occur in parallel.
Include external CSS files before external JavaScript file
Include external CSS files before external JavaScript files while script file block sub-downloads, those already in progress will remain to download. If you have an external script and CSS files, always include the CSS file before the script downloads in parallel.
Do not include inline JavaScript between external CSS and other resources
Do not include inline JavaScript between external CSS and other resources. Inline script tags, even though subsequent resources from downloading in parallel with a CSS file. So, if you have an external CSS file, be sure not to insert inline script tags between your CSS file and the next downloadable resource.
Compress images
Image files are often created with extra information embedded in the file. For example, JPEG files written by many image programs include the name of the program that wrote them. PNG images can often be made smaller by changing the way the image is encoded. These transformations are lossless. That is, the compressed image looks identical to the uncompressed image but uses fewer bytes.
Minify JavaScript
Removing comments and white space from large JavaScript files can make them substantially smaller without changing their functionality.
Remove unused CSS
CSS files contain rules that apply style attributes to elements in a web page. If a rule does not apply to any element in a page, removing it will result in fewer bytes being sent to the client, with no change in the website's appearance. However, the external style sheet may be included on more than one page. You must be careful only to remove rules that no page uses.
HTTP caching
When you set the correct HTTP caching headers, you get a double win because revisits to your web pages load faster, and there is less load on your web server.
The cache, which is local copies of resources, works because many resources change infrequently. When a browser can reuse a local copy, it saves the time to set up a connection and download it. The key to making the cache work effectively is HTTP caching headers, sent by the webserver to specify how long a resource is valid and when it last changed.
The HTTP protocol gives two ways to define how long a resource is valid: the expires header and the cache-control: max-age header. The expires header specifies a date after which a resource again. Max-age works much the same way, but it specifies how long a resource is downloaded instead of giving a specific date. That is nice because you can configure your web server with a constant value.
Minimizing browser reflow
Minimizing browsers reflow, reflow is the name the web browser press for re-calculating the positions and geometries of elements in the document for re-rendering part or all the document. Because reflow is a user-blocking operation in the browser, it is useful for developers to understand how to improve reflow time and understand the effects of various document properties on reflow time. Sometimes reflowing a single element in the document may require reflowing its parent elements and any elements that follow it.
The best practices cover many of the steps involved in page load time, including resolving DNS names, setting up a TCP connection, transmitting HTTP requests, downloading resources, fetching resources from cache, parsing and executing scripts, and rendering objects on the page. Essentially page speed evaluates how well your pages either eliminate these steps, parallelize them, and shorten the time they take to complete. The best practices are grouped into six categories that cover different aspects of page load optimization.
Within the last five years, the size of the average web page has more than tripled, and the number of external objects has nearly doubled. While broadband users have experienced faster load times, narrowband users have been left behind. With the average web page sporting more than 50 external objects, object overhead now dominates most web page delays. Minimizing HTTP requests by using CSS sprites, combining JavaScript or CSS files, reducing the number of Eos, and converting graphic effects to CSS while still retaining attractiveness, has become the most important skill set for web performance optimizers.
The key thing to remember is that website traffic and retention increase if a website has been optimized for performance.
