• Nigerian/African Tech
  • Start Up
  • Internet
    • App
    • Mobile
    • Software
  • Gadgets
  • Money
  • Video
Tech News, Magazine & Review WordPress Theme 2017
  • Home
  • Africa
  • Business
  • Video
  • Metaverse
  • AI
  • Gadgets
  • Earnings
  • Tips
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
  • Home
  • Africa
  • Business
  • Video
  • Metaverse
  • AI
  • Gadgets
  • Earnings
  • Tips
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
TechBooky
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Home Internet

A Modern Approach to Improving Website Speed by Pedro Semeano Part 1

Lolu Peace by Lolu Peace
April 10, 2015
Share on FacebookShare on Twitter

Have you ever had the experience of going to a site and patiently waiting forever for it to load?

Probably not, because no one waits forever for a site to load. We just close the browser tab and move on.

Also On TechBooky

Here’s How ChatGPT Can Help Improve Your SEO

Here Are Key Differences Between Google Search And ChatGPT

WhatsApp Adds Proxy Support To Bypass Restrictions In Some Countries

Top 5 For Free Testing Of Traffic Generation Service

How Technology Is Changing How People Bet On Sports

Time matters.

When it comes to getting the user’s attention, we only have a very brief window of opportunity. According to Ilya Grigorik, on his “Speed, Performance, and Human Perception” keynote, you only have one second.

One second!

After that first second, a mental context switch occurs. In the user’s mind, it has been so long that they start to think about other things.

And after about 10 seconds, the user is already bored and will probably close their browser tab and get on with their day.

What I will cover in this guide is a process for optimizing your website’s performance. I’m going to use my own site as an example.

If you haven’t done the things discussed in this guide, you will get guaranteed website speed improvements after performing the steps that I will be discussing.

Initial Benchmarking

The first thing to do is to test the current performance of the site. This will help us see issues related to web performance, as well as help us prioritize our efforts.

One excellent tool for benchmarking front-end performance is Google’s performance analysis tool, PageSpeed Insights. It will check your site and give you a score based against a set of performance guidelines and best practices.

Here’s the first result I got for mobile:

First analysis on mobile

And for desktop:

First analysis for desktop

Google Developers has another useful test available, called Mobile-Friendly Test. This tool will show you potential areas for improvements. For this test, everything’s OK on my site:

Mobile-Friendly Test

Improving Performance

There are two general approaches to improving website performance with the use of developer tools.

  • You can use online tools
  • You can use open source web development tools on your machine

The first approach is straightforward: Grab all your files and use the online tools to do whatever it needs to do (lint, minify, concatenate, etc.).

Done. Well… not quite.

What if you have 50 files to minify? Or 200? And what if you change your code? Are you going to repeat that task over and over?

That’s why I’ll cover the second approach, because it’s more flexible and scalable. However, it’s a more complicated approach, especially at the start.

We’ll use Gulp, a JavaScript task runner (similar to Grunt), that will do all the work for us. (If you don’t know what developer tools like Gulp, Grunt, Bower, and Yeoman are, check my blog post where I give a brief intro about them.)

To improve website speed and performance, this is what we will do:

  1. Set up Gulp
  2. Minify the CSS and JavaScript files
  3. Concatenate the CSS files and JavaScript files
  4. Lint our JavaScript code to check for errors and issues
  5. Optimize the images
  6. Minify the HTML documents

Setting Up Gulp

The first thing to do is to set up a project working environment. All I did was grab all the files from my site and move them to a folder called src in my computer.

Move your data inside src folder

By the way, you will need Node (and npm) installed to be able to use Gulp in the manner I’ll be describing. See How to Install Node.js.

First, we need to install Gulp globally so that it’s accessible anywhere in our computer. Just open your terminal/command prompt and type:

npm install --global gulp

Then go to your project folder and install it in your development dependencies.

npm install --save-dev gulp

After that, you’ll see a new folder that will automatically be created for you callednode_modules. That’s where Gulp and all your other Node modules for the project will be stored.

