From 6521c89caf423e2008dc501bf01278f64115dfaa Mon Sep 17 00:00:00 2001 From: Arthur Frin Date: Sun, 27 Mar 2022 17:17:46 +0200 Subject: [PATCH 1/9] Eliminate render-blocking resource --- dist/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/index.html b/dist/index.html index 876ffa60f..09c1bab79 100644 --- a/dist/index.html +++ b/dist/index.html @@ -9,7 +9,7 @@ - + From 3ba1d9c0202f8dd930852620fc8685a68ac46bd8 Mon Sep 17 00:00:00 2001 From: Arthur Frin Date: Mon, 28 Mar 2022 12:38:01 +0200 Subject: [PATCH 2/9] cache static resources --- .htaccess | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 .htaccess diff --git a/.htaccess b/.htaccess new file mode 100644 index 000000000..4e53069d5 --- /dev/null +++ b/.htaccess @@ -0,0 +1,32 @@ + + ExpiresActive On + + # Images + ExpiresByType image/jpeg "access plus 1 year" + ExpiresByType image/gif "access plus 1 year" + ExpiresByType image/png "access plus 1 year" + ExpiresByType image/webp "access plus 1 year" + ExpiresByType image/svg+xml "access plus 1 year" + ExpiresByType image/x-icon "access plus 1 year" + + # Video + ExpiresByType video/webm "access plus 1 year" + ExpiresByType video/mp4 "access plus 1 year" + ExpiresByType video/mpeg "access plus 1 year" + + # Fonts + ExpiresByType font/ttf "access plus 1 year" + ExpiresByType font/otf "access plus 1 year" + ExpiresByType font/woff "access plus 1 year" + ExpiresByType font/woff2 "access plus 1 year" + ExpiresByType application/font-woff "access plus 1 year" + + # CSS, JavaScript + ExpiresByType text/css "access plus 1 year" + ExpiresByType text/javascript "access plus 1 year" + ExpiresByType application/javascript "access plus 1 year" + + # Others + ExpiresByType application/pdf "access plus 1 year" + ExpiresByType image/vnd.microsoft.icon "access plus 1 year" + \ No newline at end of file From f9d3827f448d5b6c12cc9b807d3db94b33ae37c2 Mon Sep 17 00:00:00 2001 From: Arthur Frin Date: Mon, 28 Mar 2022 14:08:53 +0200 Subject: [PATCH 3/9] use of lazy-loading --- src/pug/includes/portfolio-modal-1.pug | 2 +- src/pug/includes/portfolio-modal-2.pug | 2 +- src/pug/includes/portfolio-modal-3.pug | 2 +- src/pug/includes/portfolio-modal-4.pug | 2 +- src/pug/includes/portfolio-modal-5.pug | 2 +- src/pug/includes/portfolio-modal-6.pug | 2 +- src/pug/index.pug | 28 +++++++++++++------------- 7 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/pug/includes/portfolio-modal-1.pug b/src/pug/includes/portfolio-modal-1.pug index 8fab347e1..faba706e5 100644 --- a/src/pug/includes/portfolio-modal-1.pug +++ b/src/pug/includes/portfolio-modal-1.pug @@ -11,7 +11,7 @@ // Project details h2.text-uppercase Project Name p.item-intro.text-muted Lorem ipsum dolor sit amet consectetur. - img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/1.jpg', alt='...') + img.img-fluid.d-block.mx-auto(src='assets/img/portfolio/1.jpg', loading='lazy', alt='...') p Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo! ul.list-inline li diff --git a/src/pug/includes/portfolio-modal-2.pug b/src/pug/includes/portfolio-modal-2.pug index 57cbe526f..3e02ac62d 100644 --- a/src/pug/includes/portfolio-modal-2.pug +++ b/src/pug/includes/portfolio-modal-2.pug @@ -3,7 +3,7 @@ .modal-dialog .modal-content .close-modal(data-bs-dismiss='modal') - img(src='assets/img/close-icon.svg', alt='Close modal') + img(src='assets/img/close-icon.svg', loading='lazy', alt='Close modal') .container .row.justify-content-center .col-lg-8 diff --git a/src/pug/includes/portfolio-modal-3.pug b/src/pug/includes/portfolio-modal-3.pug index 1728eed2e..ddd9084e2 100644 --- a/src/pug/includes/portfolio-modal-3.pug +++ b/src/pug/includes/portfolio-modal-3.pug @@ -3,7 +3,7 @@ .modal-dialog .modal-content .close-modal(data-bs-dismiss='modal') - img(src='assets/img/close-icon.svg', alt='Close modal') + img(src='assets/img/close-icon.svg', loading='lazy', alt='Close modal') .container .row.justify-content-center .col-lg-8 diff --git a/src/pug/includes/portfolio-modal-4.pug b/src/pug/includes/portfolio-modal-4.pug index b5e157668..04a2c63fc 100644 --- a/src/pug/includes/portfolio-modal-4.pug +++ b/src/pug/includes/portfolio-modal-4.pug @@ -3,7 +3,7 @@ .modal-dialog .modal-content .close-modal(data-bs-dismiss='modal') - img(src='assets/img/close-icon.svg', alt='Close modal') + img(src='assets/img/close-icon.svg', loading='lazy', alt='Close modal') .container .row.justify-content-center .col-lg-8 diff --git a/src/pug/includes/portfolio-modal-5.pug b/src/pug/includes/portfolio-modal-5.pug index 42595424c..c1fc2773a 100644 --- a/src/pug/includes/portfolio-modal-5.pug +++ b/src/pug/includes/portfolio-modal-5.pug @@ -3,7 +3,7 @@ .modal-dialog .modal-content .close-modal(data-bs-dismiss='modal') - img(src='assets/img/close-icon.svg', alt='Close modal') + img(src='assets/img/close-icon.svg', loading='lazy', alt='Close modal') .container .row.justify-content-center .col-lg-8 diff --git a/src/pug/includes/portfolio-modal-6.pug b/src/pug/includes/portfolio-modal-6.pug index d69fe5cda..80c681633 100644 --- a/src/pug/includes/portfolio-modal-6.pug +++ b/src/pug/includes/portfolio-modal-6.pug @@ -3,7 +3,7 @@ .modal-dialog .modal-content .close-modal(data-bs-dismiss='modal') - img(src='assets/img/close-icon.svg', alt='Close modal') + img(src='assets/img/close-icon.svg', loading='lazy', alt='Close modal') .container .row.justify-content-center .col-lg-8 diff --git a/src/pug/index.pug b/src/pug/index.pug index bbb60e8b7..07de86d1f 100644 --- a/src/pug/index.pug +++ b/src/pug/index.pug @@ -95,7 +95,7 @@ html(lang='en') .portfolio-hover .portfolio-hover-content i.fas.fa-plus.fa-3x - img.img-fluid(src='assets/img/portfolio/1.jpg', alt='...') + img.img-fluid(src='assets/img/portfolio/1.jpg', loading='lazy', alt='...') .portfolio-caption .portfolio-caption-heading Threads .portfolio-caption-subheading.text-muted Illustration @@ -106,7 +106,7 @@ html(lang='en') .portfolio-hover .portfolio-hover-content i.fas.fa-plus.fa-3x - img.img-fluid(src='assets/img/portfolio/2.jpg', alt='...') + img.img-fluid(src='assets/img/portfolio/2.jpg', loading='lazy', alt='...') .portfolio-caption .portfolio-caption-heading Explore .portfolio-caption-subheading.text-muted Graphic Design @@ -117,7 +117,7 @@ html(lang='en') .portfolio-hover .portfolio-hover-content i.fas.fa-plus.fa-3x - img.img-fluid(src='assets/img/portfolio/3.jpg', alt='...') + img.img-fluid(src='assets/img/portfolio/3.jpg', loading='lazy', alt='...') .portfolio-caption .portfolio-caption-heading Finish .portfolio-caption-subheading.text-muted Identity @@ -128,7 +128,7 @@ html(lang='en') .portfolio-hover .portfolio-hover-content i.fas.fa-plus.fa-3x - img.img-fluid(src='assets/img/portfolio/4.jpg', alt='...') + img.img-fluid(src='assets/img/portfolio/4.jpg', loading='lazy', alt='...') .portfolio-caption .portfolio-caption-heading Lines .portfolio-caption-subheading.text-muted Branding @@ -139,7 +139,7 @@ html(lang='en') .portfolio-hover .portfolio-hover-content i.fas.fa-plus.fa-3x - img.img-fluid(src='assets/img/portfolio/5.jpg', alt='...') + img.img-fluid(src='assets/img/portfolio/5.jpg', loading='lazy', alt='...') .portfolio-caption .portfolio-caption-heading Southwest .portfolio-caption-subheading.text-muted Website Design @@ -150,7 +150,7 @@ html(lang='en') .portfolio-hover .portfolio-hover-content i.fas.fa-plus.fa-3x - img.img-fluid(src='assets/img/portfolio/6.jpg', alt='...') + img.img-fluid(src='assets/img/portfolio/6.jpg', loading='lazy', alt='...') .portfolio-caption .portfolio-caption-heading Window .portfolio-caption-subheading.text-muted Photography @@ -164,7 +164,7 @@ html(lang='en') ul.timeline li .timeline-image - img.rounded-circle.img-fluid(src='assets/img/about/1.jpg', alt='...') + img.rounded-circle.img-fluid(src='assets/img/about/1.jpg', loading='lazy', alt='...') .timeline-panel .timeline-heading h4 2009-2011 @@ -174,7 +174,7 @@ html(lang='en') | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur! li.timeline-inverted .timeline-image - img.rounded-circle.img-fluid(src='assets/img/about/2.jpg', alt='...') + img.rounded-circle.img-fluid(src='assets/img/about/2.jpg', loading='lazy', alt='...') .timeline-panel .timeline-heading h4 March 2011 @@ -184,7 +184,7 @@ html(lang='en') | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur! li .timeline-image - img.rounded-circle.img-fluid(src='assets/img/about/3.jpg', alt='...') + img.rounded-circle.img-fluid(src='assets/img/about/3.jpg', loading='lazy', alt='...') .timeline-panel .timeline-heading h4 December 2015 @@ -194,7 +194,7 @@ html(lang='en') | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur! li.timeline-inverted .timeline-image - img.rounded-circle.img-fluid(src='assets/img/about/4.jpg', alt='...') + img.rounded-circle.img-fluid(src='assets/img/about/4.jpg', loading='lazy', alt='...') .timeline-panel .timeline-heading h4 July 2020 @@ -262,16 +262,16 @@ html(lang='en') .row.align-items-center .col-md-3.col-sm-6.my-3 a(href='#!') - img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/microsoft.svg', alt='...', aria-label='Microsoft Logo') + img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/microsoft.svg', loading='lazy', alt='...', aria-label='Microsoft Logo') .col-md-3.col-sm-6.my-3 a(href='#!') - img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/google.svg', alt='...', aria-label='Google Logo') + img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/google.svg', loading='lazy', alt='...', aria-label='Google Logo') .col-md-3.col-sm-6.my-3 a(href='#!') - img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/facebook.svg', alt='...', aria-label='Facebook Logo') + img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/facebook.svg', loading='lazy', alt='...', aria-label='Facebook Logo') .col-md-3.col-sm-6.my-3 a(href='#!') - img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/ibm.svg', alt='...', aria-label='IBM Logo') + img.img-fluid.img-brand.d-block.mx-auto(src='assets/img/logos/ibm.svg', loading='lazy', alt='...', aria-label='IBM Logo') // Contact section#contact.page-section From 85e7bf3567e9b00a390ab4e0e0bf63922924702e Mon Sep 17 00:00:00 2001 From: Arthur Frin Date: Mon, 28 Mar 2022 14:21:32 +0200 Subject: [PATCH 4/9] build --- dist/index.html | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/dist/index.html b/dist/index.html index 09c1bab79..cf3c2dc50 100644 --- a/dist/index.html +++ b/dist/index.html @@ -9,7 +9,7 @@ - + @@ -94,7 +94,7 @@

Lorem ipsum dolor sit amet consectetur
- ... + ...
Threads
@@ -109,7 +109,7 @@

Lorem ipsum dolor sit amet consectetur
- ... + ...
Explore
@@ -124,7 +124,7 @@

Lorem ipsum dolor sit amet consectetur
- ... + ...
Finish
@@ -139,7 +139,7 @@

Lorem ipsum dolor sit amet consectetur
- ... + ...
Lines
@@ -154,7 +154,7 @@

Lorem ipsum dolor sit amet consectetur
- ... + ...
Southwest
@@ -169,7 +169,7 @@

Lorem ipsum dolor sit amet consectetur
- ... + ...
Window
@@ -189,7 +189,7 @@

Lorem ipsum dolor sit amet consectetur