---
title: 'How to make your website look Great'
disqus: hackmd
---

Make Your Website Looks Perfect on Web Page Performance Tester
===


## Table of Contents

[TOC]

## Requirements

1. Tester URL: https://www.webpagetest.org/
2. **Enterprise Plan** on mlytics MCDN
3. Domain name:
a. https://mlytics.bentech.site
b. https://bentech.site/test.html

Objectives
---

In this project, we will setup the domain name which has a bad scores on the *Web Page Tester* so that it can be outperform. Our main focus are:
1. Security score
2. First Byte Time
3. Cache Static Content
4. Efective use of CDN
5. *Additional:* Compress Image

Security Score
---
The security score for this *Web Page Tester* are based on [snyk.io](https://snyk.io/) vulnerability test. This tester will check whether or not the security header are enabled on the website. The header that will be checked like:
1. [Strict Transport Security](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security)
2. [X Content Type Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options)
3. [X Frame Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options)
4. [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
5. [X XSS Protection](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-XSS-Protection)

There are two ways to to enable those header. First, we can enable it from server. Second, we can enable it through mlytics WAF. In this project, we will set the edge rule on mlytics WAF to enable those headers. The header and value that will be put on the edge are:

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
Content-Security-Policy: policy
X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
X-XSS-Protection: 1


First Byte Time
---
For this *Web Page Tester*, [**First Byte Time**](https://en.wikipedia.org/wiki/Time_to_first_byte) is the time to First Byte for the page (back-end processing + redirects) a.k.a TTFB.
Because the first page that will be load is the landing page, caching the landing page will help to improve this score.
The score will be calculated by the target time which is the time needed for the DNS, socket and SSL negotiations + 100ms. A single letter grade will be deducted for every 100ms beyond the target.

**Landing Page Caching Comparison:**

| Without Caching | With Caching |
|:------------------------------------:|:------------------------------------:|
|  |  |

Cache Static Content
---
The score in this section will be counted based on Cache-Control Header that contains "Expires" or "Max-Age" on any non-html object with a mime type of ``text/*``, `*javascript*` or `image/*`. An "Expires" header is present (and is not 0 or -1) or a "cache-control: max-age" directive is present and set for an hour or greater. If the expiration is set for less 7 days you will get a warning. If the expiration is set for less than 1 hour you will get a failure. This only applies to max-age currently.

To makes this score better, simply just set up the max-age or expires on cache-control with the value larger than an hour on all static content. In this project, the header set as:

#equal to 28 days
Cache-Control: max-age=2419200

To match all static content, this project is using regular expression:

#this regex will match all file with extension: .png, .svg, .woff2, .css, .js, .jpg, .gif
*\.(png|svg|woff2|css|js|jpg|gif)$


Efective use of CDN
---
This section checks to see if the website is hosted on a known CDN (CNAME mapped to a known CDN network).

If you are currently using a CDN but this section shows you are not, then most likely because your CDN cname could not be found on the checker library. You could check it in [here](https://github.com/WPO-Foundation/wptagent/blob/master/internal/optimization_checks.py#L48).

If you really care about this result, just simply re-route using static route from the mlytics console to other CDN. If still not working, you may consider to disable cname flattening for awhile.

Compress Image
---
To make the result better, you just need to enable "Compress Content" feature from CDN Management.

For your information, CDN **cannot** compress all types of file. For example, [CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html) only will compresses these following types:

application/dash+xml

application/eot

application/font

application/font-sfnt

application/javascript

application/json

application/opentype

application/otf

application/pkcs7-mime

application/protobuf

application/rss+xml

application/truetype

application/ttf

application/vnd.apple.mpegurl

application/vnd.mapbox-vector-tile

application/vnd.ms-fontobject

application/xhtml+xml

application/xml

application/x-font-opentype

application/x-font-truetype

application/x-font-ttf

application/x-httpd-cgi

application/x-javascript

application/x-mpegurl

application/x-opentype

application/x-otf

application/x-perl

application/x-ttf

font/eot

font/opentype

font/otf

font/ttf

image/svg+xml

text/css

text/csv

text/html

text/javascript

text/js

text/plain

text/richtext

text/tab-separated-values

text/xml

text/x-component

text/x-java-source

text/x-script

vnd.apple.mpegurl

However, this website checker also will check the **image** file type. In this case, you only could enable it on the upstream server to improve the scores.
In example: enable gzip for image type on nginx. From `/etc/nginx/nginx.conf` add these following configuration

gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types image/gif image/jpeg text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

After that restart the nginx and you'll be able to see the image file type on your website will has "content-encoding" header which is the header that will be checked on this website checker.

| With Compression | Without Compression |
|:------------------------------------:|:------------------------------------:|
|  |  |

###### tags: `information` `Documentation`