Friday, March 29, 2024

7 Tips to Make Your Websites Load Faster

One of the most important considerations of building websites is to make sure they load quickly. Before you begin to optimize your site(s), it´s important to see how well they are functioning, first. One way to do this is to make use of the Make the Web Faster tools, by Google. Two other options you can use are Pingdom and YSlow. Each of these tools will help you to establish a baseline of performance.

 

After that, you can use these tools to increase page loading times. Below are some screen shots which show what happens when each one of these tools is used. For these tests I´m using a personal site: HowToEndYourSuffering.com. This site is using a professional Genesis theme.

 

Google PageSpeed Insights shows results for mobile and desktop along with a list of items to fix and how to fix them.

 

Site results from Pingdom

 

On the bottom half of this page is the results from Yslow along with suggestions for improvement.

Based on what these tools can offer, here are 7 tips to make your websites load faster:

1.      Minify HTML, CSS and JavaScript: To do so, remove all unnecessary comments, white space and code. This will improve performance because the file size will be reduced. To minify HTML, check out HTML Compress. For JavaScript, use YUI Compressor, and for CSS, test out CSS Compressor. A fourth option is to make use of the PageSpeed Insights Chrome Extension to create an optimized version of your HTML code. The PageSpeed Insights page also lists other programs you can use.

 

2.      Make CSS and JavaScript External: Using external files will generally make the pages load faster because JavaScript and CSS files are cached by the browser.

 

Alternatively, if you use CSS in a web page, place the CSS in the HEAD element. This makes the page appear load faster and it can do so progressively. With JavaScript, move the scripts to the bottom of the page.

 

3.      Eliminate Duplicate Scripts in a Web Page: This issue might seem strange but it is actually quite common. Duplicate JavaScript and CSS files degrade performance by creating unnecessary HTTP requests and wasted JavaScript execution. It´s also important to check and see if scripts have been duplicated in external files, as well. To avoid this problem is to use a script management module with your templates.

 

Here is the code for both JavaScript and PHP.

 

4.      Optimize Images: Reduce image sizes using either GIF, PNG-8. or JPEG as the file formats. Make sure the size matches your usage and set the size for each page with the height and width. Do not make use of scaling, especially from larger to smaller images. The image result might look fine on screen but the file size will be the same. To truly take advantage of the smaller dimensions, use an image editing program and scale the image accordingly. The resulting file size will be smaller. It´s also important to experiment with compression for with all of these file formats. At some point you will obtain an acceptable compression with a minimum loss of quality. Experimentation is key.

 

5.      Use GZIP compression: If your hosting company uses GZIP compression and deflation these can make a significant difference and speed up your site. It´s possible to reduce file sizes by 70% without losing image quality or video size. To see if your site uses GZIP already, here´s a test you can use.

 

 

Enter your site URL to run the test.

 

 

Here are the results. Among other things, the test indicates that the page is compressed and that GZIP is being used.

 

6.      Avoid CSS Expressions: CSS expressions (introduced in IE5) allow you to set CSS properties dynamically. The down side is that the expressions are evaluated whenever the page is rendered, resized, scrolled and when the user moves the mouse over the page. These ongoing (and frequent) evaluations erode the user experience.

 

7.      Add Expires Headers: Due to web page complexity, many HTTP requests could be required to load all of the components. When you use Expires headers those components can be cached and this avoids unnecessary HTTP requests on successive page views. While Expires headers are most commonly associated with images, they can also be used for scripts, style sheets, and Flash.

Conclusion

As you can see, there are many things you can do to improve the performance of your web pages. Some solutions might be simple, while others can be time-intensive. Still, implementing them is important. If your pages don´t load fast enough you run the risk of losing your audience – and no one wants that.

References

Make the Web Faster

Pingdom

YSlow

How to Make Your Site Insanely Fast

Speed is a Killer

 

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured