Few weeks ago, I had discussed what a page Loading time is, why is it important, how to measure it and also some ways to improve blog speed. You can read all the details from this article : 21 Tested Ways To Speed up blog by decreasing loading time - Part 1.
And today, I'll share remaining tested ways I implemented in my website to decrease page loading time. Let's dive into them.
In fact, most of the developers do not rely on font awesome or icomoon for inserting icons in their website. They simply create a SVG icon using application softwares like Inkspace, Photoshop, Sketch and insert it in the website. Not necessary to install Font Awesome and call, hence improving webpage loading time.
Moreover, you can use SVG format as logo, icons and website backgrounds instead of traditional image formats. This will reduce page size (given SVG files are optimized) and boost page speed.
Let's say I need a simple facebook icon.
I have my SVG code for facebook icon. Now, I'll paste the code in desired location and tweak some properties to fit with my site.
Below are some websites which provide free SVG background files:
# HeroPatterns.com
This website provides free repeatable SVG background patterns. Click on the one you like, customize the foreground and background color and you're ready with the code.
# SVGBackgrounds.com
This website provides colorful SVG background patterns for free. Change color, opacity and scaling factor to fit with your website design.
# Philiprogers.com
This website provides beautiful and eye catching SVG patterns. To match the design, you might need to change values from coding section provided in demo site.
# Svgeez.com
This website provides unique and stylish SVG background patterns. You can even order a custom SVG images based on requirements.
2# Greater points in a file == increased file size. Therefore, it is not worth creating detailed images with SVG.
If you're not sure how your CSS is currently loaded, you can use this CSS delivery tool. Enter your web address and you'll get complete information along with sizes. Here's a screenshot of this blog.
This is actually a simple process. Simply copy the contents of each CSS files and combine them into a main CSS file.
Then, remove all the references for old files and update code reference with this new main CSS file.
Now, analyze the site in Pagespeed Insight to make sure you're not getting any render blocking CSS issues. If you're facing this issue, make sure to follow Google Recommendation for Optimizing CSS delivery.
For optimizing internal CSS attributes, start removing unnecessary spacing and comments. We will discuss more on this in a moment.
For optimizing inline CSS attributes, try avoiding them when possible. This will make the code lot cleaner and duplication of codes can be minimized. Inline code looks like this and there is also optimized code. Take it as a reference.
When it comes to non-critical CSS like font-awesome, animation libraries, syntax highlighter styling or anything that is not responsible in the styling of webpage structure, you can asynchronously load them.
Lazy loading of CSS ensures that content is loaded first before loading CSS and Javascript. This is important for users with slow connections. In this method, even if CSS fails to load, users can still read the text content.
In the following code, I'm trying to lazy load Font awesome, simply copy and paste before closing head tag.
It is important to use
And today, I'll share remaining tested ways I implemented in my website to decrease page loading time. Let's dive into them.
Table Of Contents
- Shift To SVG Icons/Files
- How to find SVG Icons for my website?
- How to find SVG images for using as website backgrounds?
- When not to use SVG?
- Optimize CSS
- Good Practices to be followed for optimizing CSS
- Lazy Loading CSS Files
- Run a compression audit
- Enable HTML/CSS/JS Compression
- Minifying HTML
- Minifying CSS
- Minifying Javascripts
- Keep Javascript files at the bottom of page
- Defer or Asynchronously load Javascript Files
- Reduce external scripts
- Remove default CSS and JS Blogger Files
- Remove Dyn CSS authorization.css file
- Remove Blogger's Default widget_css_bundle.css file
- Remove Blogger's Default widgets.js Javascript file
- Remove default blogger's CSS and JS file from View Page Source
- Choose a Minimal Theme
- Monitor your Page Speed Over Time
- Conclusion
11] Shift To SVG Icons/Files
Scalable Vector Graphics (SVG) files are nothing more than simple documents that describes shapes, lines, curves, colors, texts and points. Each attribute describes its own property and it can be modified individually, hence providing higher range of editing flexibility. You can learn more about the advantages of SVG icons over traditional image formats like PNG, JPEG from this linked page.In fact, most of the developers do not rely on font awesome or icomoon for inserting icons in their website. They simply create a SVG icon using application softwares like Inkspace, Photoshop, Sketch and insert it in the website. Not necessary to install Font Awesome and call, hence improving webpage loading time.
Moreover, you can use SVG format as logo, icons and website backgrounds instead of traditional image formats. This will reduce page size (given SVG files are optimized) and boost page speed.
How to find SVG Icons for my website?
Creating a SVG icon on your own can be hectic if you are not good with vector application softwares, hence using already available icon sets is an easy approach. Here is what I normally follow when I'm in need of SVG Icons :Let's say I need a simple facebook icon.
- I'll go to iconmonstr.com (you can choose any website that provides SVG Icons, but this is my first choice).
- Search for facebook icon and choose one of the available icon.
- Click on SVG format and accept license agreement.
- Finally, hit Embed option. Done.
I have my SVG code for facebook icon. Now, I'll paste the code in desired location and tweak some properties to fit with my site.
How to find SVG images for using as website backgrounds?
In our previous template (TwistBlogg v2), in order to improve page speed we replaced header and footer images with SVG pattern files. They were less size compared to images and there was no need to establish a connection, which was a must in case of normal images. So, how did I find cool SVG images to use as backgrounds?Below are some websites which provide free SVG background files:
# HeroPatterns.com
This website provides free repeatable SVG background patterns. Click on the one you like, customize the foreground and background color and you're ready with the code.
# SVGBackgrounds.com
This website provides colorful SVG background patterns for free. Change color, opacity and scaling factor to fit with your website design.
# Philiprogers.com
This website provides beautiful and eye catching SVG patterns. To match the design, you might need to change values from coding section provided in demo site.
# Svgeez.com
This website provides unique and stylish SVG background patterns. You can even order a custom SVG images based on requirements.
When not to use SVG?
1# OpenGraph does not support SVG images, thereby it is not worth replacing post images with SVG files.2# Greater points in a file == increased file size. Therefore, it is not worth creating detailed images with SVG.
12] Optimize CSS
CSS defines how HTML elements are to be displayed in a screen. A website can access this information in three ways : In an external file, which loads before page is rendered and is called using tag, or internally, which is embedded somewhere within site, or inline, meaning along with HTML tags.If you're not sure how your CSS is currently loaded, you can use this CSS delivery tool. Enter your web address and you'll get complete information along with sizes. Here's a screenshot of this blog.
Good Practices to be followed for optimizing CSS
If your website is using multiple external CSS files, each one adds delay in page loading time. It is always best to combine them into a single file. That way with a single connection established, everything can be loaded at once, hence improving page speed.This is actually a simple process. Simply copy the contents of each CSS files and combine them into a main CSS file.
Then, remove all the references for old files and update code reference with this new main CSS file.
Now, analyze the site in Pagespeed Insight to make sure you're not getting any render blocking CSS issues. If you're facing this issue, make sure to follow Google Recommendation for Optimizing CSS delivery.
For optimizing internal CSS attributes, start removing unnecessary spacing and comments. We will discuss more on this in a moment.
For optimizing inline CSS attributes, try avoiding them when possible. This will make the code lot cleaner and duplication of codes can be minimized. Inline code looks like this and there is also optimized code. Take it as a reference.
13] Lazy Loading CSS Files
Google recommends that you load critical CSS internally (eg: page-layout,main-container) and non-critical externally. It also recommends to avoid inline styling of CSS.When it comes to non-critical CSS like font-awesome, animation libraries, syntax highlighter styling or anything that is not responsible in the styling of webpage structure, you can asynchronously load them.
Lazy loading of CSS ensures that content is loaded first before loading CSS and Javascript. This is important for users with slow connections. In this method, even if CSS fails to load, users can still read the text content.
In the following code, I'm trying to lazy load Font awesome, simply copy and paste before closing head tag.
It is important to use