After installing Gulp

There’s just one more step to perform before running Gulp: We need to set up a configuration file so that Gulp knows what tasks to perform on our files. And that’s as easy as creating a file called gulpfile.js in your root folder with any text editor or source code editor.

Here’s the initial contents of gulpfile.js:

var gulp = require('gulp');
gulp.task('default', function () {});

Right now it isn’t doing anything, but you can still run it. Just type:

gulp

and you should get an output like this:

[14:12:14] Starting 'default'...
[14:12:14] Finished 'default' after 72 μs

Now that we have Gulp ready to go, the next step is to create the Gulp tasks to do all the work for us.

Minifying CSS and JS Files

OK, let’s get some stuff done with Gulp! First task: Minifying our CSS and JS files.

The minification process, what it does basically does, is it strips off all white spaces, tabs, carriage returns, newlines, comments, and other unnecessary characters from our files. For JavaScript, it will also change object names to shorter ones.

Minification is performed in order to get a very small file size, while still preserving all our style rules and JS functionality.

In order to minify our files, we’ll need to install node modules that will help us with the task.

Let’s install the gulp-minify-css package, which will minify our CSS files. Then we will use the gulp-uglify package for our JavaScript files.

npm install --save-dev gulp-minify-css
npm install --save-dev gulp-uglify

Now that we have our required modules, we have to create the task for each one. We can actually do everything inside our default task, but I prefer to do a separate task for each type of file. This way, we’ll keep our code cleaner, easier to read and maintain, and, if we want, we can run the task for the CSS or the JS files separately.

Let’s add our minify-css and gulp-uglify modules to the top of our gulpfile.js.

var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');

Let’s create a couple of tasks. This is what they’ll do:

  1. Read all the .css and .js files
  2. Minify the files’ source code
  3. Export the output to another folder called dist
// CSS minification task
gulp.task('css', function() {
  return gulp.src('src/css/*.css')
    .pipe(minifycss())
    .pipe(gulp.dest('dist/css'));
});

