Version 2.3.0: optimized code for Lighthouse audit max score (#4)

DmitryMarkov · Dec 7, 2019 · 978b806 · 978b806
1 parent e5fc98a
commit 978b806
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+# v2.3.0 [2019-12-07]
+- Improved Lighthouse analytics score (100/4)
+
 # v2.2.0 [2019-12-02]
 - Updated title, experience and assets
 - Replaced Behance link with LinkedIn

diff --git a/assets/images/avatar-dm.jpg b/assets/images/avatar-dm.jpg
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-version="2.2.0">
+<html lang="en" data-version="2.3.0">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -9,6 +9,14 @@
 
     <meta name="description" content="Professional web developer with 15+ years of experience in web and software development" />
 
+    <link rel="preload" href="src/main.css" as="style" />
+    <link rel="preconnect" href="//fonts.gstatic.com" />
+    <link href="src/main.css" rel="stylesheet" />
+
+    <link rel="icon" href="favicon.ico" type="image/x-icon" />
+    <link rel="apple-touch-icon" href="//dmitrymarkov.pro/assets/images/apple-icon.png" />
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+
     <meta property="og:title" content="Dmitry Markov - Frontend Web Developer" />
     <meta property="og:type" content="website" />
     <meta property="og:image" content="http://dmitrymarkov.pro/assets/images/og-image-1200.png" />
@@ -22,12 +30,6 @@
     <meta property="twitter:image" content="http://dmitrymarkov.pro/assets/images/og-image-1200.png" />
     <meta property="twitter:url" content="https://dmitrymarkov.pro" />
     <meta property="twitter:site" content="@damarkov" />
-
-    <link rel="apple-touch-icon" href="//dmitrymarkov.pro/assets/images/apple-icon.png" />
-    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
-    <link rel="icon" href="favicon.ico" type="image/x-icon" />
-
-    <link href="src/main.css" rel="stylesheet" />
   </head>
   <body>
 <!--  Thank you for viewing source code  -->

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cv-markov",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Dmitry Markov's CV in pure HTML & CSS",
   "main": "index.html",
   "repository": {

diff --git a/src/main.css b/src/main.css
@@ -4,6 +4,7 @@
 /* 300 */
 @font-face {
   font-family: 'Roboto';
+  font-display: fallback;
   font-style: normal;
   font-weight: 300;
   src: local('Roboto Light'), local('Roboto-Light'), url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
@@ -13,6 +14,7 @@
 /* 700 */
 @font-face {
   font-family: 'Roboto';
+  font-display: fallback;
   font-style: normal;
   font-weight: 700;
   src: local('Roboto Bold'), local('Roboto-Bold'), url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOJBw1xU1rKptJj_0jans920.woff2) format('woff2');
@@ -22,6 +24,7 @@
 /* 300 italic */
 @font-face {
   font-family: 'Roboto';
+  font-display: fallback;
   font-style: italic;
   font-weight: 300;
   src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
@@ -30,6 +33,7 @@
 /* 500 */
 @font-face {
   font-family: 'Roboto';
+  font-display: fallback;
   font-style: normal;
   font-weight: 500;
   src: local('Roboto Medium'), local('Roboto-Medium'), url(//fonts.gstatic.com/s/roboto/v15/ZLqKeelYbATG60EpZBSDy4X0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
@@ -56,7 +60,7 @@ html {
 
 body {
   margin: 0;
-  color: #606c76;
+  color: #525960;
   font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
   font-size: 1.6em;
   font-weight: 300;
@@ -75,8 +79,7 @@ a {
   padding: .09rem .375rem;
   margin: -.09rem -.375rem;
   background-color: transparent;
-  -webkit-text-decoration-skip: objects;
-  color: #1c82eb;
+  color: #1375DD;
   text-decoration: none;
 }
 
@@ -95,7 +98,7 @@ b {
 
 em {
   display: block;
-  color: #aaa;
+  color: #6A7881;
   line-height: 1.15;
   margin-top: 0;
   margin-bottom: 0.75rem;
@@ -187,7 +190,7 @@ img {
 
 a:hover {
   color: #488cd2;
-  text-decoration: underline
+  text-decoration: underline;
 }
 
 ul {
@@ -211,6 +214,7 @@ p + p {
 }
 
 h1 {
+  color: #606c76;
   font-weight: 300;
   font-size: 3.5rem;
   line-height: 1.2;
@@ -221,6 +225,7 @@ h1 {
 }
 
 h2 {
+  color: #606c76;
   font-size: 1.8rem;
   letter-spacing: -.05rem;
   line-height: 1.5;
@@ -272,6 +277,7 @@ h3:hover:after {
 }
 
 h4 {
+  color: #606c76;
   font-size: 1.6rem;
   letter-spacing: -.01rem;
   font-weight: 700;
@@ -281,6 +287,7 @@ h4 {
 }
 
 h6 {
+  color: #606c76;
   font-size: 1.5rem;
   letter-spacing: 0;
   line-height: 1.4;
@@ -371,6 +378,10 @@ header .column h2 + nav .fa:not(:first-of-type),
   margin-left: calc(20% - 1.5rem);
 }
 
+#summary a {
+  color: #126BC9;
+}
+
 #summary ul, #additional ul  {
   list-style: none;
   margin-top: 0;
@@ -409,6 +420,7 @@ header .column h2 + nav .fa:not(:first-of-type),
 }
 
 .fa {
+  color: #606c76;
   display: inline-block;
   font: normal normal normal 14px/1 'FontAwesome';
   font-size: inherit;