Your site speed strongly depends on the number of external files that need to be loaded while the user browsing your pages because your site won’t complete loading until all external files are downloaded in the 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.
what does above-the-fold mean?
above-the-fold in the upper part of your page which is the first place seen by a visitor, you should reduce the content size above-the-fold because it gets significantly more attention from your visitors and leads them to start moving to the rest of your pages.
In other meaning, your above-the-fold area will let them decide to stay or run away.
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.
Why theme’s Designer using many CSS / Java files?
It’s a common practice for web designers to use many CSS/Java files because it’s 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 your 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.
- Combine external CSS files.
- Inline small CSS directly in HTML.
- Minify CSS files.
- Avoid CSS @import technique.
- 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’s 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.
Lets 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 Inline Small CSS Directly in HTML?
The first step browser does when it called your site page by visitors is to download HTML
so, an 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 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.
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
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
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 needs 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 is 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 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
Optimize CSS and JavaScript Best Practices
- 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 the above steps, just write a small comment here and I will be more than happy to help you.
If some one wants expert view concerning blogging and site-building then i advise him/her to pay a quick visit
this weblog, Keep up the good job.
Awesome blog! Is your theme custom made or did you download it from somewhere?
A theme like yours with a few simple adjustements would really make my blog jump out.
Please let me know where you got your design. Thanks
I blog frequently and I truly thank you for your content.
Your article has really peaked my interest. I’m
going to book mark your blog and keep checking for new information about
once a week. I subscribed to your RSS feed too.