Very First Step to Reduce Your Website Page Load Speed

Posted on by prashant_@psux

There are  lots of methods to speed up your web page load speed but today I am going to share very first (easily manageable) step of reducing page load speed via simple Info graphic.

1. HTTP Request

Browsers  take  80% of a page load  time to fetch  external  content. Stylesheets, images, and scripts etc.  So decrease the HTTP Requests and increase the page load speed.

2. Optimize Images

Three things are very important in image optimization: i. SIZE ii. FORMAT iii. SOURCE.

SIZE

Reduce image size is a very important section of an optimizing image. We can use different tools to minimize image size. Some are listed below,

– tinypng.com  (For static or CMS)

– https://wordpress.org/plugins/wp-smushit/ (for WordPress)

– Adobe  photoshop etc.

FORMAT

JPEG, PNG are best and you can also use GIFs for small or simple animated graphics.

SOURCE

Provide valid URL  or image source in image src attribute.

<img src=””http://www.abc.com/images/banner.png”” alt=””banner”” />

3. Minify Resources

It is very best practice to provide minified version of your css, html, javascripts codes. It removes extra spaces (white spaces), line breaks, and comments in your code.

Minification process reduces file size and the subsequent loading time. So, don’t forget to minify your codes before upload.

Try this to minify your codes.

4. Reduce Redirects

Redirects generate new  HTTP requests and increase load time. So you need to reduce them. Check broken links (404) and quickly fix them.

Use this tools

http://www.brokenlinkcheck.com/ for online

or download Xenu’s Link Sleuth  and install in your system.

5. Optimize CSS Delivery

There are 3 ways to use CSS in your page, i.e. Internal CSS, Inline CSS and External CSS but, generally we use two ways inline CSS and External CSS. Remove the all inline and internal CSS from your page and also combine the all external CSS files into one single file.

Note: Also remove the inline Javascript and combine the all external Javascript file into one file.

6. Enable compression

Enabling compression in your site saves download time, bandwidth and reduces your page loading speed. You can do this with Gzip compression. Simply add Add the following to code on your  .htaccess file:

# Compress compressible fonts
AddOutputFilterByType DEFLATE font/ttf font/otf image/svg+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
AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE text/cache-manifest
AddOutputFilterByType DEFLATE font/ttf font/otf image/svg+xml

7. Browser caching

Reduce web page load times for repeat visitors. set expiry dates on all cacheable resources (JS, CSS, image, media, PDF files, etc.).  Add the following to code also on your  .htaccess file:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType text/css “access plus 1 month”
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
ExpiresByType image/x-icon “access plus 1 year”
ExpiresDefault “access plus 2 days”
</IfModule>
## EXPIRES CACHING ##

Leave a Reply