Issue
When a video is added to the page and the page is refreshed, the video gets loaded multiple times which is ultimately impacting the performance of the page.
Steps to reproduce:
1. Go to Documents and Media and add a video.
2. Copy the path of the video.
3. Now create a fragment and add the below tag:
<video id="myVideo" src="/documents/d/guest/password_change?download=false" autoplay="autoplay"
muted="" loop="" playsinline="" preload="auto"
aria-label="Born Big, Born Global">
<track src="/documents/d/tepl/aboutus" kind="captions" srclang="en"
label="english_captions">
</video
4. ‘src’ should be the path of the video as performed in Step2.
5. Publish the fragment.
6. Click on the 3 dots available beside the fragment name and click on the option "Mark as cacheable".
7. Now create a page and add the fragment name to this page.
8. Refresh the page and inspect.
9. Go to network, add filter for media and enable 'Disable Cache'.
10. It is seen that the video is getting loaded multiple times when the user navigate to the newly created page from another page.
Here is the attached video showcasing the reported behavior.
Actual Result: On page refresh or page navigation, multiple requests can be seen in the Network tab which is impacting the page performance.
Expected Result: On page refresh or page navigation, there should not be multiple requests.
Environment
- Liferay DXP [All versions]
Resolution
Below mentioned are the 2 workarounds:
Scenario 1: Exclude the page containing the video from SPA processing
- Provide the path of the page (For example: /testing) containing the video in Control Panel > System Settings > Infrastructure > Frontend SPA Infrastructure > Custom Excluded Paths.
- Disable the option 'Disable cache' from the browser inspect window.
- Enable the option “Mark as cacheable“ under Fragments.
Scenario 2: Disable SPA globally
- Turn off the SPA by applying the property javascript.single.page.application.enabled = false in portal-ext.properties file.
- Disable the option 'Disable cache' from the browser inspect window.
- Enable the option “Mark as cacheable“ under Fragments.