How to Optimize CSS and JavaScript Delivery

Your site loading slow and you want speeds up your website ? Here we will show you a tutorial: How to Optimize CSS and JavaScript Delivery!

Your site speed strongly depends on the mount of external files need to be load while user browsing your pages because your site won’t complete loading until all external files downloaded in visitor’s browser, more external files above-the-fold will increase RTT (Round Trip Time) and HTTP Requests which means more delay in your page load.

How to Optimize CSS and JavaScript Delivery

What does above-the-fold means?

above-the-fold is the upper part of your page which is the first place seen by visitor, you should reduce the content size above-the-fold because it gets significantly more attention by your visitors and lead them to start move to the rest of your pages.

In other meaning, your above-the-fold area will let them decide to stay or run away.

what does above-the-fold means

 

What is External files?

Everything outside your HTML content will consider as external file, you have to keep maximum one external CSS/Jave files or two, Three external files is the more possible you reach to reduce load time and prevent render blocking of your page.

what-is-External-files

Why theme’s Designer using many CSS / Java files?

It is common practice for web designer to use many CSS/java files because its easy for them to create, modify and enhance their themes for selling, but you are not a designer you are a webmaster who should take care of his website speed.

How to Optimize CSS Delivery?

CSS (Cascading Style Sheet) is responsible for your style look and its including layout, fonts, color, etc.Before we start below steps, you should know first how many external CSS files you have to know what you are dealing with. For this purpose you can use Google Pagespeed or GTmetrix.

  1. Combine external CSS files.
  2. Inline small CSS directly in HTML.
  3. Minify CSS files.
  4. Avoid CSS @import technique.
  5. Avoid using style CSS attributes.

How to Combine External CSS files?

Multiple external CSS files will increase load page time and browser HTTP requests although many webmasters like multiple and separate CSS files
because it is allowing them to modify their pages easily but it will affect negatively their sites speed.
Combine CSS files will not only help you to increase page speed but it will keep your original CSS files safe to get back to them anytime you want.
Let’s make it with a live example tutorial.
I installed “Contextual Related Posts” plugin which generate additional external css file called “default-style.css”
Path: “wordpress/wp-content/plugins/contextual-related-posts/css/default-style.css”

  • Copy contain of “default-style.css”
  • Paste this contain at the end on your main css file which it should be in most cases “style.css”
  • Remove the call for “default-style.css” from your HTML
  • Result: external call of “default-style.css” is gone from your HTML and nothing affect in your layout design

How-to-Combine-External-CSS-files

How-to-Combine-External-CSS-files-2

How to Inline Small CSS Directly in HTML?

The first step browser doing when its called your site page by visitor is downloading HTML
so, inline small css file will definitely increase your page speed load because downloading one file is better and faster than two files.
All you have to do is copy the content of small css file and paste it inside style tags above the head in your HTML.

How-to-Inline-Small-CSS-Directly-in-HTML

How to Minify CSS files?

Minify (Minification) is removing unnecessary characters from CSS file like
comments, white space, new line and block delimiters without affect the process of its functions to reduce its size to improve load time.
In general meaning, minify is used to make your CSS files smaller because each kb you saved will increase your page speed loading.

CSSMinifier is one of the best minify online tools, all you have to do is copy your CSS file contain and paste it then click “Minify” button as explained in the following image.

How-to-Minify-CSS-files

Avoid CSS @import and Style CSS Attributes

Both are too bad because they causing slow load, render blocking and more HTTP requests. Use this tool to check and analyze your CSS delivery.

Avoid-CSS-import-and-Style-CSS-Attributes

How to Optimize Javascript Delivery?

1- Combine external javascript files.
Use the same steps for css to combine external javascript files to reduce round trip time

2- Inline small javascript directly in HTML.
Follow same steps for css to inline small javascript inside HTML by putting it into script tags

How-to-Optimize-Javascript-Delivery

3- Minify javascript files.
Use this great online javascript compression tool to reduce its size and get red of heavy JS files

4- Defer multiple javascript.

Defer JavaScript means defer execution until page load, this will definitely reduce the initial load time of your page.
Your site need many javascript to run properly like social buttons, video scripts, widgets, analytics, and awesome look styles.
But placing all these JS at the front of the page, will kill your speed loading and worst will keep your site loading forever if there any conflict happened between them.

I didn’t find better way more than Speed Booster Pack plugin for WordPress
because it moves scripts to the footer and Defers parsing of javascript files to improve page loading speed and many more amazing features with just one click.

How-to-Optimize-Javascript-Delivery-2

How to Get 100 Score in Google PageSpeed Test?

In this small video you will get the fundamental points for how to make your site load faster

Conclusion:

  • Combine the amount of CSS and JS files to reduce round trip time and HTTP Requests.
  • Inline important smaller CSS and JS files to reduce the initial load time.
  • Remove unused plugin, css and javascript files.
  • Reduce the content size above-the-fold.
  • Minify your CSS, JS and HTML to reduce the overall size of your page.

If you need any additional assistance in above steps , just write small comment here and i will be more than happy to help you

One Response

  1. Dimitar Ivanov Aug 31, 2016

Leave a Reply

50% off over 500 items. Grow your toolkit for all projects. Design, build, produce.Cyber Monday