18+ Essential Tips to Dramatically Improve Website Speed

Why is my Website slow? is a popular question and is a vital issue. A good Website should never compromise on the user´s experience. If your Website is slow, people will leave. Internet users hate to wait for slow loading Web pages. Who likes to browse through a sluggish slow loading Website? Most visitors would leave the Website, unless the the content is interesting. Moreover Google uses Website speed as a ranking factor in their search algorithm. Many web developers do not think of optimizing their Websites for speed.

Why Website Download Speed is Important?

  1. Load time of a Website is a major factor that affects usability and user behavior.
  2. Your visitors will be happier, and more engaged. Users are quickly frustrated by slow Websites.
  3. The faster you serve content to your visitors, the faster they will be off your servers, leaving you free to serve others. In this case you can handle larger traffic with same hardware.
  4. Your Website´s loading speed is also a factor used by Google´s ranking algorithm. The reasoning according to the official Google Webmaster Central Blog, is to provide the most relevant search results from Websites that offer the best user experience. Website speed is something that we cannot ignore.

Tools that Determine Website Speed

Run some of these tools prior to applying any of the speed/performance tips so that you have a baseline metrics.

  1. http://gtmetrix.com/
  2. Webpage Analyzer
  3. Google Page Speed – Mozilla Firefox plugin
  4. Yahoo! Yslow – Mozilla Firefox plugin
  5. Best Free Online Tools to Measure Website Speed

How can you make your Website load faster? If you implement some of the tips outlined below, you will notice a dramatic improvement to your Website’s performance. Here are the tips.

Tip1. Choose a Good Web Host. Get A Fast Web Server

This might seems obvious, but whatever you do to make your Website load faster, if it is served slow, then there is nothing you can do. Regardless how optimized your Website is, hosting your Website on slow servers can drastically reduce your Website´s loading speed. If you have a Website with few visitors then shared hosting is fine. If your Website is already popular, a dedicated server will be the best option. Remember though, the first step towards a fast Website is the hosting company that you choose.

Reference:

  • Virtual Private Server

Tip2. Use a CDN

This tip is especially important for high trafficked Websites. A CDN is a network of optimized servers around the world that work by caching your content, so that static pages of your Website are more rapidly accessible to your visitors. This works well if you have visitors from all over the world as the servers closest to them are used to quickly deliver the content.

References:

  • CDN
  • http://www.maxcdn.com/
  • Amazon CloudFront

Tip3. Add Expires Header. Cache Dynamic Pages

Add Expires header to static content. For a first time visitor to your Website many HTTP requests are made. By adding Expires header you can make all these files cacheable. Using Expires Header for static content will make less HTTP requests and thus improving the experience of returning users to your Website. In this case, we don´t require browsers to fetch another copy of static files every time. With browser caching, we’re explicitly instructing browsers to hang onto particular files for a specified period of time. When the file is needed again, the browser pulls it from local cache instead of requesting it from the server again.

The .htaccess is the Apache´s directory-level configuration invisible file that allows you to manipulate the behavior of the Web server.

The .htaccess can contain all kinds of directives for the Apache server. To create an .htaccess file, open any text editor like Notepad or Notepad++, name it .htaccess (there is no extension).

If you already have an .htaccess file on your server, download it to your computer and edit it with your favorite text editor.

Now open or create your .htaccess file and type the following code for an Apache Web Server:

<IfModule mod_expires.c>
#Enable expirations
ExpiresActive On
 
#HTML, CSS and JavaScript documents are good for a week 
#from the time they were changed
ExpiresByType text/html M604800
ExpiresByType text/css M604800
ExpiresByType application/x-javascript M604800
 
#Expire images and favorite icon after a month in the client's 
#cache. 2592000 equals the number of seconds in 30 days.
ExpiresByType image/bmp A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/x-icon A2592000  
</IfModule>

Once you are done with your changes, upload the .htaccess to the root directory of your Website.

Did you know!

  1. You can significantly speed up a dynamic Website´s load time with caching.
  2. For a static Website, browserscachethe content on the client´s computer, in memory and on disk. Wikipedia…

References:

Tip4. Use HTTP Compression

HTTP Compression saves bandwidth usage and may speed up your Website´s loading time by reducing the amount of data sent. The user requests a Web page, then the server compresses the page and transfers it to the user´s browser. On the user´s side, the file is being decompressed and visualized.

References:

If you read my previous post listed above, this tip might or might not help in improving your Website´s loading speed.

Tip5. Optimize Your Images

  1. Compress your images as much as possible. PNG and JPEG images are great; however, they contain a lot of extra information, that are not needed for the Web.
  2. Always specify width and height within the img tag.
  3. Don´t let the browser resize images for you. Use a free photo editor to do that.

References:

Tip6. Use the Appropriate Image Format

Know when To use JPEG, GIF and PNG images. You can expect a sizable difference in image size when you use the correct type.

  1. JPEG is good for images with lots of colors and details like photos.
  2. GIF is suitable for images with few colors. Use GIF for flat-tone colors.
  3. PNG was created to replace GIF as an image-file format. It is especially useful when you need quality transparent images. Don’t forget that IE6 has problems with displaying transparent PNG images, but fortunately there is a solution.

References:

  • Image File Formats
  • JPEG
  • GIF
  • PNG

Tip7. Keep Things Simple. Be a Minimalist

