diff options
Diffstat (limited to 'doc/development/new_fe_guide/development/performance.md')
-rw-r--r-- | doc/development/new_fe_guide/development/performance.md | 48 |
1 files changed, 27 insertions, 21 deletions
diff --git a/doc/development/new_fe_guide/development/performance.md b/doc/development/new_fe_guide/development/performance.md index 50145a5b561..d0c30143eda 100644 --- a/doc/development/new_fe_guide/development/performance.md +++ b/doc/development/new_fe_guide/development/performance.md @@ -1,21 +1,41 @@ # Performance +## Monitoring + +We have a performance dashboard available in one of our [grafana instances](https://dashboards.gitlab.net/d/1EBTz3Dmz/sitespeed-page-summary?orgId=1). This dashboard automatically aggregates metric data from [sitespeed.io](https://sitespeed.io) every 6 hours. These changes are displayed after a set number of pages are aggregated. + +These pages can be found inside a text file in the gitlab-build-images [repository](https://gitlab.com/gitlab-org/gitlab-build-images) called [gitlab.txt](https://gitlab.com/gitlab-org/gitlab-build-images/blob/master/scripts/gitlab.txt) +Any frontend engineer can contribute to this dashboard. They can contribute by adding or removing urls of pages from this text file. Please have a [frontend monitoring expert](https://about.gitlab.com/team) review your changes before assigning to a maintainer of the `gitlab-build-images` project. The changes will go live on the next scheduled run after the changes are merged into `master`. + +There are 3 recommended high impact metrics to review on each page + +* [First visual change](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint) +* [Speed Index](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index) +* [Visual Complete 95%](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index) + ## Lazy loading -Lazy loading is a method we use to improve the time to first render. This feature is built into GitLab. +Lazy loading is a method we use to improve the time to first render. + +```html +<!-- no lazy loading --> +<img src="gitlab.png"> +<!-- lazy loading --> +<img class="lazy" data-src="gitlab.png"> ``` -// no lazy loading -<image src="gitlab.png"> -// lazy loading -<image class="lazy" data-src="gitlab.png"> +The Rails `image_tag` helper will add lazy-loading by default unless `lazy: false` is explicitly provided. + +```haml +# lazy += image_tag "gitlab.png" + += image_tag "gitlab.png", lazy: false ``` Asnchronously loaded content containing lazy loaded images need to instantiate `LazyLoader` and call `searchLazyImages()`. -> Note: The Rails `image_tag` helper will add lazy-loading by default unless `lazy: false` is explicitly provided. - ## Online resources - [WebPage Test][web-page-test] for testing site loading time and size. @@ -30,17 +50,3 @@ Asnchronously loaded content containing lazy loaded images need to instantiate ` [browser-diet]: https://browserdiet.com/ [high-performance-animations]: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ -## Monitoring - -We have a performance dashboard available in one of our [grafana instances](https://dashboards.gitlab.net/d/1EBTz3Dmz/sitespeed-page-summary?orgId=1). This dashboard automatically aggregates metric data from [sitespeed.io](https://sitespeed.io) every 6 hours. These changes are displayed after a set number of pages are aggregated. - -These pages can be found inside a text file in the gitlab-build-images [repository](https://gitlab.com/gitlab-org/gitlab-build-images) called [gitlab.txt](https://gitlab.com/gitlab-org/gitlab-build-images/blob/master/scripts/gitlab.txt) -Any frontend engineer can contribute to this dashboard. They can contribute by adding or removing urls of pages from this text file. Please have a [frontend monitoring expert](https://about.gitlab.com/team) review your changes before assigning to a maintainer of the `gitlab-build-images` project. The changes will go live on the next scheduled run after the changes are merged into `master`. - -There are 3 recommended high impact metrics to review on each page - -* [First visual change](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint) -* [Speed Index](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index) -* [Visual Complete 95%](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index) - -For these metrics, lower numbers are better as it means that the website is more performant. |