website speed optimization

Steps to optimize or speed up any website making your website load faster 100% proven steps.

Faster loading of website is very important no body like slow website you loose a lot sales and visitors just because of slow loading time not even that you website will not rank in google if site is slow.Faster loading of website is part of user experience.So i will guild you step by step process to optimize the speed of website.I have done tons of research on this basis of that providing you all tips and tricks to make website load faster in browser.

Step 1:- First and for most you have to choose a good web hosting provider who provide fast web hosting. How can i find fast hosting provider?Well,good question just contact the hosting provider and ask the one domain name hosted on their server.Once you have domain name you can go to Pingdom website speed test tool and test the load time from different region if load time is good then they are fast web hosting provider.

Step 2:- Setup Cloudflare cdn on your domain. Cloudflare is leader in providing cdn service it greatly improve your website speed.It has free and paid plans both.

Step 3:- Optimize the images on your website.Large size images takes time to load you can compress its size using online compression tool https://highcompress.com/online-compress

Step 4:- Modify .htaccess file.In your public_html folder there is hidden file called .htaccess you need to add following code.This code is test and work very well.Note:-do not override the existing code in .htaccess just add the following code.Some code in it will not work on all web hosting provider though that would not create any issue even if your hosting provider does not support that like apache module google page speed.you can ask your hosting provide if their server support google page speed module.Hosticron has enabled this module on its all server.This module hugely optimize the speed.To know more about google page speed apache module visit https://www.modpagespeed.com/doc/

#To increase memory limit
php_value memory_limit 2048M

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css text/javascript application/javascript video/webm audio/webm
</IfModule>

# TN START ENABLE KEEP ALIVE
<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>
# TN END ENABLE KEEP ALIVE

# TN START GZIP COMPRESSION for compressing content using gzip 
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# TN END GZIP COMPRESSION

# For caching
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf|webm)$">
Header set Cache-Control "public"
</filesMatch>


# TN - START EXPIRES CACHING # for cache expiry
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/webp "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/ogg "access plus 1 year"
ExpiresByType video/webm "access plus 1 year"
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType text/x-component "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresDefault "access 1 month"
</IfModule>
# TN - END EXPIRES CACHING #

# TN - BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# TN - END Cache-Control Headers

<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>

# BEGIN DEFLATE COMPRESSION for deflate compression tool
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
 AddOutputFilterByType DEFLATE application/x-font
 AddOutputFilterByType DEFLATE application/x-font-opentype
 AddOutputFilterByType DEFLATE application/x-font-otf
 AddOutputFilterByType DEFLATE application/x-font-truetype
 AddOutputFilterByType DEFLATE application/x-font-ttf
 AddOutputFilterByType DEFLATE application/php
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE font/opentype
 AddOutputFilterByType DEFLATE font/otf
 AddOutputFilterByType DEFLATE font/ttf
 AddOutputFilterByType DEFLATE image/svg+xml
 AddOutputFilterByType DEFLATE image/x-icon
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE image/webp
</IfModule>
# END DEFLATE COMPRESSION
#Google page speed code, check with you host provider if enabled #on server
<IfModule pagespeed_module>
  ModPagespeed on
  ModPagespeedRewriteLevel CoreFilters
  ModPagespeedEnableFilters add_head,remove_quotes,rewrite_javascript,rewrite_images,insert_dns_prefetch,defer_javascript
  ModPagespeedEnableFilters rewrite_css,fallback_rewrite_css_urls
  ModPagespeedEnableFilters sprite_images,collapse_whitespace,dedup_inlined_images,inline_preview_images,resize_mobile_images,rewrite_javascript,responsive_images,resize_images,convert_jpeg_to_progressive,prioritize_critical_css,trim_urls
  ModPagespeedEnableFilters convert_gif_to_png,recompress_png,convert_png_to_jpeg,convert_jpeg_to_progressive,recompress_jpeg,convert_jpeg_to_webp,convert_to_webp_lossless,convert_to_webp_animated,recompress_webp

  ModPagespeedEnableFilters lazyload_images
  ModpagespeedLazyloadImagesAfterOnload off
  ModpagespeedCriticalImagesBeaconEnabled false
  ModpagespeedLazyloadImagesBlankUrl "https://www.gstatic.com/psa/static/1.gif"
  ModPagespeedEnableFilters inline_google_font_css
  ModPagespeedGoogleFontCssInlineMaxBytes 1024
  ModPagespeedCssInlineMaxBytes 1024

  ModPagespeedEnableFilters local_storage_cache
</IfModule>
# START – TN Disable server signature #
ServerSignature Off
# END – TN Disable server signature #

Step 5:- Optimize google fonts loading.Almost all website use google fonts that require dns resolving during website load.To optimize it please add below code to your web page just after <head> tag

<link rel=preconnect href="https://fonts.googleapis.com/" crossorigin>
<link rel=preconnect href="https://fonts.gstatic.com/" crossorigin>

Add following inside @font-face declarations

font-display: swap;

Combine Google Fonts to Save on HTTP Requests see example below

OLD WAYS two request

<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic' />
<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Istok+Web:400,700' />

NEW WAYS one request, Combine them in a single request using the pipe character

<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic|Istok+Web:400,700' />

If you have more than two requests then you can all using pipe symble “|” like above

Step 5:- Use css Image sprites

Image Sprites

An image sprite is a collection of images put into a single image.

A web page with many images can take a long time to load and generates multiple server requests.

Using image sprites will reduce the number of server requests and save bandwidth.

Step 6:- Minify HTML,CSS and Javascrips

Minification is the process of minimizing code and markup in your web pages and script files. It’s one of the main methods used to reduce load times and bandwidth usage on websites. Minification dramatically improves site speed and accessibility, directly translating into a better user experience.

Use below links to minify the resources

For javascript

http://beautifytools.com/javascript-minifier.php

For html

http://beautifytools.com/html-minifier.php

For css

http://beautifytools.com/css-minifier.php

Note:-Step 6 is not required if your hosting provider support google page speed apache module.We have already included the .htaccess code for this in step 4.

Step 7:- Use caching plugin contact your web developer to implement the caching on your website.If your are using wordpress then I would recommend to use wpfastest cache both free and paid version available.

Thats all optimization steps i know best!

Was this article helpful?
YesNo

Leave a Reply

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