How We Build NG-MY Website

How We Build ng-my.org

Don’t fall asleep yet!

_Jenning Ho_ _Jecelyn Yeen_ _Adrian Yeong_

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

6 Background

Free stuff!! I love that!

Target: Cost $0

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

ng add @angular/fire ng deploy site2019 Add deploy feature Build
& deploy

Rapid Prototyping with (free)

13 Search Engine Optimization

<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

SPA & SEO Can we have both?

Why is it not working!!!

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

Brief: Angular CLI Build Process ng build --prod Generate &
Optimize files - js, css, etc Generate index.html Webpack Index transform We can extend & customize these!

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

Optimize files - js, css, etc Deploy all files to server Automate Prerendering using Puppeteer Generate index.html Program Puppeteer Browse & Save each route as .html

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();

Optimize files - js, css, etc Program Puppeteer Browse & Save each route as .html Deploy all files to server Generate index.html Extend Angular CLI to customize this step Find an even easier library to help us!

Extend Angular CLI Webpack to handle Prerendering npm install -D
@angular-builders/custom-webpack npm install -D prerender-xs Extend Angular CLI Library to prerender with Puppeteer https://github.com/just-jeb/angular-builders https://github.com/chybie/prerender-xs

const Prerenderer = require('prerender-xs'); const routes = ['/food', '/team', '/speakers',
...]; module.exports = async (targetOptions, indexHtml) => { const data = await Prerenderer.render({ staticDir: 'dist/site2019', routes, indexHtml }); return data.find(x => x.route === '/').html; } index-html-transform.js Update angular.json to use this custom file

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

Solution: Generate Sitemap Automatically ng build --prod Generate & Optimize
files - js, css, etc Deploy all files to server Generate sitemap.xml Extend Angular CLI Webpack to do so Generate index.html

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

Monitor Site SEO

37 Collaboration

➔ 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 Github actions (beta)

.github/workflows/ main.yml name: CI on: push: branches: - master jobs:
build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v1 - uses: actions/setup-node@v1 with: node-version: 12.8 - run: npm install - run: npm run lint - run: npm run deploy env: FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }} Only run in master Lint, Build & Deploy to Firebase

43 Performance

Feeling of browsing slow website...

Pleasant Browsing Experience

Page Speed matters to SEO Page Ranking

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

Measure Page Performance Lighthouse | PageSpeed Insights | Web Page
Test

➔ Images ➔ Fonts ➔ Angular & JavaScript ➔ CSS
➔ Effortless

Images

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 (867B gzip)

Like PNG but smaller

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 Supported Supported Supported

.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

Image Compression

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

Responsive 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

Native lazy loading Defer fetching offscreen images / iframes until
a user scrolls near them. Load when scrolling down

Performant Images ➔ Is Lazy ➔ 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?

icomoon.io 13 icons - 3.7kb

Angular & JavaScript

If only we could snap and destroy half the files...

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

Effortless

Cache Static Assets

{ "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) ng build --prod

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

-Guess the result!-

651 kb 469 kb Result

95 Techniques

➔ CMS Markdown ➔ Utilize ng-template ➔ Embed Google Forms
➔ CSS Variables ➔ CSS Grid

CMS Markdown

npm install marked Markdown Parser

this.selectedPost.content = marked.parse(result); const result = await fetch(`post-01.txt`) .then(res =>
res.text()); ![picture](banner.jpg) Let’s make it happen LAH. Are you coming? 5 (+1) reasons why you should! ### 1. Enjoy incredible talks NG-MY provides you... post-page.component.ts post-01.txt

Utilize ng-template

Repeated Day Schedule

Should we extract it to a new child component?

Not really, because it is only used within this component.
We can use ng-template.

<ng-template let-title="title" let-list="day" #schedule> <section> <h2>{{ title }}</h2> <div *ngFor="let
schedule of list"> ... </div> </section> </ng-template> Input variables Template reference Create ng-template (schedule-page)

<section> <ng-container [ngTemplateOutlet]="schedule" [ngTemplateOutletContext]="{ day: day1, title: 'Day 1' }">
</ng-container> </section> Template reference Assign variable values Use ng-template (schedule-page) … <section> <ng-container [ngTemplateOutlet]="schedule" [ngTemplateOutletContext]="{ day: day2, title: 'Day 2' }"> </ng-container> </section> Reuse, pass in day 2 schedule

Embed Google Forms

iframe (responsive!)

CSS Variables

Color fades in Color fades out Shadow increases

You don’t even notice, DON’T YOU??!

:root { --hero-scroll: 0; } global.css .menu { opacity: var(--hero-scroll);
} menu.component.css .bg:before { opacity: calc(1 - 1 * var(--hero-scroll)); } .bg { opacity: calc(0.3 + 0.4 * var(--hero-scroll)); } home.component.css

@HostListener('window:scroll', ['$event']) onScroll(e) { const opacityValue = ...; // calculation
document.documentElement.style.setProperty( '--hero-scroll', `${opacityValue}` ); } menu.component.ts Update CSS Variables Listen to scroll

Can I Use 91.11% IE Edge Firefox Chrome Safari 11
18 67 75 12.1

CSS Grid

CSS Grid Collage

Define grid template 5 columns, 12 rows size = 1
col size = 2 cols size = 2 rows, 2 cols

.container { display: grid; grid-template-columns: repeat(5,200px); grid-template-rows: repeat(12,200px); grid-auto-flow: row
dense; } 5 columns 12 rows Auto placement algorithm No. of rows and columns different based on screen size (media queries)

How auto placement algorithm works? dense = fill the holes
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

.photo:nth-child(1) { grid-row: span 2; grid-column: span 2; } Define
how many rows & columns each photo take/

These are CSS Grid as well!

Can I Use 92.03% IE Edge Firefox Chrome Safari 11
18 67 75 12.1

Thank you! Follow @ngmykia (Instagram, Facebook) github: https://github.com/chybie/ng-my slides: https://bit.ly/ng-my-site
video: https://youtu.be/6l779_V4LV8

How We Build NG-MY Website

How We Build NG-MY Website

More Decks by Jecelyn Yeen

Other Decks in Programming

Featured

Transcript