Skip to content

Commit

Permalink
Improve the page load of the index page.
Browse files Browse the repository at this point in the history
We were seeing some slowness on the index page when looking at
lighthouse. This was largely a LCP hit from the image loading in.

This loading is improved in two ways:
- We add an SVG outline of me
- We add the "priority" prop as well: https://nextjs.org/docs/app/api-reference/components/image#priority
  • Loading branch information
hockeybuggy committed Nov 4, 2024
1 parent f1010b8 commit d1db1ff
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 2 deletions.
22 changes: 21 additions & 1 deletion pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,28 @@ const IndexPage = (): React.ReactElement => {
maxWidth: "100%",
height: "auto",
}}
priority
/>
<span className="placeholder" />
<svg
id="avatar-outline"
width="200"
height="200"
viewBox="0 0 52.916666 52.91667"
version="1.1"
>
<g
id="layer1"
transform="matrix(0.45082511,0,0,0.45082511,-24.547094,-43.910986)"
>
<path
style={{ fill: "#e6e6e6", strokeWidth: "0.880925" }}
d="m 76.33544,214.61135 c 4e-5,-0.69426 0.702371,-5.7181 1.039221,-7.43364 0.121318,-0.61785 0.08048,-0.65944 -0.647635,-0.65944 -1.122382,0 -2.121179,0.42994 -2.528901,1.08859 -0.25921,0.41873 -0.354772,1.18776 -0.354772,2.85502 0,2.25225 -0.0076,2.28394 -0.583828,2.43701 -0.321106,0.0853 -0.805355,0.0418 -1.07611,-0.0967 -0.270754,-0.13847 -0.759014,-0.31256 -1.085021,-0.38685 -0.487491,-0.1111 -0.623828,-0.31666 -0.767814,-1.15767 -0.326649,-1.90796 -0.158725,-3.25622 0.583966,-4.68864 0.383382,-0.73941 0.918848,-1.53955 1.189922,-1.77808 1.049387,-0.92341 1.828418,-1.79796 2.680028,-3.00865 l 0.885544,-1.25893 h 1.544056 1.544056 l 0.250431,-1.73851 c 0.275038,-1.90935 1.430675,-7.73195 1.924652,-9.69725 0.283891,-1.12948 0.276405,-1.28463 -0.08099,-1.67858 -0.48418,-0.53368 -2.477903,-6.75785 -2.477903,-7.73571 0,-0.38989 -0.118836,-0.98496 -0.264079,-1.32237 -0.21793,-0.50628 -0.183977,-0.81204 0.194304,-1.74979 0.594952,-1.47488 1.202522,-3.49229 1.202522,-3.99294 0,-0.53389 1.228729,-3.07754 2.276214,-4.71209 0.866892,-1.35275 3.429718,-3.72911 4.58756,-4.25378 0.348519,-0.15794 0.909705,-0.28715 1.247079,-0.28715 0.815391,0 4.483246,-1.23818 6.010084,-2.02888 l 1.218102,-0.63079 0.126988,-2.72922 c 0.1121,-2.40923 0.208991,-2.90699 0.826372,-4.24539 0.73224,-1.5874 2.74511,-4.04722 4.097033,-5.00678 0.436099,-0.30954 0.843889,-0.63504 0.906189,-0.72336 0.0624,-0.0883 0.85156,-0.66467 1.7539,-1.28081 1.19615,-0.81677 1.67751,-1.2961 1.77681,-1.76935 0.2809,-1.33869 0.36768,-1.5018 0.97621,-1.83488 0.34288,-0.1877 0.75594,-0.51023 0.91787,-0.71675 0.16194,-0.20654 0.59968,-0.37552 0.97276,-0.37552 0.59361,0 0.66097,-0.0673 0.53933,-0.53953 -0.0765,-0.29674 -0.26101,-1.24094 -0.41015,-2.0982 -0.17493,-1.00561 -0.48967,-1.85647 -0.88701,-2.39795 -0.33873,-0.4616 -0.7787,-1.35863 -0.97771,-1.99338 -0.3622,-1.15516 -1.70208,-3.57552 -2.13682,-3.8599 -0.34412,-0.22512 -0.93934,-1.58344 -0.93934,-2.14361 0,-0.26927 -0.27804,-0.79676 -0.61785,-1.17219 -0.72191,-0.79754 -0.87012,-2.43068 -0.26356,-2.90391 0.58633,-0.45747 0.88141,-1.26328 0.88141,-2.40702 0,-1.46174 0.74988,-5.4401 1.13516,-6.02243 0.0873,-0.13189 0.34402,-0.90865 0.57058,-1.72613 0.22657,-0.81748 0.62362,-1.7438 0.88231,-2.05848 0.6464,-0.78629 3.53753,-2.41243 5.45445,-3.06794 1.46701,-0.50164 1.7354,-0.52231 3.58148,-0.276 1.44569,0.1929 2.41073,0.48492 3.50194,1.05967 1.34825,0.71015 1.59579,0.95694 2.35921,2.35206 1.6607,3.03486 2.89383,7.02163 2.90096,9.37896 0.003,0.86468 0.15167,1.3036 0.683,2.01129 0.74244,0.98886 0.87764,2.0849 0.42624,3.45547 -0.21576,0.65514 -0.18938,0.84743 0.17762,1.29471 0.23705,0.28892 0.67546,1.01088 0.97421,1.60437 0.29875,0.5935 0.74371,1.37007 0.98878,1.72571 0.38672,0.56119 0.42537,0.87706 0.29245,2.39076 -0.0918,1.04565 -0.37878,2.26581 -0.71655,3.04676 -0.30989,0.71645 -0.52686,1.34133 -0.48216,1.38863 0.0447,0.0473 1.29502,0.23739 2.77849,0.4224 4.18502,0.52191 6.68096,1.63363 8.95943,3.99057 1.04606,1.08208 1.3647,1.60415 1.68311,2.75764 0.3539,1.28206 0.36134,1.58895 0.0751,3.10142 -0.20418,1.07874 -0.28193,2.57828 -0.21758,4.1964 0.14109,3.54794 0.11557,6.4815 -0.0949,10.91207 l -0.18233,3.83811 0.59828,0.7526 c 0.32906,0.41392 0.5994,1.00679 0.60074,1.31746 0.002,0.40572 0.32349,0.80135 1.14184,1.40416 3.49464,2.5742 3.61756,2.77597 2.55203,4.18944 -0.75541,1.00211 -1.1658,1.05585 -1.88393,0.24675 -0.29263,-0.3297 -0.75608,-0.59948 -1.02985,-0.59948 -0.46033,0 -0.5061,0.1398 -0.60839,1.85841 -0.134,2.25106 -0.49256,3.17728 -1.22999,3.17728 -0.51711,0 -0.53001,0.0535 -0.53001,2.19922 0,1.66005 -0.087,2.301 -0.35496,2.61439 -0.32534,0.38051 -0.26645,0.63227 0.70563,3.01631 0.58333,1.43063 1.21194,2.94848 1.3969,3.37302 0.18497,0.42452 0.35169,1.1133 0.37049,1.53061 0.0293,0.65066 -0.095,0.83606 -0.87204,1.30144 l -0.90618,0.54268 -0.17897,2.4828 c -0.19842,2.75286 -0.0611,3.55183 0.98882,5.7547 0.35481,0.74444 0.74746,2.0261 0.87252,2.84813 0.2405,1.58063 1.1024,3.54827 2.53499,5.78709 0.47728,0.74587 0.93454,1.79797 1.01611,2.33799 l 0.14834,0.98185 H 118.04481 92.637734 l 0.427073,-0.89923 c 0.234891,-0.49458 0.49572,-1.29977 0.579622,-1.78932 0.197933,-1.15489 1.085525,-3.26721 2.028502,-4.8275 1.048707,-1.73524 3.317392,-6.31275 3.317392,-6.69349 0,-0.17409 0.197924,-0.72745 0.43983,-1.22967 0.333768,-0.69295 0.408316,-1.1949 0.309118,-2.08144 -0.145257,-1.2981 0.248166,-2.22832 1.057419,-2.50018 0.39723,-0.13345 0.45912,-0.35822 0.45912,-1.66739 0,-1.05248 0.10347,-1.60403 0.33983,-1.81166 0.42442,-0.37282 0.43772,-1.2054 0.0287,-1.79746 -0.29985,-0.43403 -0.31695,-0.43091 -0.47195,0.086 -0.0885,0.29501 -0.48368,0.89769 -0.87827,1.33929 -0.394581,0.4416 -1.106843,1.29948 -1.582794,1.9064 -0.475951,0.60692 -1.014761,1.10349 -1.197353,1.10349 -0.299431,0 -1.391736,0.62714 -1.675344,0.9619 -0.0623,0.0735 -0.405476,0.37119 -0.762611,0.66145 -0.912012,0.74125 -5.203819,4.75597 -6.595801,6.16998 -0.129833,0.13188 -0.744655,0.88723 -1.366271,1.67855 -0.621616,0.79132 -1.18216,1.49272 -1.245654,1.55866 -0.0635,0.0659 -0.313789,0.52011 -0.556212,1.00923 -0.242423,0.48912 -1.021552,1.72323 -1.731398,2.74246 -0.839701,1.20569 -1.340481,2.18313 -1.43331,2.79759 -0.201219,1.33193 -0.439372,1.70814 -1.611208,2.54524 -0.906313,0.64743 -1.223283,0.73707 -2.606285,0.73707 H 76.33539 Z m 8.895219,-17.88721 c 1.401111,-1.38721 4.849159,-6.66094 5.402293,-8.26273 0.230583,-0.66772 0.716097,-1.5451 1.07892,-1.9497 0.362823,-0.40463 0.889234,-1.22126 1.1698,-1.81475 0.280566,-0.59348 1.107133,-2.08286 1.836816,-3.30972 0.729682,-1.22685 1.326695,-2.33291 1.326695,-2.4579 0,-0.12498 0.07646,-0.22809 0.169911,-0.22912 0.35683,-0.004 0.736511,-1.3468 0.741824,-2.62372 0.0031,-0.73206 0.110917,-1.81512 0.239714,-2.40679 0.169683,-0.77949 0.155278,-1.6201 -0.05231,-3.05229 l -0.286481,-1.97654 -0.916068,0.13858 c -0.97754,0.14787 -3.376335,0.92285 -4.028044,1.30134 -0.216364,0.12567 -0.49783,0.22848 -0.62548,0.22848 -0.354683,0 -2.328412,0.9923 -2.775834,1.39556 -0.461617,0.41606 -0.570383,2.44115 -0.131113,2.44115 1.012026,0 1.438846,2.03311 0.765995,3.64874 -0.180373,0.4331 -0.393415,1.3205 -0.473425,1.97198 -0.111739,0.90984 -0.323881,1.37337 -0.914832,1.99886 -0.680587,0.72038 -0.730522,0.85545 -0.432771,1.17061 0.704734,0.74594 0.377128,1.52937 -1.042842,2.49384 -1.017004,0.69077 -1.112614,0.83525 -1.112614,1.68138 0,0.9743 -0.578686,4.23372 -1.359431,7.65694 -0.255681,1.12104 -0.528411,2.40138 -0.60607,2.84521 -0.137411,0.78532 -0.126993,0.79891 0.388381,0.50696 0.291268,-0.16499 1.027901,-0.79336 1.636962,-1.39637 z M 124.4558,137.61117 c 0.73879,-1.759 1.03447,-3.43764 0.67292,-3.82033 -0.0777,-0.0823 -0.38657,-0.92044 -0.68631,-1.86261 -0.47382,-1.48933 -1.21131,-2.83154 -1.21131,-2.20454 0,0.11757 -0.35628,0.65432 -0.79173,1.1928 -0.77155,0.95406 -0.79691,1.05153 -0.99445,3.81993 -0.19588,2.74517 -0.18638,2.85462 0.282,3.24865 0.47923,0.40315 1.57767,0.64575 2.12825,0.47005 0.15635,-0.05 0.42662,-0.42967 0.60063,-0.84395 z"
id="path9537"
/>
</g>
</svg>

<span id="avatar-placeholder" />
</div>
<h1>Douglas Anderson</h1>
<h2>{byline}</h2>
Expand Down
14 changes: 13 additions & 1 deletion styles/_index_page.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,26 @@
position: relative;
left: 0;
top: 0;
width: 20rem;
height: auto;
padding: 0;
}

.placeholder {
#avatar-outline {
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
display: block;
}

#avatar-placeholder {
position: absolute;
left: 0;
top: 0;
z-index: -2;
display: block;
width: 20rem;
height: auto;
min-height: 20rem;
Expand Down

0 comments on commit d1db1ff

Please sign in to comment.