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?
- Load time of a Website is a major factor that affects usability and user behavior.
- Your visitors will be happier, and more engaged. Users are quickly frustrated by slow Websites.
- 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.
- 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.
- Website Speed and Performance
- Webpage Analyzer
- Google Page Speed – Mozilla Firefox plugin
- Yahoo! Yslow – Mozilla Firefox plugin
- 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.
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.
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:
Once you are done with your changes, upload the .htaccess to the root directory of your Website.
Did you know!
- You can significantly speed up a dynamic Website´s load time with caching.
- For a static Website, browsers cache the content on the client´s computer, in memory and on disk. Wikipedia…
- Caching a Dynamic Website. Does it Make a Difference for Loading Speed?
- Apache mod_expires Module
- How to Add Expired Headers
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.
- HTTP Compression. Does it Make a Difference for Website Speed?
- Speed Web Delivery With HTTP Compression
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
- 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.
- Always specify width and height within the
- Don´t let the browser resize images for you. Use a free photo editor to do that.
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.
- JPEG is good for images with lots of colors and details like photos.
- GIF is suitable for images with few colors. Use GIF for flat-tone colors.
- 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.
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
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.
- Cleaner code, where we separate content from presentation.
- By using external files, the data will be cached for future use.
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.
- Compress HTML Source Code
- CSS Compressor
- YUI Compressor
- Minify CSS
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.
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.
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.
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.
- Creating a Custom 404 Page for your Website
- 14 Best Free Web Validation Tools
- What Beautiful HTML Code Looks Like
- Clean CSS
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.
What other tips do you have to increase the Website´s load time? Please share them in the comments section.