Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web performance and best practices #324

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Web performance and best practices #324

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6521c89
Eliminate render-blocking resource
SamSnow Mar 27, 2022
3ba1d9c
cache static resources
SamSnow Mar 28, 2022
f9d3827
use of lazy-loading
SamSnow Mar 28, 2022
85e7bf3
build
SamSnow Mar 28, 2022
b40d3e7
fontawesome performance: select icons and host locally
SamSnow Mar 28, 2022
8086ec1
fontawesome: separate files
SamSnow Mar 28, 2022
336c4fa
Ensure text remains visible during webfont load
SamSnow Mar 28, 2022
e2ee5e4
improve perf with webp format
SamSnow Mar 28, 2022
336c957
Add cache for webp
SamSnow Mar 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions .htaccess
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
AddType image/webp .webp

<IfModule mod_expires.c>
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"
ExpiresByType image/webp "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"
</IfModule>
Binary file removed dist/assets/img/header-bg.jpg
View file
Open in desktop
Binary file not shown.
Binary file added dist/assets/img/header-bg.webp
View file
Open in desktop
Binary file not shown.
Binary file removed dist/assets/img/map-image.png
View file
Open in desktop
Binary file not shown.
Binary file added dist/assets/img/map-image.webp
View file
Open in desktop
Binary file not shown.
4 changes: 2 additions & 2 deletions dist/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11410,7 +11410,7 @@ header.masthead {
padding-bottom: 6rem;
text-align: center;
color: #fff;
background-image: url("../assets/img/header-bg.jpg");
background-image: url("../assets/img/header-bg.webp");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
Expand Down Expand Up @@ -11720,7 +11720,7 @@ header.masthead .masthead-heading {

section#contact {
background-color: #212529;
background-image: url("../assets/img/map-image.png");
background-image: url("../assets/img/map-image.webp");
background-repeat: no-repeat;
background-position: center;
}
Expand Down
50 changes: 26 additions & 24 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,13 @@
<title>Agency - Start Bootstrap Theme</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<!-- Font Awesome icons 6.1.1 (free version, including only needed icons)-->
<script src="js/brands.js" defer></script>
<script src="js/solid.js" defer></script>
<script src="js/fontawesome.min.js" defer></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="preload" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="preload" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
Expand Down Expand Up @@ -94,7 +96,7 @@ <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/1.jpg" alt="..." />
<img class="img-fluid" src="assets/img/portfolio/1.jpg" loading="lazy" alt="..." />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Threads</div>
Expand All @@ -109,7 +111,7 @@ <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/2.jpg" alt="..." />
<img class="img-fluid" src="assets/img/portfolio/2.jpg" loading="lazy" alt="..." />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Explore</div>
Expand All @@ -124,7 +126,7 @@ <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/3.jpg" alt="..." />
<img class="img-fluid" src="assets/img/portfolio/3.jpg" loading="lazy" alt="..." />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Finish</div>
Expand All @@ -139,7 +141,7 @@ <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/4.jpg" alt="..." />
<img class="img-fluid" src="assets/img/portfolio/4.jpg" loading="lazy" alt="..." />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Lines</div>
Expand All @@ -154,7 +156,7 @@ <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/5.jpg" alt="..." />
<img class="img-fluid" src="assets/img/portfolio/5.jpg" loading="lazy" alt="..." />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Southwest</div>
Expand All @@ -169,7 +171,7 @@ <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="assets/img/portfolio/6.jpg" alt="..." />
<img class="img-fluid" src="assets/img/portfolio/6.jpg" loading="lazy" alt="..." />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Window</div>
Expand All @@ -189,7 +191,7 @@ <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur
</div>
<ul class="timeline">
<li>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/1.jpg" alt="..." /></div>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/1.jpg" loading="lazy" alt="..." /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2009-2011</h4>
Expand All @@ -199,7 +201,7 @@ <h4 class="subheading">Our Humble Beginnings</h4>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/2.jpg" alt="..." /></div>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/2.jpg" loading="lazy" alt="..." /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>March 2011</h4>
Expand All @@ -209,7 +211,7 @@ <h4 class="subheading">An Agency is Born</h4>
</div>
</li>
<li>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/3.jpg" alt="..." /></div>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/3.jpg" loading="lazy" alt="..." /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>December 2015</h4>
Expand All @@ -219,7 +221,7 @@ <h4 class="subheading">Transition to Full Service</h4>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/4.jpg" alt="..." /></div>
<div class="timeline-image"><img class="rounded-circle img-fluid" src="assets/img/about/4.jpg" loading="lazy" alt="..." /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>July 2020</h4>
Expand Down Expand Up @@ -291,16 +293,16 @@ <h4>Larry Parker</h4>
<div class="container">
<div class="row align-items-center">
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/microsoft.svg" alt="..." aria-label="Microsoft Logo" /></a>
<a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/microsoft.svg" loading="lazy" alt="..." aria-label="Microsoft Logo" /></a>
</div>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/google.svg" alt="..." aria-label="Google Logo" /></a>
<a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/google.svg" loading="lazy" alt="..." aria-label="Google Logo" /></a>
</div>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/facebook.svg" alt="..." aria-label="Facebook Logo" /></a>
<a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/facebook.svg" loading="lazy" alt="..." aria-label="Facebook Logo" /></a>
</div>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/ibm.svg" alt="..." aria-label="IBM Logo" /></a>
<a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/ibm.svg" loading="lazy" alt="..." aria-label="IBM Logo" /></a>
</div>
</div>
</div>
Expand Down Expand Up @@ -399,7 +401,7 @@ <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur
<!-- Project details-->
<h2 class="text-uppercase">Project Name</h2>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<img class="img-fluid d-block mx-auto" src="assets/img/portfolio/1.jpg" alt="..." />
<img class="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!</p>
<ul class="list-inline">
<li>
Expand All @@ -426,7 +428,7 @@ <h2 class="text-uppercase">Project Name</h2>
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" loading="lazy" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
Expand Down Expand Up @@ -461,7 +463,7 @@ <h2 class="text-uppercase">Project Name</h2>
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" loading="lazy" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
Expand Down Expand Up @@ -496,7 +498,7 @@ <h2 class="text-uppercase">Project Name</h2>
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" loading="lazy" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
Expand Down Expand Up @@ -531,7 +533,7 @@ <h2 class="text-uppercase">Project Name</h2>
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" loading="lazy" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
Expand Down Expand Up @@ -566,7 +568,7 @@ <h2 class="text-uppercase">Project Name</h2>
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" loading="lazy" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
Expand Down
Loading