Remove Slow Loading Elements: Take a hard look at the load times, of those buttons, badges, advertisements and other features in your Website that don´t add much value. On most Websites, these account for very little traffic and can be removed.

Reduce the Use of External Services: Try to minimize relying on external services. A service such as Google Analytics is useful for traffic statistics. However, having too many scripts installed from different providers can significantly increase the loading time of your Website because they are being called from external sources. Remove elements you don´t really need and keep things simple. The key point here is to eliminate everything that’s unnecessary.

Tip8. Minimize the Number of HTTP Requests

When someone visits your Website, the corresponding files must be sent to that person’s browser. This includes CSS files, Javascript library references, and images. Limit the number of files required to display your Website. There is an inherent overhead in each HTTP request.

Reducing the number of files in the Website reduces the number of HTTP requests the browser has to make to the server, thus reducing load time.

Tip9. Put JavaScript & CSS in External Files

In general, all your CSS and Javascript code should not be part of the HTML page, but placed in their own external files. If you only have a few basic CSS styles, an exception can be made. Why should we do this?

  1. Cleaner code, where we separate content from presentation.
  2. By using external files, the data will be cached for future use.

Tip10. Merge CSS & JavaScript Files

Try merging JavaScript files to prevent multiple includes and thus multiple HTTP requests. Do the same for CSS files. Remember that the more resources that the browser has to download, the longer it will take your Website to load.

Tip11. Minify/Compress HTML, CSS, and Javascript

Minification, a lossy form of compression, is removing unnecessary characters from the code to reduce its size. When the code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab), and to the extreme shortening function and variable names. In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced. The objective of minification is to keep files as lightweight as possible. After minification the code becomes harder to read by humans but for rendering it does not matter.

Same applies to the HTML source code. Use HTML minimization tools to remove unnecessary characters. Before using Minification make sure to backup the original files for future editing and debugging.

References:

  • Javascript Compressor
  • CSS Compressor
  • YUI Compressor
  • Minify CSS
  • Minify Javascript

Tip12. Put CSS at the Top

Allow progressive rendering by loading CSS files at the top of the Web page, within the <head> section. The sooner the CSS file is loaded the better. This will make sure that styling for the Website is rendered before anything else. We never want to display unstyled content to visitors not even for a second.

Tip13. Put JavaScript at the Bottom

Contrary to the above, allow progressive rendering by putting JavaScript at the bottom of the page just before the closing </body> tag. If you must place JavaScript in your head tag, make sure to place it under your style sheets, that way the Website will still render relatively quick.

How does this help? Most current browsers can download a maximum of two components in parallel for each domain. But, when downloading JavaScript, no other downloads can occur until the script is loaded. When the browser encounters JavaScript files in the Web document, it starts downloading it and halts other resources. So, it is important to put all of your JavaScript code at the bottom of page except when JavaScript is needed to properly render the Web page.

Tip14. Use & Optimize CSS Sprites

CSS sprites combine your background images into a single image. It is the preferred method for reducing the number of image requests and thus a reduction of HTTP requests. The objective of CSS sprites is to serve one optimized image instead of several.

Not only I encourage you to use CSS sprites, but Yahoo! in performance rule 30 listed several tips about optimizing sprites.

References:

  • CSS Sprites
  • CSS Sprites Generator

Tip15. Avoid Using @import

If you are using @import to reference style sheets, then stop using it. In Internet Explorer, @import is the same as using <link> at the bottom and thus preventing progressive rendering of the page. Always use <link> to reference style sheets.

Reference:

  • Do not use @import

Tip16. Avoid CSS Expressions

CSS expressions are a powerful way to set CSS properties dynamically. But they are highly inefficient in the way they are evaluated by the browser. Browsers evaluate CSS Expressions on page load, page scroll and each time the mouse is moved. A single CSS expression on a standard Web page can be evaluated hundreds of times.

You don´t know what CSS expressions are? Good, don´t use them.

Tip17. Keep Components Under 25 KB

This tip is especially important for mobile phones. The 25 KB is the uncompressed size of the component, this is where minification is important because HTTP compression alone may not be sufficient as transferred files are decompressed before they are cached.

Tip18. Other Quick Suggestions

If you are a hand-coder, make sure that you write semantic, efficient, valid and accessible code.

Avoid 404 Errors: 404 Not Found errors are an overhead for the server and the browser. Make sure that you test your Website for any broken links.

Always use favicon.ico: The favicon.ico is a small image that stays in the root of your server. This image is necessary since the browser will request it regardless, so it is better to have one so the browser will not respond with a 404 Not Found.

Don´t use iframes: At least minimize their use.

Avoid images with empty string src attribute: The <img src=“” /> is another expensive HTTP request.

Add a slash at the end of links pointing to a directory: You should always include the final slash (/) on URLs pointing to a directory (not a file). If you don´t include the slash, the server first will search for a file, and when not found it will search for a directory. Also, some servers are not forgiving, they will simply treat it as file, in which case they respond with a 404 Page Not Found error.

Avoid Flash content: It is better to avoid or at least minimize Flash content within your Website. It takes longer to load flash. Expect some visitors on slower or mobile broadband to leave.

References:

Conclusion

There is nothing better than a fast loading Website with great content. Use the tips above to significantly improve the experience for your Website´s visitors while achieving better authority with google. The benefits are many: happier users, increased serving capacity, and lower bandwidth cost.

You may also like...