// JS minification task
gulp.task('js', function() {
  return gulp.src('src/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

All the processed files will go inside the dist folder after the tasks have been performed.

Issuing the gulp command again in your terminal/command prompt will create the dist folder, with the css and js folders inside that will contain our minified files.

Concatenating CSS and JS Files

Sending down the wire just a couple of files instead a bunch of them makes the whole process of loading a page much faster.

So what we’re going to do next is merge all our CSS files into one .css file, and all our JS files into one .js file. And for that, we’ll use the modules gulp-concat-css andgulp-concat.

$ npm install --save-dev gulp-concat-css
$ npm install --save-dev gulp-concat

We’re using different modules because gulp-concat-css is more appropriate for CSS files since it does the rebase of the URLs automatically.

Gulp is a stream-based build system, so if you want to apply another process after that, you just keep piping. Both modules require a string argument with the name of the concatenated file. In this case, I’m using semeano.min.css andsemeano.min.js. (Actually, I’m not using any JS on my site, but I’ll do it just for the sake of the tutorial.)

First, let’s add our dependencies on top:

var concatcss = require('gulp-concat-css');
var concat = require('gulp-concat');

Then the additional piping for the tasks:

// CSS concatenation + minification task
gulp.task('css', function() {
  return gulp.src('src/css/*.css')
    .pipe(concatcss('semeano.min.css'))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/css'));
});

// JS concatenation + minification task
gulp.task('js', function() {
  return gulp.src('src/js/*.js')
    .pipe(uglify())
    .pipe(concat('semeano.min.js'))
    .pipe(gulp.dest('dist/js'));
});

Linting JS Files

Linting won’t actually help reduce the size of the files, but it will help you detect errors and potential problems in our JavaScript code. And if we were to stretch it, JavaScript errors can lead to broken or low-performing functionality and, subsequently, a bad user experience. So linting your code is a must, in my opinion.

JSHint is a fork from another similar tool called JSLint. So why use JSHint? Basically, it all comes down to what you prefer. (If you want to know the reason behind the JSHint fork, read this article.)

Let’s install JSHint:

npm install --save-dev gulp-jshint

Add the dependency:

var jshint = require('gulp-jshint');

We need to pipe the code linting process before uglifying our source code, or else it will be tough to debug if JSHint spots an error:

// JS linting + minification + concatenation task
gulp.task('js', function() {
  return gulp.src('src/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter("default"))
    .pipe(uglify())
    .pipe(concat('semeano.min.js'))
    .pipe(gulp.dest('dist/js'));
});

The reporter method is what will output the warnings on the terminal/command prompt. We’re using the default reporter, but you can change it to a different one.

Optimizing Images

When we run PageSpeed Insights, it will check if the images that we’re using are larger than they need to be. We can strip all the metadata from the images, which will reduce the file size a small bit. To optimize images, we’ll be using gulp-imagemin for raster images (e.g. JPG, PNG, and GIF) and gulp-svgmin for SVG files respectively.

$ npm install --save-dev gulp-imagemin
$ npm install --save-dev gulp-svgmin

Here are the tasks for minimizing images and SVG files. I think it’s pretty self-explanatory by now:

var imagemin = require('gulp-imagemin'),
    svgmin = require('gulp-svgmin');

...

// Image optimization task
gulp.task('img', function () {
  return gulp.src('src/img/*.*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/img'));
});

// SVG optimization task
gulp.task('svg', function () {
  return gulp.src('src/svg/*.svg')
    .pipe(svgmin())
    .pipe(gulp.dest('dist/svg'));
});

In my case, this didn’t actually make a big difference on the image, it just saved 543 bytes:

gulp-imagemin: Minified 1 image (saved 543 B - 0.2%)

But I remembered that the image was the main issue on the tests:

Main issue

That is happening because I’m using the same image for desktop and mobile. Everything was fine on the desktop tests, but on mobile, since I’m using the original image and resizing it, I’m wasting a lot of pixels. The solution for this is to have different image sizes for each media-query breakpoint. That way, if you need a 200x200px image, the browser will download only that size, saving bandwidth along the wire.

Minifying HTML

Minifying our HTML files is also important, and here is where you’ll probably see the most savings in file size. To minify our HTML documents, we’ll use the gulp-minify-html. Also, in order to make the changes on the resources automatically, from the files in the src folder to the dist folder, we need to install gulp-useref.

npm install --save-dev gulp-minify-html
$ npm install --save-dev gulp-useref

Here’s the task:

var minifyhtml = require('gulp-minify-html'),
    useref = require('gulp-useref');
...
// Switch URIs to dist files + minify HTML task
gulp.task('html', function () {
  return gulp.src('src/*.html')
    .pipe(useref())
    .pipe(minifyhtml())
    .pipe(gulp.dest('dist'));
});

This task requires a small change in the HTML files (in this case there’s only one, the index.html). We need to add a special comment for the gulp-useref module referencing a block on resource files (html5reset-1.6.1.css and semeano.css) that will result in a single file (semeano.min.css) after the concatenation and minification.

<!-- build:css css/semeano.min.css -->
<link rel="stylesheet" type="text/css" href="css/html5reset-1.6.1.css" />
<link rel="stylesheet" type="text/css" href="css/semeano.css" />
<!-- endbuild -->

This way, the index.html in the dist folder will have just one link tag:

<link rel="stylesheet" type="text/css" href="css/semeano.min.css" />

Note: Now that we have all these tasks declared we need to call them. Just add the created tasks to the default task dependencies, i.e. an array of task names as the second argument:

// Default task
gulp.task('default', ['css', 'js', 'img', 'svg', 'html'], function () {});

What that basically means is that before running the default task, Gulp needs to run all those tasks first.

Conclusion

After these changes, we can see some improvement on the score. It seems like a small change (only 12%) but after the minification of our files we are sending 33% fewer KBs compared to before. That’s something! And it didn’t take a whole lot of time to achieve.

PageSpeed score after 1st part of improvements

Here are some other things that could help improve the loading speed of your web pages:

  • Use of spritesheets. Instead of downloading a set of images, just put them all together inside one single image file and use CSS to specify the area of each image. This solution also applies to SVGs.
  • Convert images to WebP. WebP is a new image format that provides lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs. But WebP browser support is low compared to PNG, GIF and JPEG.
  • Inline CSS. If your CSS files are small, just inline them in your HTML using the<style> tag. That will save you some server requests and will help avoid page-render-blocking CSS. This is a practice Google PageSpeed Insights recommends.

In future guides, I’ll share more intermediate-to-advanced website performance optimization tips and strategies, such as making changes to the structure of our HTML markup, other solutions for optimizing content delivery, and even some server configurations that will give us that final speed boost!

Source: Sixrevisions

Related Posts:

  • 10 Advantages Of Using the Mobile Version Over the Desktop Version Of Websites
    10 Advantages Of Using the Mobile Version Over the Desktop…
  • Profitable UX And UI Design Tips To Increase Conversion Rates
    Profitable UX And UI Design Tips To Increase Conversion…
  • Everything You Need To Know About Ecommerce Website Development Services
    Everything You Need To Know About Ecommerce Website…
  • Let's Take A Look At A Brief Overview Of Log Analysis
    Let's Take A Look At A Brief Overview Of Log Analysis
  • Infographic: 21 Warnings That Indicate It's Time To Switch Your Web Hosting Right Away
    Infographic: 21 Warnings That Indicate It's Time To Switch…
  • 7 Tips To Better Your SEO Strategy With Absolute Digital Media
    7 Tips To Better Your SEO Strategy With Absolute Digital…
  • 10 Most Advanced SEO Techniques To Get Top Rankings In 2021
    10 Most Advanced SEO Techniques To Get Top Rankings In 2021
  • Top 6 Benefits Of Progressive Web Apps For E-Commerce Platforms
    Top 6 Benefits Of Progressive Web Apps For E-Commerce…
Tags: speedwebsite
Lolu Peace

Lolu Peace

BROWSE BY CATEGORIES

Receive top tech news directly in your inbox

Loading

Recent

Tesla Cybertruck Mass Production Won’t Start Until 2024

Tesla Cybertruck Mass Production Won’t Start Until 2024

January 27, 2023
Apple Reportedly Delays Development Of Its Own WiFi Chips

Apple Reportedly Delays Development Of Its Own WiFi Chips

January 27, 2023
Google Commits To Complying With EU Laws On Its Services

Google Commits To Complying With EU Laws On Its Services

January 27, 2023
Airtel Launches Its eSIM Technology In Nigeria

Airtel Launches Its eSIM Technology In Nigeria

January 27, 2023
In Spite Of The Sucess Of Genetically Modified Foods, Debates Abound

In Spite Of The Sucess Of Genetically Modified Foods, Debates Abound

January 27, 2023
How And How Not Gaming Can Be Used In Solving Real Problems

How And How Not Gaming Can Be Used In Solving Real Problems

January 27, 2023
Tesla Sues Former Employee For Allegedly Stealing Trade Secrets

Tesla Made The Most Money In 2022, But Its Future Still Rocky

January 26, 2023
Shutterstock Introduces Its Generative AI Image Tool

Shutterstock Introduces Its Generative AI Image Tool

January 26, 2023
Meta Agrees To $725M Settlement Of Cambridge Analytica Lawsuit

Meta Set To Reinstate Trump’s Facebook And Instagram Accounts

January 26, 2023
Here’s How ChatGPT Can Help Improve Your SEO

Here’s How ChatGPT Can Help Improve Your SEO

January 25, 2023

Browse Archives

January 2023
MTWTFSS
 1
2345678
9101112131415
16171819202122
23242526272829
3031 
« Dec    

About Us

TechBooky

TechBooky is a social Tech blog with a special focus on the budding African Technology sector. TechBooky is currently based in Abuja, Nigeria.

Subscribe to TechBooky

Enter your email address to subscribe to TechBooky and receive notifications of new posts by email.

Join 24 other subscribers.

Receive top tech news directly in your inbox

Loading

Popular Tags

AI (252) amazon (95) android (281) app (610) Apple (473) artificial intelligence (265) business (338) china (113) cloud (135) cryptocurrency (158) ecommerce (109) enterprise (239) facebook (472) gadget (448) gaming (160) google (545) government (381) guest post (108) instagram (137) internet (352) ios (249) iphone (210) microsoft (261) mobile (281) new feature (287) nigeria (276) privacy (135) research (134) samsung (139) security (374) smartphone (235) social media (671) software (415) startup (268) streaming (140) telecom (157) tips (340) transport (104) twitter (216) united states (191) users (132) videos (115) website (159) whatsapp (129) youtube (106)

Quick Links

  • Home
  • Africa
  • Business
  • Video
  • Metaverse
  • AI
  • Gadgets
  • Earnings
  • Tips

Popular Post

  • Trending
  • Comments
  • Latest
Download Free Editable Resume Templates – Word / Docx – 2022

Download Free Editable Resume Templates – Word / Docx – 2022

July 25, 2022
The Best Free PC Games

The Best Free PC Games

July 29, 2022
Recover Permanently Deleted Emails From iCloud Manually

Recover Permanently Deleted Emails From iCloud Manually

March 5, 2022
Resume and Cover letter Templates for free

Resume and Cover letter Templates for free

July 25, 2022
How is Technology Changing Our Definition of What It Means to Be a Human?

How is Technology Changing Our Definition of What It Means to Be a Human?

April 1, 2018
[Fixed] “Outlook Running Slow Windows 10” Issue

[Fixed] “Outlook Running Slow Windows 10” Issue

February 12, 2020
Tesla Cybertruck Mass Production Won’t Start Until 2024

Tesla Cybertruck Mass Production Won’t Start Until 2024

January 27, 2023
Apple Reportedly Delays Development Of Its Own WiFi Chips

Apple Reportedly Delays Development Of Its Own WiFi Chips

January 27, 2023
Google Commits To Complying With EU Laws On Its Services

Google Commits To Complying With EU Laws On Its Services

January 27, 2023
Airtel Launches Its eSIM Technology In Nigeria

Airtel Launches Its eSIM Technology In Nigeria

January 27, 2023
In Spite Of The Sucess Of Genetically Modified Foods, Debates Abound

In Spite Of The Sucess Of Genetically Modified Foods, Debates Abound

January 27, 2023
How And How Not Gaming Can Be Used In Solving Real Problems

How And How Not Gaming Can Be Used In Solving Real Problems

January 27, 2023

Recent News

Tesla Cybertruck Mass Production Won’t Start Until 2024

Tesla Cybertruck Mass Production Won’t Start Until 2024

January 27, 2023
Apple Reportedly Delays Development Of Its Own WiFi Chips

Apple Reportedly Delays Development Of Its Own WiFi Chips

January 27, 2023
Google Commits To Complying With EU Laws On Its Services

Google Commits To Complying With EU Laws On Its Services

January 27, 2023
Airtel Launches Its eSIM Technology In Nigeria

Airtel Launches Its eSIM Technology In Nigeria

January 27, 2023
In Spite Of The Sucess Of Genetically Modified Foods, Debates Abound

In Spite Of The Sucess Of Genetically Modified Foods, Debates Abound

January 27, 2023
How And How Not Gaming Can Be Used In Solving Real Problems

How And How Not Gaming Can Be Used In Solving Real Problems

January 27, 2023
  • About TechBooky
  • Submit Article
  • Advertise Here
  • Contact us
  • Privacy Policy
  • Disclaimer
  • Login

© 2021 Design By Tech Booky Elite

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
  • Home
  • Africa
  • Business
  • Video
  • Metaverse
  • AI
  • Gadgets
  • Earnings
  • Tips

© 2021 Design By Tech Booky Elite