In this article, I am going to explain how and why to optimize front-end resources, and its impact on server bandwidth. So first, let us discuss about bandwidth.
Bandwidth is the amount of data transferred from your hosting server or to your hosting server in a prescribed period. Generally, bandwidth consumption calculated on monthly basis and in gigabytes.
Any data you send or receive from hosting server has certain size, which may be simple text/html or encrypted media data. Every time you visit a website, the website data is downloaded to your local system. Moreover, displayed in browser, which includes HTML, JavaScript, CSS, Images, Video and Audio.
Now you know what server bandwidth is, let us discuss why it is important to reduce bandwidth uses. Reducing bandwidth means to use lightweight / optimized resources. That helps the site to load faster and saves server bandwidth too. Server bandwidth has direct impact on the hosting cost.
Now you know why it is important to reduce bandwidth, let us discuss how to reduce bandwidth uses.
Please check few easy ways listed below explaining how to optimize resources and enable GZIP compression.
HTML
Remove unwanted tags and white spaces, move inline and embedded style / script to external files.
CSS / JavaScript
There are always 20-40% of whitespaces in JavaScript and CSS files. Best practice to optimize the CSS and JavaScript file is to create minify version. Minifying will compress the files up to 60-80%.
Some popular JavaScript and CSS compressor URLs are listed below.
https://jscompress.com/
https://www.toptal.com/developers/javascript-minifier
http://javascriptcompressor.com/
http://www.minifier.org/
https://www.cleancss.com/javascript-minify/
http://refresh-sf.com/
https://csscompressor.net/
https://www.toptal.com/developers/cssminifier
http://www.cleancss.com/css-minify/
https://www.giftofspeed.com/css-compressor/
http://lisperator.net/uglifyjs/
Images
Exporting the images for web, using right image format and size will save remarkable bandwidth.
Some popular compression tools listed below
https://tinypng.com/
https://tinyjpg.com/
https://www.websiteplanet.com/webtools/imagecompressor/
GZIP Compression
GZIP Compression is a capability of compressing files for faster network transfer. Now it is a standard practice. If you are not using GZIP compression, you must start using now to reduce your website’s load time.
You can check if your site is using GZIP Compression from below links
https://www.giftofspeed.com/gzip-test/
https://sitechecker.pro/gzip-test/
https://seositecheckup.com/tools/html-compressiongzip-test
If GZIP Compression is not enabled on your site, please check below how to enable it.
Enable GZIP Compression using .htaccess file
You can easily enable it by adding simple line of code to your .htaccess file.
Using Mod_deflate
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/opentype
# For Olders Browsers Which Can't Handle Compression
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Using Mod_zip
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_include handler ^cgi-script$
Although the compression ratio is in fraction, but it has significant impact when you consider the bigger picture.
For example if you have a 200kb image on your site. If your site is visited 10000 times, it will consume 2000MB bandwidth. If you compress the image by 50%, you will save 1000MB bandwidth.
Hope this helps.