HOW TO MAKE YOUR UMBRACO WEBSITE FASTER?

GET WORDPRESS.

touch

hearing

smell

sight

taste

perception = reality

Who thinks that 300ms is a really long time?

BUT WHAT ABOUT THE WEB?

Who thinks that 100ms is a really long time?

TIME

REVENUE

100ms

1%

100ms

1000ms

Feels instantaneous

Anything beyond this point causes lose of users focus

We need to go faster!

PERFORMANCE = DEVELOPERS RESPONSIBILITY

WHAT CAN A FRONTEND DEVELOPER DO?

TOOLKIT (ANALIZE)

Google PageSpeed Tools

Chrome Developer Tools

TOOLKIT (CREATION)

CASE STUDY

WOW SCHOOL

Initial Mobile Score

Initial Desktop Score

3.9 MB - 2.01s

(fast internet connection)

Image minification

gulp-imagemin

tinypng.com

-69% (~4MB)

After image minification

separator.PNG (congratulations Maciek)

After image minification(2)

1.2 MB - 1.01s

CONNECTION TIMELINE

DNS
Lookup

TCP
Connection

SSL

Negotiation

Request

CONNECTION TIMELINE

DNS
Lookup

TCP
Connection

SSL

Negotiation

Request

100ms

100ms

100-200ms

100ms

IN THE BEST CASE: 400 MILISECONDS

RESOURCE HINTS

DNS-PREFETCH

<link rel="dns-prefetch" href="//example.com">

- useful for external resources/CDNs

- great for google fonts, analytics etc.

PRECONNECT

<link rel="preconnect" href="http://EXAMPLE.com">

- DNS lookup
- TCP handshake  
- TLS negotiation (optional)

PREFETCH

<link rel="prefetch" href="image.png">

- requests and downloads that asset and stores it in the cache.

PRERENDER

<link rel="prerender" href="mynextpage.html">

- heavy weapon :)

- loads and renders webpage in the background

CSS minification

- all files merged into one file

- minified

- with a little help of gulp (and its plugins)

CSS minification

gulp.task('css', function() {
    return gulp.src('./app/scss/main.scss')
        .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")})) 
        .pipe(sass())  
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(minifyCss())
        .pipe(gulp.dest('./public/css'))
        .pipe(plugins.livereload())
        .pipe(notify("CSSs ok"));
}); 

JS minification

gulp.task('javascripts', function() {
    return gulp.src('./app/js/*.js') 
        .pipe(concat('javascripts.js'))
        .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")})) 
        .pipe(uglify())
        .pipe(gulp.dest('./public/Scripts/'))
        .pipe(plugins.livereload())
        .pipe(notify("JavaScripts ok"));
});

Do you really need comlete bootstrap package?

@import "./../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables";
$grid-gutter-width: 30px;

$container-large-desktop: 1110px + $grid-gutter-width;
$container-lg:  $container-large-desktop;

@import "./../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_responsive-visibility";
@import "./../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-utilities";
@import "./../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_clearfix";
@import "./../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid-framework";
@import "./../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_grid";
@import "./../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_grid";

Just the grid

Do you really need comlete bootstrap package?

@import "./../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

Whole package

Do you really need a complete bootstrap package?

async & defer

<script>

async & defer

<script async>

async & defer

<script defer>

Unblock the css

Unblock the css

<style type="text/css">
.header__cover {
  height: 50vh;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  min-height: 250px;
  position: relative;
}
.header__placeholder {
  height: 107px
}
@media (max-width:991px) {
  .header__placeholder {
    height: 1px
  }
}
.header__menu {
  position: relative;
  background: #fff;
  z-index: 100;
  height: 95px;
  transform: translate3d(0, 0, 0);
  outline: transparent solid 1px
}
@media (max-width:991px) {
  .header__menu {
    position: fixed;
    top: 0;
    width: 100%;
    height: 58px;
    border: 1px solid #e1e1e1
  }
}
</style>

Unblock the css

</body>
</html>
<link rel="stylesheet" href="/css/main.css">

(pretty) Final results

(pretty) Final results

(Metaforma's internet connection)

(fast internet connection)

WHY DO WE NEED TO OPTIMIZE OUR WEBSITES?

Better UX

Happier user

$$$