An Acute Developers’ Guide to Speed Up the Website

Before beginning, let’s put our feet in a user’s shoes for a few seconds; here’s how a user reacts to a slow website:

<Clicks a URL> ...

     <Loading time=1s> …

         <Loading time=2s > …

      <Loading time=3s> …

 <Ok that’s it bye bye!!>

A slow speed doesn’t affect just the user experience; it also messes up your search engine ranking, Forbes says.

So, how can you fix this?

It’s a long story, TL;DR. To cut it out short, I have listed out the most important ones. Let’s have a quick look.

Images

1. Resize the images using applications. You can find a number of free as well as paid application online for image resizing. The popular ones are Google Picasa and Adobe Photoshop.
2. State the image dimension in your code. It helps make the rendering process faster.
3. Host your image using a different subdomain. Otherwise the browser attempts to load the image files together with the other elements of the page which slows down the page loading.
4. Optimize your images. Go with the lighter image formats, such as .PNG. and JPEG. Remove the unnecessary comments, opacity, etc. that make the image heavy.

Did you know that Contentder has its own Media Management that allows you to optimize images before uploading? Also, you can organize media folders in a single place. Learn more about it at How to Edit Images with Media Management in Contentder.

Optimized code

1. Minify your code and remove the dead ones. Comments, line breaks and whitespace are for visual simplicity for humans; not for computers. They make the files heavy. So, make sure to optimize your codes using tools, such as Uglify JS, Microsoft AJAX Minifier, Google Closure Compiler, etc.    
2. Remove the duplicate scripts because they increase the execution time.
3. Optimize page rendering. Move your JS files to the bottom of the page and the CSS files of the to the top of HTML. This allows the page to load in a progressive fashion, loading the style elements of web page first, thus, creating an impression of faster page-load.
4. Merge your JS and CSS files together. If you have a large number of JS and CSS files, make sure to merge them together, but into an order that optimizes rendering.
5. Rule out the JS. elements from the library which you don’t need. This helps your site to load much faster.
6. Use reduced versions of codes. Longer codes eat up a huge chunk of time for execution. So, if the codes can be reduced, just do it.
7. Use SSL. Studies show that the encrypted form of websites load faster as compared to the non-encrypted ones. Plus, they secure your websites.

Server