Skip to content

Commit

Permalink
Merge pull request #14672 from canonical/chore/compress_assets
Browse files Browse the repository at this point in the history 
add compression of js/css assets
  • Loading branch information
@akbarkz
akbarkz authored Jan 23, 2025
2 parents 812b8ea + f1d1314 commit 4f806e3
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 16 deletions.
1 change: 1 addition & 0 deletions requirements.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,4 @@ bleach==6.0.0
numpy==1.24.4
python-slugify==8.0.1
djlint==1.34.1
flask-squeeze==3.1.0
79 changes: 64 additions & 15 deletions templates/base_index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,17 +37,19 @@ <h2 id="test-takeover-subtitle">Understanding real-time systems, their use cases
</div>
<hr class="p-rule--muted" />
<p>
<a id="test-takeover-primary-url" href="/download" class="p-button--positive">Download now</a>
<a id="test-takeover-primary-url"
href="/download"
class="p-button--positive">Download now</a>
</p>
</div>
</div>
</div>
<div class="u-align--center">
<img id="test-takeover-image"
src="https://assets.ubuntu.com/v1/fb1ea84e-Kernelt%[email protected]"
width="508"
height="364"
loading="lazy"
alt="" />
src="https://assets.ubuntu.com/v1/fb1ea84e-Kernelt%[email protected]"
width="508"
height="364"
loading="lazy"
alt="" />
</div>
</div>
</section>
Expand All @@ -66,12 +68,17 @@ <h1 id="takeover-title" class="u-no-margin--bottom">Ubuntu 24.04 LTS Noble Numba
<div id="takeover-ctas">
<p>
<a id="takeover-primary-url" href="/download" class="p-button--positive">Download for free</a>
<a id="takeover-secondary-url" href="/blog/ubuntu-desktop-24-04-noble-numbat-deep-dive">Read the deep dive&nbsp;&rsaquo;</a>
<a id="takeover-secondary-url"
href="/blog/ubuntu-desktop-24-04-noble-numbat-deep-dive">Read the deep dive&nbsp;&rsaquo;</a>
</p>
</div>
</div>
<div class="col-6 u-vertically-center u-align--center u-hide--medium u-hide--small">
<img id="takeover-image" src="https://assets.ubuntu.com/v1/d9fc87f3-Numbat.svg" width="300" alt="" loading="lazy" />
<img id="takeover-image"
src="https://assets.ubuntu.com/v1/d9fc87f3-Numbat.svg"
width="300"
alt=""
loading="lazy" />
</div>
</div>
</section>
Expand Down Expand Up @@ -386,16 +393,19 @@ <h2 class="p-heading--1 u-no-margin--bottom">Public cloud optimisation</h2>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/86ee4118-uber-logo.png"
alt="Uber"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/d1a04730-spotify-logo.png"
alt="Spotify"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/ce3090ee-bnp-paribas-logo.png"
alt="BNP"
loading="lazy"
class="p-logo-section__logo" />
</div>
</div>
Expand Down Expand Up @@ -477,26 +487,31 @@ <h2 class="p-heading--1 u-no-margin--bottom u-no-max-width">Multi-cloud Kubernet
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/b0292231-aws-logo.png"
alt="AWS"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/8e354832-is-dark=true.png"
alt="GCP"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/9e14fd33-microsoft-azure-logo.png"
alt="Microsoft Azure"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/6f7d29aa-liberty-global-logo.png"
alt="Liberty Global"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/0f0a0c1d-aci-logo.png"
alt="ACI"
loading="lazy"
class="p-logo-section__logo" />
</div>
</div>
Expand Down Expand Up @@ -571,31 +586,37 @@ <h2 class="p-heading--1 u-no-margin--bottom">Carrier-grade private cloud</h2>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/aabc2a34-bestbuy-logo.png"
alt="Best Buy"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/83e8dd19-bt-logo.png"
alt="BT"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/8b939be3-deutsche-telekom.png"
alt="Deutsche Telekom"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/b6d5d92b-rabobank-logo.png"
alt="Rabobank"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/2c5c1540-Bloomberg-Logo.png"
alt="Bloomberg"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/99a69f52-ATT-Logo.png"
alt="AT&T"
loading="lazy"
class="p-logo-section__logo" />
</div>
</div>
Expand Down Expand Up @@ -687,26 +708,31 @@ <h2 class="p-heading--1 u-no-margin--bottom">Ultra secure things</h2>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/86b50f30-intel-new-logo.png"
class="p-logo-section__logo"
loading="lazy"
alt="Intel" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/1af15900-rexroth-logo.png"
class="p-logo-section__logo"
loading="lazy"
alt="Rexroth" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/0d5fc741-arm-logo.png"
class="p-logo-section__logo"
loading="lazy"
alt="ARM" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/703330cd-dell-technologies-logo-white.png"
class="p-logo-section__logo"
loading="lazy"
alt="Dell" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/d689e3b6-advantech-logo.png"
class="p-logo-section__logo"
loading="lazy"
alt="Advantech" />
</div>
</div>
Expand Down Expand Up @@ -750,7 +776,9 @@ <h2 class="p-heading--1 u-no-margin--bottom">Ultra secure things</h2>
<section class="p-section ">
<div class="u-fixed-width ">
<div class="u-align--center u-vertically-center u-no-padding--bottom p-image-container--cinematic">
<img src="https://assets.ubuntu.com/v1/bb296524-Dell%20pcs.jpg" alt="" loading="lazy"/>
<img src="https://assets.ubuntu.com/v1/bb296524-Dell%20pcs.jpg"
alt=""
loading="lazy" />
</div>
<hr class="p-rule" />
<div class="p-section--shallow">
Expand All @@ -766,31 +794,37 @@ <h2 class="p-heading--1 u-no-margin--bottom">Workstations and desktops</h2>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/3e3e698b-nvidia-logo.png"
alt="NVIDIA"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/86b50f30-intel-new-logo.png"
alt="Intel"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/cc247653-amd-logo.png"
alt="AMD"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/af7e6fff-hp-logo.png"
alt="HP"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/703330cd-dell-technologies-logo-white.png"
class="p-logo-section__logo"
alt="Dell" />
class="p-logo-section__logo"
loading="lazy"
alt="Dell" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/dc74391e-lenovo-logo.png"
alt="Lenovo"
loading="lazy"
class="p-logo-section__logo" />
</div>
</div>
Expand Down Expand Up @@ -857,7 +891,7 @@ <h2 class="p-heading--1 u-no-margin--bottom">Workstations and desktops</h2>
<div class="u-fixed-width">
<div class="p-image-container--cinematic">
<img src="https://assets.ubuntu.com/v1/39667d98-Open%20source%20security.jpg"
loading="lazy"
loading="lazy"
alt="" />
</div>
<hr class="p-rule" />
Expand All @@ -873,31 +907,37 @@ <h2 class="p-heading--1 u-no-margin--bottom">Data centre automation</h2>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/d34aeb87-verizon-logo.png"
alt="Verizon"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/874b530e-telefonica-logo.png"
alt="Telefonica"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/fe4dad9a-tele2-logo.png"
alt="Tele2"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/06faa04e-telecom-italia-logo.png"
alt="Telecom Italia"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/54f03cb5-nec-logo.png"
alt="NEC"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/5bcba2d8-barclays-logo.png"
alt="Barclays"
loading="lazy"
class="p-logo-section__logo" />
</div>
</div>
Expand Down Expand Up @@ -978,31 +1018,37 @@ <h2 class="p-heading--1 u-no-margin--bottom">Smart robots of all shapes and size
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/938bc6df-ABB-logo.png"
alt="ABB"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/24808373-pal-robotics-logo.png"
alt="Pal Robotics"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/8825054e-Kuka-logo.png"
alt="Kuka"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/213d7454-apollo-logo.png"
alt="Apollo"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/feb30dca-bosch-logo.png"
alt="Bosch"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/fbbc29ef-bmw-logo.png"
alt="BMW"
loading="lazy"
class="p-logo-section__logo" />
</div>
</div>
Expand Down Expand Up @@ -1057,8 +1103,7 @@ <h2 class="p-heading--1 u-no-margin--bottom">Smart robots of all shapes and size
style="background: rgba(0, 0, 0, 0.15)">
<img src="https://assets.ubuntu.com/v1/6d657910-Multi-cloud%20Applications%C2%A0%C2%A0Beyond%20PAAS.png"
alt=""
loading="lazy"
/>
loading="lazy" />
</div>
<hr class="p-rule" />
<div class="p-section--shallow">
Expand All @@ -1071,21 +1116,25 @@ <h2 class="p-heading--1 u-no-margin--bottom">Multi-cloud applications&nbsp;&ndas
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/70b63088-Panasonic_logo.png"
alt="Panasonic"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/9eff2c35-scania-logo.png"
alt="Scania"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/84772462-sbi-bits-logo.png"
alt="SBI BTS"
loading="lazy"
class="p-logo-section__logo" />
</div>
<div class="p-logo-section__item">
<img src="https://assets.ubuntu.com/v1/e31ed5d5-swissquote-logo.png"
alt="Swissquote"
loading="lazy"
class="p-logo-section__logo" />
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion templates/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

<script src="{{ versioned_static('js/src/navigation.js') }}" defer></script>
<script src="{{ versioned_static('js/dist/main.js') }}" defer></script>
<script src="{{ versioned_static('js/src/infer-preferred-language.js')}}"></script>
<script src="{{ versioned_static('js/src/infer-preferred-language.js')}}" defer></script>

<link rel="stylesheet" type="text/css" media="screen" href="{{ versioned_static("css/styles.css") }}" />
<link rel="stylesheet" type="text/css" media="print" href="{{ versioned_static("css/print.css") }}" />
Expand Down
5 changes: 5 additions & 0 deletions webapp/app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
import talisker.requests
from jinja2 import ChoiceLoader, FileSystemLoader
from pathlib import Path
from flask_squeeze import Squeeze

from canonicalwebteam.blog import BlogAPI, BlogViews, build_blueprint
from canonicalwebteam.discourse import (
Expand Down Expand Up @@ -184,6 +185,10 @@
static_folder="../static",
)

# Compress JS and CSS
squeeze = Squeeze()
squeeze.init_app(app)

# ChoiceLoader attempts loading templates from each path in successive order
loader = ChoiceLoader(
[
Expand Down

0 comments on commit 4f806e3

Please sign in to comment.