split css to critical and non-critical

ivelum · Jan 3, 2025 · c42980f · c42980f
1 parent 943ac71
commit c42980f
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 77 deletions.
diff --git a/assets/sass/404.scss b/assets/sass/404.scss
@@ -1,6 +1,8 @@
-@import './vars';
+@import './fonts';
+@import './footer';
 @import './mixins';
 @import './typography';
+@import './vars';
 
 .page-not-found {
   .wrapper {

diff --git a/assets/sass/_footer.scss b/assets/sass/_footer.scss
@@ -1,3 +1,4 @@
+@import './mixins';
 @import './vars';
 
 .footer {

diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss
@@ -29,6 +29,10 @@
   @return $unfolded-transition;
 }
 
+@mixin a-no-underline {
+  background-size: 0 1px;
+}
+
 @mixin media-up($name, $mq-breakpoints: $grid-breakpoints) {
   @if map-has-key($mq-breakpoints, $name) {
     $name: map-get($mq-breakpoints, $name);

diff --git a/assets/sass/_typography.scss b/assets/sass/_typography.scss
@@ -25,8 +25,43 @@
   width: 100%;
 }
 
-@mixin a-no-underline {
-  background-size: 0 1px;
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  box-sizing: border-box;
+}
+
+body {
+  @include stylized-scrollbar;
+  background-color: $white;
+  color: $font-color-default;
+  font-family: 'Montserrat', sans-serif;
+  font-size: $font-size-default;
+  font-weight: $font-weight-default;
+  line-height: $line-height-default;
+  margin: 0;
+  text-align: left;
+  scroll-behavior: smooth;
+  text-rendering: geometricPrecision;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0;
 }
 
 a {

diff --git a/assets/sass/critical.scss b/assets/sass/critical.scss
@@ -0,0 +1,14 @@
+@import './about';
+@import './article';
+@import './blog';
+@import './blog-navigation';
+@import './btn';
+@import './contact';
+@import './fonts';
+@import './header';
+@import './how-we-work';
+@import './privacy';
+@import './solutions';
+@import './teamplify';
+@import './typography';
+@import './vars';
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
diff --git a/assets/sass/non-critical.scss b/assets/sass/non-critical.scss
@@ -0,0 +1,3 @@
+@import './blog-subscribe-form';
+@import './contact-form';
+@import './footer';
diff --git a/layouts/404.html b/layouts/404.html
@@ -38,8 +38,8 @@
       }
     }
   </script>
-  {{- with resources.Get "sass/main.scss" }}
-    {{- $opts := dict "transpiler" "libsass" "targetPath" "css/style.css" }}
+  {{- with resources.Get "sass/404.scss" }}
+    {{- $opts := dict "transpiler" "libsass" }}
     {{- with . | toCSS $opts }}
       {{- if hugo.IsDevelopment }}
         <link rel="stylesheet" href="{{ .RelPermalink }}">

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -28,6 +28,7 @@
   <meta property="og:title" content="{{ .Title }}">
   <meta property="og:description" content="{{ .Description }}">
   <meta property="og:url" content="{{ .Permalink }}">
+
 {{- $page := . }}
 {{- with .Params.thumbnail }}
   {{- $thumbnail := $page.Resources.Get . }}
@@ -56,22 +57,23 @@
       }
     }
   </script>
-{{- with resources.Get "sass/main.scss" }}
-  {{- $opts := dict "transpiler" "libsass" "targetPath" "css/style.css" }}
-  {{- with . | toCSS $opts }}
-    {{- if hugo.IsDevelopment }}
-  <link rel="stylesheet" href="{{ .RelPermalink }}">
-    {{- else }}
-      {{- with . | minify | fingerprint }}
-  <link
-    rel="stylesheet"
-    href="{{ .RelPermalink }}"
-    integrity="{{ .Data.Integrity }}"
-    crossorigin="anonymous"
-  >
-      {{- end }}
-    {{- end }}
+{{- with resources.Get "sass/critical.scss" }}
+  {{- $css := . | toCSS (dict "transpiler" "libsass") }}
+  {{- if not hugo.IsDevelopment }}
+    {{- $css = $css | minify }}
+  {{- end }}
+  <style>
+    {{ $css.Content | safeCSS }}
+  </style>
+{{- end }}
+{{- with resources.Get "sass/non-critical.scss" }}
+  {{- $css := . | toCSS (dict "transpiler" "libsass") }}
+  {{- if not hugo.IsDevelopment }}
+    {{- $css = $css | minify }}
   {{- end }}
+  <link rel="preload" href="{{ $css.RelPermalink }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <noscript><link rel="stylesheet" href="{{ $css.RelPermalink }}"></noscript>
+  <link rel="stylesheet" href="{{ $css.RelPermalink }}" media="print">
 {{- end }}
 </head>
 <body>