Increasing Website Page Load Speeds

By increasing your website speed, you can: increase user experience, have higher conversions, promote engagement, and generate even higher search rankings.
 

Things to consider

1) Eliminate render-blocking JavaScript and CSS in above-the-fold content 2) Optimize images 3) Leverage browser caching 4) Reduce server response time 5) Minify CSS 6) Minify HTML 7) Minify JavaScript


 

Eliminate render-blocking JavaScript and CSS in above-the-fold content

This means that your HTML references a blocking external JavaScript file in the above-the-fold portion of your page.
JavaScript needed to render the above-the-fold region should be inlined, and JavaScript needed to add additional functionality to the page should be deferred until after the above-the-fold content has been delivered.
Generally, the bulk of the JavaScript code handles user-initiated events occur after the page is loaded. In order to defer loading of these JavaScripts insert a JavaScript event listener in the head of the containing document that forces the external file to be loaded after the onload event.
I recommend adding a very simple scripted DOM element. Here’s an example code that Google recommends.


If you are using a JavaScript library (like jQuery) it can be safely added after the above-the-fold content is rendered.


 

Optimize images

Keep your image sizes to a minimum to reduce the amount of time a person waits for it to load. Formatting and compressing images can save many bytes of data. You can use Compress Now, an online image compressor.


 

Leverage browser caching

Use .htaccess to cache files.


 

Reduce server response time

Load your CSS first and your JavaScript last.

Use CSS Sprites to reduce load time and reduce the number of HTTP-Requests.
Lets say we have five images on a page; we can put all five of these images in a sprite and and only have one HTTP-Request instead of five HTTP-Requests.

Sprite image. Named sprite.png strite The example below is how our page looks. We use a small transparent image named trans.png because the src attribute cannot be empty.

Use Gzip to compress files.
How to enable Gzip on your server:

Make Fewer HTTP Requests and avoid CSS Expressions.
 

Minify CSS, HTML, JavaScript

A good tool for analyzing your website speed is Google’s PageSpeed Insights tool!

Tagged with:

View all contributions by

Website:

Related Articles

Advertisement

Stay connected with us

Add us on Google+

Follow us on Facebook

Follow us on Twitter

Get updates via RSS

Get email updates

FEEDBACK0

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">