How We Build NG-MY Websites: Performance, SEO, CI, CD (Thai version)

Building a Fast & SEO Friendly SPA
ng-my.org

เดี๋ยวกอน, อยาเพิ่งหลับ!!!

@JecelynYeen
Software Architect
Google Developer Expert
- Angular
- Web Technologies
Organizer
- NG-MY 2019
- Women Who Code KL

➔ Background
➔ Search Engine Optimization (SEO)
➔ Collaboration
➔ Performance

ของฟรี!!!
พวกเราถูกใจสิ่งนี้!!

Single Page App
(SPA)
Firebase Hosting
(Free)
NoDB
(JSON)
Start with Blank
(Angular CLI)

ng new --createApplication false
ng generate application site2019
Create blank workspace
Generate an application
under the project

<title>July 06-07 | NG-MY 2019</title>
<meta name="description" content="NG-MY 2019...">
<meta property="og:url" content="https://2019.ng-my.org/" />
<meta property="og:description" content="NG-MY 2019...">
<meta property="og:type" content="website" />
<meta property="og:title" content="..." />
<meta property="og:image" content="img.png" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="img.png">
Title tag & Meta tags are
essential for SEO

export class PageService {
}
Utilize the built-in
Title & Meta Service
Set page title
Update meta tag
Inject title & meta services
constructor(private title: Title, private meta: Meta) {}
setPageMeta(title: string, metaDesc: string, metaImg: string) {
this.title.setTitle(title);
this.meta.updateTag({ property: 'og:title', content: title });
this.meta.updateTag({ name: 'description', content: metaDesc });
this.meta.updateTag({ name: 'twitter:image', content: metaImg });
...
}

Dev
(No crawling)
Prod
(Allow crawling)
Robots.txt - To crawl or not to crawl?
robots.txt robots.prod.txt

...
"architect": {
"build": {
"assets": [
...,
"projects/site2019/src/robots.txt"
]
...
}
}
angular.json
Include robots.txt as
output assets

"configurations": {
"production": {
"fileReplacements": [
...
{
"replace": "projects/site2019/src/robots.txt",
"with": "projects/site2019/src/robots.prod.txt"
}
]
}
}
Replace file in angular.json
Environment name
Replace when env = production
ng build -c production, or
ng build --prod

ทําไมมันไม
เวิรควะ?!!

SEO Problem in SPA
<html>
<head>
<script src="bundle.js">
</head>
...
</html>
Server sends HTML to Client
(No meta tags)
<html>
<head>
<title>home</title>
<meta ...>
<script src="bundle.js">
</head>
...
</html>
Client executes JS and add
title & meta tags (too late!)
Most
crawlers
only
understand
this. :(

Solution
Prerendering during
build time

Solution: Prerendering during build time
ng build --prod
Generate index.html, js,
css, etc files
Open browser
Browse & Save each
route as .html
Deploy all files to
server
Generate static html pages =
Prerendering

ng build --prod
css, etc files
Open browser
Browse & Save each
route as .html
Deploy all files to
server
Automate Prerendering
using Puppeteer

Puppeteer - Programmable Chrome Browser
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
})();
const fs = require('fs').promises;
await fs.writeFile('food.html', html, 'utf-8');
await browser.close();
await page.goto('https://ng-my.org/food',
{ waitUntil: 'networkidle2'});
const html = await page.content();

ng build --prod
css, etc files
Program Puppeteer
Browse & Save each
route as .html
Deploy all files to
server
Extend Angular CLI Webpack
to prerender

Extend Angular CLI Webpack to handle Prerendering
npm install -D
@angular-builders/custom-webpack
npm install -D
prerender-spa-plugin
Webpack Plugins to
Prerender with Puppeteer
https://github.com/meltedspark/angular-builders
https://github.com/chrisvfritz/prerender-spa-plugin

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const routes = ['/food', '/team', '/speakers', ...]
module.exports = {
plugins: [
new PrerenderSPAPlugin({
staticDir: 'dist/site/2019',
routes
})]
}
extra-webpack.config.js
Update angular.json
to use this custom webpack file

Sitemap is still necessary
https://support.google.com/webmasters/answer/156184?hl=en

Solution: Generate Sitemap Automatically
ng build --prod
css, etc files
Deploy all files to
server
Generate sitemap.xml
to do so

Extend Angular CLI for Sitemap Generation
npm install -D
create-file-webpack
https://github.com/Appius/create-file-webpack
Webpack plugin to
create file (any format)

const CreateFileWebpack = require('create-file-webpack');
const routes = ['/food', '/team', '/speakers', ...]
module.exports = {
plugins: [
new CreateFileWebpack({
path: 'dist/site2019',
fileName: 'sitemap.xml',
content: generateSitemap(routes)
})]
}
extra-webpack.config.js
Our custom method to
generate sitemap
https://github.com/chybie/ng-my/blob/master/
projects/site2019/extra-webpack.config.js

_Jenning Ho_
_Jecelyn
Yeen_
_Adrian Yeong_

➔ Work together & independently
➔ Mandatory Code Linting
➔ Continuous Integration &
Deployment (CI/CD)

Flow
Feature Branch Local Commit Trigger Linting
During development...
Automate with Husky

Husky - Git Hook Made Easy
npm install -D husky
// package.json
{
"husky": {
"hooks": {
"pre-commit": "ng lint"
}
}
}

Flow
Create PR PR Approved
Merge to
Master Branch
Trigger Build Trigger Deployment
Complete feature development
Automate with Travis CI
(free for public project)

