Knowledgebase:
Issue with the Website Page Speed
Posted by Ryan Mendonca on 30 September 2019 04:56:19 PM

We often get connects where a client complains that the website content uploaded on the server is loading slowly or taking a long time to load.

In order to begin with the troubleshooting, we need to make sure that the domain is resolving to our Hosting architecture by checking the DNS records and also check for the load on the server or any services issue by checking https://sentinel.india.endurance.com

The next step is to try resolving the domain via Online Performance analyzer web tools like https://gtmetrix.com/. These tools provide a list of details which needs to be incorporated to fix the load time.

The most common reason for slow resolution of the web content and the solution is mentioned below:

I. Time to First Byte (TTFB) 

Time to First Byte (TTFB) is the total amount of time spent to receive the first byte of the response once it has been requested. It is the sum of "Redirect duration" + "Connection duration" + "Backend duration". This metric is one of the key indicators of web performance. 

The ideal Time to First Byte (TTFB) for a static website is 100ms and for a dynamic website is 200-500ms.

Some ways to improve the TTFB include: optimizing application code, implementing caching, fine-tuning your web server configuration.


II. Enable Gzip Compression

When a user hits your website a call is made to your server to deliver the requested files. The bigger these files are the longer it's going to take for them to get to your browser and appear on the screen. Gzip compresses your webpages and style sheets before sending them over to the browser. It locates similar strings within a text file and replaces those strings temporarily to make the overall file size smaller. 

Gzip works well in a web environment because CSS files and HTML files use a lot of repeated text and have loads of whitespace. Since it compresses common strings, this can reduce the size of pages and style sheets by up to 70%. 

You can enable the Gzip compression by adding the code mentioned below in the .htaccess file:
https://support-tools.com/?734b11deb609e98a#0jbEob4/9bCypx3vR8mwrsNxYK+wg67U1SwzhrNGg8E=


III. Minify CSS

A Web application code developed with reference to a lot of external CSS code can drastically increase the Load time. Please note that the web developer can use inline CSS in the web code for important pages rather than referencing another CSS file which increases the load time. 

Combining the CSS file can save many bytes of data and speed up downloading, parsing, and execution time.


IV. Defer parsing of JavaScript and Minify JavaScript

In order to load a page, the browser must parse the contents of all <script> tags, which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, and deferring parsing of unneeded JavaScript until it needs to be executed, you can reduce the initial load time of your page.

You can also combine multiple Javascript files as it will also help in saving many bytes of data and speed up downloading, parsing, and execution time.


V. Minify HTML

Minifying HTML has the same benefits as those for minifying CSS and JS: reducing network latency, enhancing compression, and faster browser loading and execution. 

As mentioned in previous pointers, using an inline JavaScript and CSS within the HTML code, can save many bytes of data and speed up downloading, parsing, and execution time.


VI. Leverage browser caching

Every time a browser loads a webpage it has to download all the web files to properly display the page. This includes all the HTML, CSS, JavaScript and images. Browser caching can help by storing some of these files locally in the user's browser. It works by marking certain pages, or parts of pages, as being needed to be updated at different intervals.

To enable browser caching you need to edit your HTTP headers to set expiry times for certain types of files. You need to add the expiry time for the code in the .htaccess file. You may refer to the expiry code to be added in the .htaccess file as mentioned in the link below:
https://privatebin.support-tools.com/?2c9b5c3593aaab52#n5AN7xRDO3GOlak5YtDIUeid9xm5AlLT/R/gOSIKNS8=


VII. Serve scaled and optimized images

Serving appropriately-sized images can save many bytes of data and improve the performance of your webpage, especially on low-powered (eg. mobile) devices.

The images you create in programs like Photoshop and Illustrator look amazing but often the file sizes are very large. This is because the images are made in a format which makes them easier to manipulate in different ways. With file sizes upwards of a couple of megabytes per image, if you put these files on your website it would be very slow to load.

In simple terms, optimizing your image works by removing all the unnecessary data that is saved within the image to reduce the file size of the image based on where it is being used in your website. Optimizing images for the web can reduce your total page load size by up to 80%.

Here are the most common ways to optimize your images for the web.

  1. Reduce the white space around images - some developers use whitespace for padding which is a big no-no. Crop your images to remove any whitespace around the image and use CSS to provide padding.
  2. Use proper file formats. If you have icons, bullets or any graphics that don't have too many colours use a format such as GIF and save the file with lower amounts of colors. If you have more detailed graphics then use JPG file format to save your images and reduce the quality.
  3. Save your images in the proper dimensions. If you are having to use HTML or CSS to resize your images, stop right there. Save the image in the desired size to reduce the file size.
(0 vote(s))
Helpful
Not helpful

Comments (0)