|
Seo Master present to you:
Place JavaScript files at the end of your document JavaScript files load differently than other HTML elements. While a normal HTML element is loading, the rest of the page continues to download. On the other hand, a JavaScript element must fully load before the rest of the page can continue. In order to counter this problem, place JavaScript files at the end of a document. This ensures that the main content of a page has a low loading time. Reduce HTTP Requests Having over 5 JavaScript and CSS files that are referenced to puts a burden on your viewer. These excessive requests to files outside the document can increase page load time substantially. Combine your JavaScript/CSS together and place them in one large file. For those of you using WordPress, consider editing your theme if it has too many requests. It only takes a few minutes to complete this simple job (copy-paste) and decrease page loading time! Minify Large Files Some files are inherently large. Users will have trouble downloading long, documented code when visiting a website. A simple way to reduce file size is to minify your files. For example, the documented, uncompressed jQuery.js is about 120 KB. A minified version is only 19 KB and is perfect to decrease page loading time. The Yahoo! User Interface Library has a command-line compressor than can automate this process for you. GZip Your Files GZip is such an easy way to help both you and your user. It can compress most of your files so that users can download them faster. During this process, much of your bandwidth is also saved. With a method that both reduces the cost for your site and decreases page loading time, who could ask for more? Take a look at the Lateral Code GZip article for further information on this topic. With these 4 simple methods, I hope that you can fortify a nice user experience on your website. Make sure to check that you have correctly implemented these methods using YSlow!
Avoid large graphics – Websites work both visually and verbally. Its great to use a captivating image to attract attention but do not go overboard. Minimize the use of image files if possible while trying to maintain the original design with code. Using CSS and custom classes can create attractive visual cues without image files. If images are an important theme to your site use a gallery or look up how to use a script to preload images that are found on other pages within your site. Optimize graphics – Use an image editor to trim images down to the dimensions you need. Also reduce resolution to shrink the file size when working with photos. It will also help if you use the html tags for height and width. Defining these dimensions will help the browser now exactly where an image will be placed so it can focus on rendering. This is also a good time to remind you to focus on what file types to use. GIF, JPEG, and PNG are universally accepted file formats, but each is good for different reasons. Use GIF's for low color, low resolution images, like backgrounds and logos. GIF's also support transparency. JPEG in general is used for photos with lots of color. PNG is a newer format that was designed with the web in mind. PNG's file sizes tend to be larger, but it can incorporate full color photos with transparencies and uses a lossless compression. Avoid flash and animated GIFs – Flash and GIFs are typically used to add animated sprites to navigation or design banner adds to attract attention. GIFs add to your load time since every frame of animation has to load on the page before it starts moving. Flash is similar allows but allows for much richer animations. Designers also may tend to design navigations schema using Flash, but this is unnecessary. CSS allows for many types of interactive navigation schemes to be made using list and hover over commands with much less tax on the browser or your server. Also as HTML5 and CSS3 become reality, much of the interactivity and styles that Flash and GIFs have provided over the years will become native to internets most popular language. Images are not your only Nemesis. Look at your Code too. Optimize HTML files – Clean code helps reduce load time. When working with HTML/WYSIWYG editors erroneous code can leak in to your pages. Broken tags introduce confusion to the browsers rendering engine. Also some editors use their own tags that are not common in current valid DOCTYPEs. Make sure to stick to one DOCTYPE and declare it so that the browser knows what to work with. Remember that even your comments are read by the browser, so remove them after development is done to speed up you load times. Make CSS work for you – CSS changed the scope of web development by separating the content from design. CSS allows all of the styling of your page to be served from another file that is loaded when needed. By referencing CSS when your HTML code needs it allows for your code to be short. CSS also allows for many styles to be placed across multiple pages without weight being added to each one. Even though CSS helps pages load fast it is important to remember that shorthand code has an effect here also. |
Labels:
