Responsive Bootstrap Themes and Plugins
webthemex.com/Blog/Tips/Tips for Optimizing Your Website’s Speed

Tips for Optimizing Your Website’s Speed

a-startup-photos

Here is some tips to improve the webpage load time

(1) Use Caching When Available.

Browsers are using cache to reduce the number and size of HTTP requests and hence making web pages load faster. A web server uses the Expires header in the HTTP response to tell the browser how long a component can be cached. in static components implement Never expire policy by setting far future Expires header and for dynamic components use an appropriate Cache-Control header to help the browser with conditional requests.

How to Add Expires Headers

Just add below code in your .htaccess file:

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

(2) Optimize images.

Using this free online Tools, you can resize, compress and optimize your JPG, PNG images. Using the service is as easy as clicking of button! and Do not use BMPs or TIFFs. Optimized images and upload in to your server and save bandwidth.

(3) Include your CSS at the top and JS at the bottom.

It’s considered best practice to put your CSS as close to the top of your page as possible, In most of cases, users will face a white page until the page is loaded completely. CSS in the document head of the page prohibits progressive rendering, so browsers will block rendering to avoid having to redraw elements of the page. This also helps you to make a standard web page according to W3 standards. And, put your javascript code at the bottom of the page for the same reason.

(4) Use Small images in CSS Sprites

A web page with many images can take a long time to load and generates multiple server requests. CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance. CSS sprites work because it’s faster to load one big image and use CSS to show the section you want than it is to load lots of smaller images. This is because the browser doesn’t need to make as many requests and save bandwidth.

Spriting made easy with spriteme.org

The fastest way to use CSS sprites is to use http://spriteme.org/, which is a tool that enables you to easily turn all of your images into a CSS sprite.

(5) Optimize CSS Code and Avoid CSS @import.

Your website accesses this information in one of two ways: in an external file, which loads before your page renders, and inline, which is inserted in the HTML document itself. The external CSS is loaded in the head part of your HTML an external style sheet is preferable because it reduces the size of your code

Each CSS file you are using for your website adds time to your page load speed. however you can combine two or more CSS files together using nothing more than “copy and paste” and remove render blocking css.

(6) Compress your website with gzip.

Gzip is the most popular and effective compression method to reduces response times by reducing the size of the HTTP response. Gzipping generally reduces the response size by about 70-75%. Approximately 90% of today’s Internet traffic travels through browsers that claim to support gzip,” says Yahoo. It”s an easy way to reduce page weight just add below code in your .htaccess file:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:

SetOutputFilter DEFLATE

(7) Content Delivery Networks (CDN).

A CDN is essentially a network of geographically dispersed servers. Each CDN node caches the static content of a site like the images, CSS/JS files and other structural components. When a user requests your site, the node closest in proximity to user will deliver the static content, ensuring the shortest distance for the data to travel (reduced latency), therefore providing the fastest site experience. The origin of the webpage and a content delivery server.Reason for using a CDN is to improve your website experience in terms of speed, Ensuring a consistent experience for all your users is important.

Share this page?..
twitter Share on Google+
TOP