├── registration.php ├── etc ├── module.xml └── di.xml ├── composer.json ├── README.md ├── view └── adminhtml │ ├── pagebuilder │ └── content_type │ │ └── image.xml │ ├── ui_component │ └── pagebuilder_image_form.xml │ └── web │ └── template │ └── content-type │ └── image │ └── full-width │ └── master.html └── LICENSE.txt /registration.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "zero1/module-pagebuilder-web-vitals", 3 | "description": "Provides functionality to include image dimensions, link labels and lazyload options to image to help improve Google's Web Vitals audits scores", 4 | "type": "magento2-module", 5 | "license": [ 6 | "OSL-3.0", 7 | "AFL-3.0" 8 | ], 9 | "autoload": { 10 | "files": [ 11 | "registration.php" 12 | ], 13 | "psr-4": { 14 | "Zero1\\PageBuilderWebVitals\\": "" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Magento 2 - PageBuilder Web Vitals (With Lazyload Tags) 2 | 3 | For Magento 2.4.3 4 | 5 | ## Description 6 | 7 | Magento's Page Builder is a great core module (as of 2.4.3), which makes it easy to create content-rich pages, but there are a couple of elements that are missing: 8 | 9 | - Image dimensions 10 | - Link labels 11 | - loading="lazy" tags 12 | 13 | Why are these important?... 14 | 15 | Google's Web Vitals audits contain improvement suggestions that help increase both the Performance and Accessibility metrics. The 2 relating to Magento's Page Builder are: 16 | 17 | - Image elements do not have explicit width and height 18 | - Links do not have a discernible name 19 | 20 | **Image elements do not have explicit width and height** 21 | 22 | Once this module is installed, you will have 2 new fields allowing you to add a width and height to each image you upload via Page Builder. Adding these dimensions will ensure that the image you have uploaded will pass the Google Web Vital audit 23 | 24 | **Links do not have a discernible name** 25 | 26 | This is recommended by Google when a tags don't contain text. When adding an image with a link, the a tag only contains an image, but one way to ensure this a tag passes the Web Vitals audit is to add an aria-label tag to the link itself. 27 | Once this module is installed, you will have a new field allowing you to add a label to the link tag which will ensure the link passes the audit. 28 | 29 | Adding image dimensions and link labels will ensure those elements pass the audit, but it can also have a knock on effect that also helps improve your CLS score (Content Layout Shift) 30 | 31 | ## Installation... 32 | 33 | ``` 34 | composer require zero1/module-pagebuilder-web-vitals 35 | ``` 36 | 37 | © Zero-1 Ltd | [www.zero1.co.uk](https://www.zero1.co.uk/) 38 | -------------------------------------------------------------------------------- /view/adminhtml/pagebuilder/content_type/image.xml: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 18 | 19 | 20 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /view/adminhtml/ui_component/pagebuilder_image_form.xml: -------------------------------------------------------------------------------- 1 | 2 | 8 |

9 |

10 | 11 | 12 | Link Description 13 | A detailed description of the link will ensure that Core Web Vitals audits are passed; for example: "Buy now" will fail; whereas "Discover our new range of products" will pass 14 | 15 | true 16 | 17 | 18 | 19 |

20 |

21 | 22 | Core Web Vitals 23 | true 24 | true 25 | 26 | 27 | 28 | Desktop Image Width 29 | 30 | true 31 | 32 | 33 | 34 | 35 | 36 | Desktop Image Height 37 | 38 | true 39 | 40 | 41 | 42 | 43 | 44 | Mobile Image Width 45 | 46 | true 47 | 48 | 49 | 50 | 51 | 52 | Mobile Image Height 53 | 54 | true 55 | 56 | 57 | 58 | 59 | 60 | 61 | 0 62 | 63 | 64 | 65 | boolean 66 | Remove Lazy Loading Tag? 67 | wvstoplazy 68 | 69 | 70 | 71 | 72 | 73 | 0 74 | 1 75 | 76 | toggle 77 | 78 | 79 | 80 | 81 |

82 |

83 | -------------------------------------------------------------------------------- /view/adminhtml/web/template/content-type/image/full-width/master.html: -------------------------------------------------------------------------------- 1 | 7 | 8 |

84 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | ZERO-1 Ltd LICENSE AGREEMENT 2 | 3 | This license agreement (hereinafter agreement) is an agreement Between you (the person or company who is being licensed to use the software or documentation) and ZERO-1 Ltd (hereinafter we/us/our). The agreement applies to all products/software/scripts/services you purchase from us. 4 | 5 | 1. By purchasing the Software you acknowledge that you have read this Agreement, and that you agree to the content of the Agreement and its terms, and agree to use the Software in compliance with this Agreement. 6 | 7 | 2. The Agreement comes into legal force at the moment when you order our Software from our site or receive it through email or on data medium at our discretion. 8 | 9 | 3. We are the copyright holder of the Software. The Software or a portion of it is a copyrightable matter and is liable to protection by the law. Any activity that infringes terms of this Agreement violates copyright law and will be prosecuted according to the current law. We reserve the right to revoke the license of any user who is holding an invalid license. 10 | 11 | 4. This Agreement gives you the right to use the Software on one domain solely for your own personal or business use, subject to all other terms of this Agreement. A separate License must be purchased for each other domain the Software is deployed on. Use of software on multiple domains can result in license revocation. 12 | 13 | 5. Any distribution of the Software without our consent, including non-commercial distribution is regarded as violation of this Agreement and entails liability, according to the current law. A sold License does not include ownership of any original works, part of thereof or any documentation or derivative works of the software. 14 | 15 | 6. You agree that you (your employers/employees/agents) may not use any part of the code in whole or part in any other software or product or website. 16 | 17 | 7. You may not give, sell, distribute, sub-license, rent, lease or lend any portion of the Software or Documentation to anyone. You may not place the Software on a server so that it is accessible via a public network such as the Internet for distribution purposes. 18 | 19 | 8. You are bound to preserve the copyright information intact, this includes the text/link at bottom. 20 | 21 | 9. We reserve the right to publish a selected list of users of our Software. 22 | 23 | 10. We will not be liable to you for any damages (including any loss of profits/saving, or incidental or consequential) caused to you, your information and your business arising out of the use or inability to use this Software. To the maximum extent permitted by applicable law, the cumulative liability of ZERO-1 Ltd for all claims of any nature related to the licensed software or documentation or otherwise arising from this agreement, including any cause of action based on warranty, contract, tort, strict liability patent or copyright infringement or misappropriation of intellectual property, shall not exceed the total amount of all license fees that licensee has actually paid under this agreement. Neither ZERO-1 Ltd nor any of its resellers, suppliers or licensors shall be liable for any consequential, incidental, indirect, special, exemplary or punitive damages, whether in contract, in tort (including negligence) or otherwise, or for any loss of profits, loss of savings, loss of data or loss of user damages arising out of this agreement or the use (or inability to use) of the licensed software even if ZERO-1 Ltd or reseller, supplier or licensor has been aware of the possibility of such potential loss or damage. In no event will ZERO-1 Ltd be liable for any claim brought more than one (1) year after the cause of action arose or should have been discovered. Because some states do not allow the exclusion or limitation of liability for consequential or incidental damages, the above limitation may not apply. Because some states/jurisdictions do not allow the exclusion or Limitation of liability for consequential or incidental damages, the above Limitations may not apply to you. 24 | 25 | 11. We are not liable for prosecution arising from use of the Software against law or for any illegal use. If you fail to use the Software in accordance with the terms and conditions of this License Agreement, it constitutes a breach of the agreement, and your license to use the program is revoked. If you continue to use the Software after ZERO-1 Ltd gives you notice of termination of your license, you hereby agree to accept an injunction to enjoin you from its further use and to pay all costs (including but not limited to reasonable attorney fees) to enforce our revocation of your license and any damages suffered by us because of your misuse of the Software. 26 | 27 | 12. Each party agrees that it shall not disclose any information concerning the customers, trade secrets, methods, processes or procedures or any other confidential, financial or business information of the other party, without the prior written consent of such other party. This obligation shall survive the cancellation or other termination of this Agreement or License. 28 | 29 | 13. We do not collect or store any sensitive business or personal information except that which ensures the purchase of a valid software license. 30 | 31 | 14. Included in the license is free access to our support team for one installation and set-up period, free bug fixing and upgrades for 1 year from the purchase date. We will provide to the customer all reasonably necessary support and help via email, phone, instant messaging 32 | 33 | 15. Except as set forth above, ZERO-1 Ltd is providing the licensed software "as is," and, to the maximum extent permitted by Applicable law, ZERO-1 Ltd specifically disclaims any and all other warranties, conditions or representations (whether express, implied or statutory, or oral or Written) with respect to the licensed software or documentation including Without limitation any and all warranties of merchantability or fitness for a Particular purpose (whether or not ZERO-1 Ltd knows, has reason to know, has been Advised or is otherwise in fact aware of any such purpose) or conditions of Title or non-infringement whether alleged to arise by operation of law, by reason of custom or usage in the trade or by course of dealing. ZERO-1 Ltd also expressly disclaims any express or implied warranty or representation to any person other than licensee. This limited warranty gives you specific legal rights. 16. ZERO-1 Ltd reserves the right to change this license agreement at any time and impose its clauses at any given time. It is solely Customer's responsibility to inquire about any changes, made to the present Agreement 34 | -------------------------------------------------------------------------------- /etc/di.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | iframe 8 | style 9 | pre 10 | div 11 | a 12 | p 13 | span 14 | em 15 | strong 16 | ul 17 | li 18 | ol 19 | h5 20 | h4 21 | h3 22 | h2 23 | h1 24 | table 25 | tbody 26 | tr 27 | td 28 | th 29 | tfoot 30 | img 31 | hr 32 | figure 33 | button 34 | i 35 | u 36 | br 37 | b 38 | aria-label 39 | 40 | 41 | alt 42 | class 43 | data-active-tab 44 | data-appearance 45 | data-autoplay 46 | data-autoplay-speed 47 | data-background-images 48 | data-background-lazy-load 49 | data-background-type 50 | data-carousel-mode 51 | data-center-padding 52 | data-content-type 53 | data-element 54 | data-enable-parallax 55 | data-fade 56 | data-grid-size 57 | data-infinite-loop 58 | data-link-type 59 | data-locations 60 | data-overlay-color 61 | data-parallax-speed 62 | data-pb-style 63 | data-same-width 64 | data-show-arrows 65 | data-show-button 66 | data-show-controls 67 | data-show-dots 68 | data-show-overlay 69 | data-slide-name 70 | data-slick-index 71 | data-role 72 | data-product-id 73 | data-price-box 74 | aria-hidden 75 | data-tab-name 76 | data-video-fallback-src 77 | data-video-lazy-load 78 | data-video-loop 79 | data-video-overlay-color 80 | data-video-play-only-visible 81 | data-video-src 82 | href 83 | id 84 | role 85 | style 86 | target 87 | title 88 | class 89 | width 90 | height 91 | style 92 | alt 93 | title 94 | border 95 | id 96 | aria-label 97 | 98 | 99 | 100 | tabindex 101 | target 102 | rel 103 | href 104 | aria-label 105 | 106 | 107 | src 108 | 109 | 110 | type 111 | 112 | 113 | allowfullscreen 114 | autoplay 115 | frameborder 116 | muted 117 | src 118 | 119 | 120 | data-style-id 121 | 122 | 123 | 124 | 125 | Magento\PageBuilder\Model\Validator\IframeSrcAttributeValidator 126 | 127 | 128 | 129 | 130 | Magento\PageBuilder\Model\Validator\InnerHtmlValidator 131 | 132 | 133 | 134 | 135 | 136 | --------------------------------------------------------------------------------