Scribd Logo
Upload

Welcome to Scribd!

  • SiteSpeed Improve Guidelines - ToDO

    Uploaded by

    Lê Văn Phú
    79 views6 pages
    201906_SiteSpeed Improve Guidelines - ToDO

    Original Title

    201906_SiteSpeed Improve Guidelines - ToDO

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    201906_SiteSpeed Improve Guidelines - ToDO

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    79 views6 pages

    SiteSpeed Improve Guidelines - ToDO

    Uploaded by

    Lê Văn Phú
    201906_SiteSpeed Improve Guidelines - ToDO

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    TODO

    Frontend sitespeed improvements

    Created by: mai_tan@rivercrane.com


    Created date: 2019/06/19

    According to Google's PageSpeed Insights Rules, there are 2 main parts to optimize page load speed.
    Ref: https://developers.google.com/speed/docs/insights/rules?hl=en

    I. Server side tuning techniques

    1 Avoid landing page redirects


    Fix all 302, 301 redirects
    2 Improve application and server configuration to reduce server response time
    Reduce heavy logic
    Use faster data engine (like Cache techniques, Solr, Elastic Search...)
    Reduce I/O and network delays
    3 Optimize and compress images files
    Optimizing vector images
    Use progressing JPEG
    Selecting the right image size and format for each display area
    4 Enable server compression (gzip)
    Apache: mod_deflate http://httpd.apache.org/docs/current/mod/mod_deflate.html
    Nginx: ngx_http_gzip_module http://nginx.org/en/docs/http/ngx_http_gzip_module.html
    IIS: HTTP Compression http://technet.microsoft.com/en-us/library/cc771003(v=WS.10).aspx
    5 Leverage content cache time

    II. Rendering tuning techniques

    CSS Please keep in mind that for this to improve your loading time, you must optimize CSS delivery.
    JS By default all JavaScript is parser blocking.
    The browser must pause to wait for the script to be fetched from disk, cache, or a remote server,
    which can add tens to thousands of milliseconds of delay to the critical rendering path
    You should avoid and minimize the use of blocking JavaScript, especially external scripts that must be fetched before they can be executed.

    Must read and understand Critical Rendering Path before continiue.


    https://developers.google.com/web/fundamentals/performance/critical-rendering-path/?hl=en

    In short, you should follow these 10 rules of optimization to speed up page rendering:

    1 Enable resource preloading


    2 Enable meta rel="dns-prefetch" and rel="preconnect"
    3 Fix render blocking
    4 Optimize style tags
    5 Optimize script tags
    6 Optimize img tags
    7 Optimize iframe tags
    8 Optimize background images
    9 Add missing meta
    10 Minify output HTML

    ■ Rule 01: Enable resource preloading

    We CARE: - All external JS files in target page (except async request such as gtm.js, analytics.js or js files from social widgets)
    - All external CSS files in target page (except css files which are loaded after browser's load event)
    - All external open font files in target page (only most important one, such as fontawesome icons)

    We DON'T CARE: - All external widget files (Social widgets, Twitter iframes, Facebook scripts, Google Ads etc...)
    - All files that are loaded AFTER the load event (the blue line in below graphic)

    1
    TODO

    What we DO: https://developers.google.com/web/updates/2016/03/link-rel-preload


    - Gather all target resource files
    - Preload resources using <link rel="preload"> tag.
    - Put all <link rel="preload"> tags as early in the open <head> as possible

    Example:
    For CSS <link rel="preload" href="used-later.css" as="style">
    For JS <link rel="preload" href="used-later-javascript.js" as="script">

    Notice:
    - Should not put too much <link rel="preload"> tags, putting under 20 tags is recommended
    - The file path must be the same path with the file is used in the page (include URL parameters after '?' sign)
    E.g: https://img.webike.net/css/header_nossl.css?v=2.0
    ↓
    <link rel="preload" href="https://img.webike.net/css/header_nossl.css?v=2.0" as="style">

    ■ Rule 02: Enable meta rel="dns-prefetch" and rel="preconnect"

    We CARE: - All external domains that the resources in the page come from

    We DON'T CARE: - All files that are loaded AFTER the load event

    We can use webpagetest.org site to check all domains used in a web page. Like the graphic below:

    2
    TODO

    What we DO: https://developers.google.com/web/fundamentals/performance/resource-prioritization?hl=en


    - Use <link rel="preconnect"> tag to establish a connection to another origin
    - Use <link rel="dns-prefetch"> tag to reduce DNS resolve time from browser to external origin

    Example:
    <link rel="dns-prefetch" href="https://img.webike.net">
    <link rel="preconnect" href="https://img.webike.net" crossorigin="anonymous">

    Notice:
    - Define both preconnect and dns-prefetch tags for each domain
    - We do not need to preconnect to the same domain of the page because it has been already established
    - Keep amount of preconnect and dns-prefetch under 10 domains

    ■ Rule 03: Fix render blocking

    We CARE: - If your HTML loads third-party widgets before it loads the main content, change the order to load the main content first
    - If your site uses a two-column design with a navigation sidebar and an article, consider loading the main column before the sidebar
    - Consider using CSS instead of images where possible

    We DON'T CARE: None

    What we DO: https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent?hl=en


    - All content inside <noscript> tag should be placed inside the <body> tag
    - Move all <style> <link rel="stylesheet"> to the <head> tag, remove the duplicate files and preserving their order
    - Move all <script> tags to the end of the <body>, remove the duplicate scripts and preserving their order
    - Reduce HTML tags and element structure for simpler DOM tree rendering
    - Structure your HTML to load the critical, above-the-fold content first
    - Reduce HTML, CSS, and JavaScript. They can be minified by removing unnecessary whitespace and comments.
    - Consider using CSS instead of images where possible (E.g: use CSS gradient instead of a PNG file for gradient)
    - Should not send any AJAX request until the page is completely loaded

    Notice:
    This step takes time to re-structure, fix CSS and JS for speed optimization, please test carefully before release.

    3
    TODO

    ■ Rule 04: Optimize style tags

    We CARE: - All <link rel="stylesheet"> tags


    - All <style> tags

    We DON'T CARE: - All external CSS files (Social widgets, Twitter iframes, Facebook scripts, Google Ads etc...)
    - All CSS files that are loaded AFTER the load event

    What we DO: https://www.sitepoint.com/optimizing-css-performance/


    - Consider critical CSS, which is always show in the first view of the page (above the fold elements)
    - Split apply CSS rules for specific devices, screen & page dimensions, orientations, and more
    - Remove unnecessary fonts. Only load the weights and styles you require
    - Avoid @import inside CSS
    NG: /* main.css */
    @import url("base.css");
    @import url("layout.css");
    @import url("carousel.css");

    OK: <link rel="stylesheet" href="base.css">


    <link rel="stylesheet" href="layout.css">
    <link rel="stylesheet" href="carousel.css">

    - Be wary of large CSS frameworks. Use minified version of CSS frameworks.


    - Set default fonts, colors, sizes, tables and form fields that are universally applied to every element in a single place
    - Prevent declare every style in every component
    - Reducing complexity will reduce file sizes and aid browser parsing
    NG body > main.main > section.first h2:nth-of-type(odd) + p::first-line > a[href$=".pdf"]

    - Reduce slow selector and properties. Some properties are slower to render than others
    NG *, ::before, ::after {
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    }

    Slow properties:
    border-radius
    box-shadow
    opacity
    transform
    filter
    position: fixed

    - Reduce CSS3 animations. If use, only apply animation to the elements which will animate.
    - Prefer using SVG graphic rather than JPG and PNG bitmaps
    OK .mysvgbackground {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"><circle cx="400" cy="300"
    }

    - Avoid base64 bitmap images because it does have benefit of using browser cache

    4
    TODO

    NG .myimg {
    background-image: url('data:image/png;base64,ABCDEFetc+etc+etc');
    }

    ■ Rule 05: Optimize script tags

    We CARE: - All <script> tags with external URL


    - All inline <script> tags
    - All inline element's event attributes, like onload, onclick etc...

    We DON'T CARE: - All external JS files (Social widgets, Twitter iframes, Facebook scripts, Google Ads etc...)
    - All JS files that are loaded AFTER the load event

    What we DO: https://www.freecodecamp.org/news/web-optimization-a-secret-world-to-unleash-5fbdf1065945/


    - Understand user-centric performance model (RAIL)
    https://developers.google.com/web/fundamentals/performance/rail?hl=en
    - Be wary of large JS frameworks. Use minified version of JS frameworks such as jQuery
    - Reduce unnecessary animations and effects
    - Reduce inline <script> blocks, move javascript to external files for caching benefits
    - Alway optimize JS code
    - Avoid Synchronous ajax request and show loading
    NG var employee = $.parseJSON(
    $.ajax({
    type: 'POST',
    url: 'get/employee/' + employee_id,
    dataType: "json",
    async: false
    }).responseText
    );

    ■ Rule 06: Optimize img tags

    We CARE: - All external image files in <img> tags


    - All external image files in background image
    - All external URL in <video>, <audio>, <source>, <object> tags

    We DON'T CARE: - All files that are loaded AFTER the load event

    What we DO: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/?hl=en


    - Use lazyload technique for all images, audio and video files in the page
    - Only initialize lazy load after browser's load event for the best result

    Recommended lazyload plugin: (under 1KB)


    shinsenter/defer.js
    https://github.com/shinsenter/defer.js/blob/master/README.md#lazy-an-image-or-a-video

    ■ Rule 07: Optimize iframe tags

    We CARE: - All iframe in the page (including Youtube, Vimeo, Twitter widgets, Facebook widgets, Advertisement)
    - All <embed> tags

    We DON'T CARE: None

    What we DO:
    - Use lazyload technique for all iframe, embed tags in the page
    - Only initialize lazy load after browser's load event for the best result

    Recommended lazyload plugin: (under 1KB)


    shinsenter/defer.js
    https://github.com/shinsenter/defer.js/blob/master/README.md#lazy-an-iframe

    ■ Rule 08: Optimize background images

    We CARE: - All inline <style> tags which contain background url() attribute
    - All inline style attributes which contain background url() attribute

    We DON'T CARE: - base64 background images


    - SVG background images

    5
    TODO

    What we DO:
    - Apply this technique to lazyload style which contains background images
    NG <div data-u="loading" style="
    position: absolute;
    top: 0px; left: 0px;
    background: url('jp_statics/gfs/nossl_css/jssor/loading.gif') no-repeat 50% 50%;
    background-color: rgba(0, 0, 0, 0.7);
    ">
    ...
    </div>

    Fix Using javascript to apply background image for elements when the load event has been fired

    Notice:
    - If the background image is small, preload it using the rule 01 (<link rel="preload">)

    ■ Rule 09: Add missing meta

    We CARE: - Missing lang attribute in <html> tag.


    - Missing <meta charset> tag
    - Missing <meta viewport> tag

    What we DO:
    - Add a <meta viewport> tag if missing
    OK <meta name="viewport" content="width=device-width,initial-scale=1">
    - Add a <meta charset> tag if missing
    OK <meta charset="UTF-8">
    <meta charset="Shift_JIS">
    - Add missing lang attribute in <html> tag
    OK <html lang=”ja”>

    ■ Rule 10: Minify output HTML

    What we DO: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer?hl=en


    - Minify HTML for smaller download size

    You might also like