Umbraco Poland Festival
@maciejkorsan
Maciej Korsan
FACEBOOK - PROGRAMISTOK
FOLLOW ME: @maciejkorsan
touch
hearing
smell
sight
taste
Who thinks that 300ms is a really long time?
LIVING WITH LAG
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
WHAT CAN A FRONTEND DEVELOPER DO?
Google PageSpeed Tools (https://developers.google.com/speed/pagespeed/)
Chrome Developer Tools
56k modem
(THAT sound <3)
Google PageSpeed Tools
Chrome Developer Tools
GULP
SCSS
VARIOUS PLUGINS FOR GULP
WOW SCHOOL
Initial Mobile Score
Initial Desktop Score
(fast internet connection)
gulp-imagemin
tinypng.com
-69% (~4MB)
separator.PNG (congratulations Maciek)
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
- all files merged into one file
- minified
- with a little help of gulp (and its plugins)
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"));
});
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"));
});
@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
@import "./../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
Whole package
168KB
(with bootstrap)
62KB
(with bootstrap - just the grid)
<script>
<script async>
<script defer>
<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>
</body>
</html>
<link rel="stylesheet" href="/css/main.css">
(pretty) Final results
(pretty) Final results
(Metaforma's internet connection)
(fast internet connection)
Why do ghosts love elevators?
Why do ghosts love elevators?
Because they lift their spirits
FOLLOW ME: @maciejkorsan