diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index a58178eaef7d2f92c642761a91090c6cd6b354b5..4c2cb83ffb3f510f4971e9ccbdd10472d676b2bb 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -250,11 +250,11 @@ export default {
     async postRender() {
       const eventsForThisFile = [];
 
-      if (this.isFirstFile) {
+      if (this.isFirstFile || this.viewDiffsFileByFile) {
         eventsForThisFile.push(EVT_PERF_MARK_FIRST_DIFF_FILE_SHOWN);
       }
 
-      if (this.isLastFile) {
+      if (this.isLastFile || this.viewDiffsFileByFile) {
         eventsForThisFile.push(EVT_PERF_MARK_DIFF_FILES_END);
       }
 
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index a70c907314ba7e15baf6d6937869d9de0941d0f1..c6937c4f207d17ec44bfcd223da5981edaaa14cb 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -112,6 +112,8 @@ export const fetchFileByFile = async ({ state, getters, commit }) => {
     ? getters.flatBlobsList.find(({ fileHash }) => fileHash === id)
     : getters.flatBlobsList[0];
 
+  eventHub.$emit(EVT_PERF_MARK_DIFF_FILES_START);
+
   if (treeEntry && !treeEntry.diffLoaded && !getters.getDiffFileByHash(id)) {
     // Overloading "batch" loading indicators so the UI stays mostly the same
     commit(types.SET_BATCH_LOADING_STATE, 'loading');
diff --git a/spec/frontend/diffs/components/diff_file_spec.js b/spec/frontend/diffs/components/diff_file_spec.js
index 79cd25087572049afe1d886e5da37fbb5e2b53e7..8552e69012bc7902dd75a53439ee7c2b2215b0fe 100644
--- a/spec/frontend/diffs/components/diff_file_spec.js
+++ b/spec/frontend/diffs/components/diff_file_spec.js
@@ -166,6 +166,23 @@ describe('DiffFile', () => {
           });
         },
       );
+
+      it('emits the "first file shown" and "files end" events when in File-by-File mode', async () => {
+        ({ wrapper, store } = createComponent({
+          file: getReadableFile(),
+          first: false,
+          last: false,
+          props: {
+            viewDiffsFileByFile: true,
+          },
+        }));
+
+        await nextTick();
+
+        expect(eventHub.$emit).toHaveBeenCalledTimes(2);
+        expect(eventHub.$emit).toHaveBeenCalledWith(EVT_PERF_MARK_FIRST_DIFF_FILE_SHOWN);
+        expect(eventHub.$emit).toHaveBeenCalledWith(EVT_PERF_MARK_DIFF_FILES_END);
+      });
     });
 
     describe('after loading the diff', () => {