How To Optimize Your Website To Run Faster Than Ever

It’s imperative for websites to have fast loading times. While the loading time of a website depends on the user’s internet speed, it also depends on the website itself. Loading time of a web page affects traffic. Most users get annoyed by long loading times.

Hence, many website owners make sure their pages can be loaded within 10 seconds. People don’t really bother hitting the back button if nothing appears on the page after a minute. It’s a nuisance when your limited online time is spoiled by site that takes forever to appear.

Here’s a Quick to-do list to speed up your site

• Find a good host
• Fix dead links
• Get rid of unused HTML and/or CSS
• Delete HTML comments
• Remove Duplicate Scripts
• Optimize your images
• Merge and Compress Javascripts
• Shrink your CSS file size by using shorthand properties. Use a good CSS compressor!
• Use < link > instead of @import
• Minify your HTML code by organizing your code, cutting out extra objects & removing white space characters
• Setup and enable GZIP compression
• Better coding by using HTML/CSS organizers online
• Add CSS at the top while JS at the bottom
• Avoid using tables. Use XHTML instead
• Plugins must be up-to-date
• Avoid redirects
• Use CSS3 instead of images
• Install Image lazy loading JQuery plugin
• Make your site mobile friendly
• Use external Javascript (.js) files

Here’s a more detailed guide for you with explanation and helpful resources:

1. Clean Up Your Code

• Fix Broken Links
• Delete HTML comments on your site
• Remove Unnecessary Codes

1. Broken links and unrelated HTML & CSS tags can make your website load for ages. So it makes sense to check and fix broken links on your site. Links that return error page on a user’s screen are annoying.

   Also, you have to remove unneeded code to make your website interface lighter, allowing faster loading times even for users with slow internet connections.

   • You can find unused HTML tags using: Site24x7, Dust-Me Selectors (firefox plugin)

   • You can detect unused CSS selectors using: Dust-Me Selectors (firefox plugin), Unused CSS (web), CSS Usage (firefox plugin).

   • You may also use Google Chrome by right click your mouse & “Inspect Element & Audits & Run & click “Remove unused CSS rules”

2. 2. Compress Images

   Resize Your Images Width & Height

   Pictures add value to your web pages. After all, a page that is all words looks dry. Images add illustration to your content. However, they should be resized for web use. Internet users don’t really look for A4-sized photos online. Pictures that are over 1MB can be resized to around 100kb for web use.

   Large photos slow down loading time of your website. You can resize or compress photos on several photo editing software programs (such as Photoshop). Also, it’s important to take into consideration the image file format. Good image file formats are JPEG, PNG, and GIF.

   Here are some tools you can used to resize images:

   • Online resizers: Pic Resize, Cute My Pic
   • Mac Apps: Adobe Photoshop
   • Windows Software: Photo Filtre, Adobe Photoshop

   Minify Your Image Size

   Reducing unnecessary bytes from your web images will help load your images faster on your site!

   

   • Online Optimizers: Yahoo! Smush.it (favorite), JPEG Mini
   • Mac Apps: Image Optim
   • Windows Software: PNG Gauntlet, Riot

3. 3. Merge and Compress Your Javascript / HTML / CSS files

   Large files also take time to load and in turn makes your website load longer. Compressing these can minimize your HTTP requests.

   Merge Files

   If you are using multiple CSS files , you could just combine them into a single file. For example: You have these CSS files: reset.css, normal.css, default.css. You can create a new file “style.css” and combined all those altogether and link “style.css” instead of those 3.

   Use shorthand properties to shrink your CSS file size

   For example, instead of using a code like this:

   font-size:12px; font-family:Arial;

   You may use shorthand properties instead – for example:

   font: 12px/18px Arial;

   Tools you can use to reduce size of these elements

   • Javascript/Jquery Minimizer: JS Compressor, JS Mini, Packer
   • CSS Compressor: CSS Compressor, Arantius CSS Compressor

4. 4. Opt for Simple Web Design

   Web design is not an art contest, so a website with colorful and flashy design is not necessarily the winner. Most people hate complicated and flamboyant websites. Simple websites take people directly to the content, which is what they are after.

   • Avoid using Flash elements
   • Try not to use large-sized background image

5. 5. Cache Pages

   People with slow Internet connections may find it almost impossible to load some pages at times. Their browsers can prompt them to click on the cached copy of the page, which loads right away. Pages on caches ease the strain on servers, hastening loading times. It’s good if you can give that option to your visitors.

6. 6. Check and Monitor

   It’s recommended to check the loading time of your website every now and then to see if pages are loading within acceptable time. Check your links if they are working. Modifications are necessary to give your visitors a better browsing experience.

   Tools that will help you check your site performance

   • Online: Pingdom
   • Firefox plugin: Y! Slow