.travis.ymllanguage: node_js
node_js:
- '10'
cache:
directories:
- node_modules
- .firebase
branches:
only:
- master
before_script:
- npm install -g firebase-tools
script:
- yarn deploy --token $FIREBASE_TOKEN
Only run in master
Install Firebase Tools
Lint, Build & Deploy to Firebase

โหลดเว็บชา...

Page Speed matters
to SEO Page Ranking
https://webmasters.googleblog.com/2018/01
/using-page-speed-in-mobile-search.html

http://bit.ly/mobile-page-weight
Page Weight (Mobile)

Measure Page Performance
Lighthouse | PageSpeed Insights | Web Page Test

➔ Images
➔ Fonts
➔ Angular & JavaScript
➔ CSS
➔ Others

5MB
Images a page
😳😳😳
Data Plan

NPM: https://www.npmjs.com/package/svgo
UI: https://jakearchibald.github.io/svgomg/
Optimize SVG with
SVGOMG
32kb -> 2kb

WebP Images are 25-35% smaller
than equivalent JPEG 0r PNG.

78% Global User
WebP Has arrived
Based on data from caniuse
Source: bit.ly/webp-support

.png - 119 kb
.webp - 28 kb
.png - 278 kb
.webp - 30 kb

Serve WebP and
support browsers
<picture>
<source srcset="teh-tarik.webp" type="image/webp">
<img src="teh-tarik.png">
</picture>
Image container If browser
supports WebP
Else PNG it is

Lossy Image
For most images, 80-85% quality will
reduce file size by 30-40% with
minimal effect on image quality

495 kb 180 kb (80% quality)
Lossy Image

Image in desktop & tablet can be
~2-4x larger than mobile
28 kb
12 kb

Serve different
image sizes
<picture>
<source media="(max-width: 800px)"
srcset="teh-tarik-800w.webp" type="image/webp">
<source srcset="teh-tarik.webp" type="image/webp">
<img src="teh-tarik.png" >
</picture>
Small screen and if
browser supports WebP
https://developer.mozilla.org/en-US/docs/Learn/HTML/
Multimedia_and_embedding/Responsive_images

squoosh.app
resize, compress, format
Or automate with these npm packages:
imagemin, sharp, jimp

Performant Images
➔ Appropriate format
➔ Appropriate compression
➔ Appropriate display size

Display Font Immediately
By default, if a font is not loaded,
The browser will hide text for up to:

Flash of Unstyled
Text (FOUT)
@font-face {
font-family: Source Sans Pro', sans-serif;
src: url('...') format('woff');
font-display: swap;
} Display unstyled text until
font loaded
.5s improvement in
“Visual Complete” on 3G

fonts.googleapis.com/css?family=Source+Sans+Pro
&display=swap

fonts.googleapis.com/css?family=Source+Sans+Pro
:400,600,900
Limit font weights
https://www.smashingmagazine.com/2019/06/o
ptimizing-google-fonts-performance/

Font import
<head>
<link href="https://fonts.googleapis..." rel="stylesheet">
</head>
Eliminate render blocking
above the fold
<body>
...
<style>
@import "//fonts.googleapis...";
</style>
</body>
<head>
<link href="https://fonts.googleapis..." rel="stylesheet">
</head>

If we are using only 10 icons,
why should we load 100 other
icons?

Lazy Loading
Traditional SPA
- big-bundle.js (60kb)
Split & Lazy Load
- route-speakers.js (20kb)
- route-food.js (20kb)
- route-schedule.js (20kb)
- ….

Lazy Loading
1-2 pages per module
const routes: Routes = [
{
path: 'speakers',
loadChildren: () =>
import('./speakers/speakers.module')
.then(m => m.SpeakersModule)
},
...
];
Latest Angular
version 8 syntax

OnPush improves performance by
minimizing change detection

Change detection
@Component({
selector: 'my-root',
...
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
}
Change detection
perform only when the
component have
received different inputs

Defer JavaScript
<script>
<script defer>
HTML parsing
HTML parsing paused
Script download
Script execution

Defer Google Tag Manager
<script defer
src="https://www.googletagmanager.com/gtag/js?id=xxx">
</script>
<script>
...
</script>
Defer it
Reduction of
domComplete time

Minimize global css
Move to component css

{
"hosting": {
"headers": [{
"source": "**/*.@(js|css|jpg|jpeg|gif|png|webp|svg)",
"headers": [{
"key": "Cache-Control",
"value": "max-age=31536000"
}]
}],
...
},
}
Efficient cache
(firebase.json)
js, css, images
longer cache

Performance Optimization we get for FREE!
➔ Minification & Uglify (CLI)
➔ Ahead of Time Compilation (CLI)
➔ GZIP (Firebase)
➔ Differential Loading (CLI)

Smaller apps
with
Differential
Loading
Evergreen
Legacy
Minimal polyﬁll
Modern syntax
Full polyﬁll
ES5 syntax

Thank you!
Follow @JecelynYeen
github:
https://github.com/chybie/ng-my
slides:
https://bit.ly/ng-my-site

How We Build NG-MY Websites: Performance, SEO, CI, CD (Thai version)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to How We Build NG-MY Websites: Performance, SEO, CI, CD (Thai version)

Similar to How We Build NG-MY Websites: Performance, SEO, CI, CD (Thai version) (20)

More from Seven Peaks Speaks

More from Seven Peaks Speaks (20)

Recently uploaded

Recently uploaded (20)

How We Build NG-MY Websites: Performance, SEO, CI, CD (Thai version)