By now, nearly everyone knows that you can’t have an effective site without speed. Web users have short attention spans and are generally not willing to wait for a bloated website to load. Take advantage of these tips, tools, and resources, and you’ll have a much better time capturing their attention.
Tips
Follow these tips to slim down and speed up your site.
- Remove anything that isn’t vitally important: Get rid of all of your “ego” elements that show off your design skills, and just keep the components that contribute to your site’s function.
- Cut down on HTTP requests: Reduce the time that users need to spend downloading components by cutting some out or combining them.
- Cut your page down: Keep your HTML and image size below 50kb for fast loading.
- Make use of thumbnails: Serve up images in a smaller size with thumbnails, which will allow the user to see a larger image if they’d like to.
- Spread your content around different locations: Use a content delivery network to cut down on response times due to a lack of close proximity to your web server.
- Remove comments from your HTML: HTML comments are useful, but if you’re going for speed they’re just not necessary.
- Reduce your images: Fewer images mean fewer HTTP requests, so use text instead of images whenever you can.
- Tell browsers how long your content can be cached: Use an Expires header to indicate that a specific component can be held in cache until a certain date, and repeat visitors will enjoy much faster load times.
- Compress your images: Always be sure to compress your images before saving, even images in Flash files.
- Compress components: Use the Gzip protocol to tell web servers to compress your site’s components for faster loading.
- Be careful with banner ads: Banner ads can add to your load time and cut down on the effectiveness of your site.
- Place stylesheets in your document HEAD: Put your stylesheets on top, and you’ll let your page render progressively, giving users visual feedback that the page is loading.
- Use CSS: If you’ve got your styles on an external .css file, they can be cached for faster loading.
- Move scripts to the bottom: With scripts, progressive rendering is blocked on all content below the script, so it’s best to leave them until the end so that all other page elements have a chance to load.
- Avoid nested or full page tables: Tables that are nested or take up a whole page will take longer for the browser to load while it works out the layout.
- Be careful with CSS expressions: If you use CSS expressions to dynamically set your properties, you may be asking browsers to evaluate expressions a number of times during any given browsing session. To cut down on this problem, you can either eliminate them, or just use one-time expressions.
- Choose the right image format: Use JPEGs for photographs and true-color, GIFs for flat-color images, and PNG when you need more color support than GIF.
- Fragment your pages: If you have a huge page full of content that could potentially be broken up, split them up into multiple short pages that will load faster.
- Move your JavaScript and CSS off-site: If you have your JavaScript and CSS inlined with your HTML, they’ll be downloaded every time a browser requests the HTML document, but if they come from outside, they’ll be cached, and thus load faster.
- Put a slash at the end of your links: Make it easy for the server to figure out that it’s loading a directory page, and it will load faster.
- Clean up your code: When using WYSIWYG editors, you’ll often find that it adds useless code, like empty tags. Get these out of your code, and you’ll move along faster.
- Cut down on DNS lookups: Every unique hostname on your page requires a DNS lookup, so be aware of how many different hostnames you have in your images, scripts, objects, and other components.
- Provide height and width tags: Using height and width tags will tell browsers where everything will end up, and can load components faster.
- Clean up your JavaScript: “Minify” your JavaScript code by cutting out unnecessary characters like space, newline, and tab, and you’ll improve your response time.
- Use the Photoshop “save for web” feature: By using this feature, you can reduce your image file sizes and shave seconds off your load time.
- Avoid redirects: Redirects will always slow down users because they have to wait for their browser to find a new page.
- Avoid JavaScript as much as possible: JavaScript adds HTTP requests and size to your site, so any time you can cut it out will help your performance.
- Cut out duplicate scripts: Although it doesn’t sound likely, this does happen. Check your code to make sure that you’re not asking browsers to download unnecessary script.
- Cut down on image colors: Your image filesizes will be smaller if you have fewer colors in them.
- Learn how to properly use ETags: Servers like Apache come with ETags, which when used correctly can be helpful for caching. But if they’re not configured properly, they’ll slow you down.
- Never use images to display text: Cutting down on images this way will reduce your HTTP requests and help you load faster.
Put these tools to work for testing and improving your site’s speed and performance.
- Web Page Analyzer: Use this analyzer to test out your speed and performance.
- Online Image Optimizer: This optimizer will quickly and easily compress your image files.
- Akamai: Akamai offers a number of speedy solutions, specifically content delivery networks.
- HTML-Optimizer: This tool will clean up your HTML and script code of dangling tags, missing attributes and broken links.
- JSMin: JSMin promises to remove comments and unnecessary whitespace from JavaScript files so they’ll load faster. Generally, this tool can reduce your filesize by half.
- PageTest: Find out how your page downloads in various speeds from Dulles, Virginia, using this tool.
- CSS Tweak: With CSS Tweak, you can optimize your style sheets for better performance.
- JPEG Compression Wizard: Shrink your images without damage using this free service.
- ShrinkSafe: This Dojo compressor will reduce your filesize using obfuscation, which converts code into more compact, smaller strings.
- Tracert: With Tracert, you can monitor your site’s performance on speed, DNS, and traceroutes.
- mod_gzip: With this tool, you can serve compressed content on an Apache webserver.
- CleanCSS: This tool will merge similar selectors, get rid of properties you don’t need, and remove whitespace.
Check out these articles to get great ideas and guidance for improving performance on your site.
- Best Practices for Speeding Up Your Web Site: Take some advice from Yahoo! and learn how to increase your site’s speed.
- Speed Up Your Web Site Load Time: This article offers formatting tips that will increase your site’s performance.
- Need Web Site Speed?: Edward Tsai offers lots of suggestions for services, products, and strategies that will get your site moving.
- 5 Ways to Speed Up Your Site: Paul Stamatiou offers the methods he used to cut down his bloated webpage to that of 34kb.
- Improve Your Homepage Performance Significantly: Take these tips into consideration when evaluating your homepage’s performance.
- Speeding Up Your Web Page: About.com delivers a number of useful tips for tweaking your site’s speed.
- The Cost of Banner Advertising on Web Performance: Consider how serving advertising can slow down your site and affect the way users view your site.
- 6 Ways to Speed Up Your Site: Follow this article’s tips to get your site loading faster.
- How to Speed Up Your Webstite: This article offers almost 50 different strategies for reducing your site’s load time.
- Speed Up Your Site: Web Site Optimization: Jennifer Alvin has lots of great tips for “bandwidth thriftiness.”
No comments:
Post a Comment