
[Starting last month (June 2021)](https://developers.google.com/search/blog/2021/04/more-details-page-experience?hl=en#gradual-rollout),
your page’s [Core Web Vitals](https://web.dev/vitals/) will be taken into account by Google Search
ranking. That means that if you have bad performance results your page might be ranked lower on
Google results. You can check how your pages perform on
[Google Search Console](https://search.google.com/search-console/core-web-vitals/summary).

If you’re using Webflow, it’s not very clear what are the most effective changes you can bring to
improve the performance of your website. That’s why I compiled a list of what I believe are the most
impactful improvements for most Webflow websites.

# 1. Use Image Elements Over Background Images

Image elements have better optimization capabilities than background images. For getting the best
results, you will want to replace all
[background images](https://university.webflow.com/lesson/background-styles-overview#background-image)
for [image elements](https://university.webflow.com/lesson/image). In some cases, you might need to
use the [object-fit property](https://webflow.com/feature/object-fit-support) to reproduce the
background behavior.

# 2. Resize and Compress Images

Image size is often what slows down the load time the most. That’s why it’s important to compress
and correctly size them.

There are many tools to resize and compress images, however, none of them were good at optimizing
images just by handing an URL of a page. That’s why I built a CLI tool named
[web-img-optimizer](https://github.com/IGassmann/web-img-optimizer) that makes it easy and that
works with PNG, JPEG, SVG, and GIF files. You just need to pass the URL of a page you want to
optimize and it will download, resize and compress all images that are loaded by image elements.

```bash
wio optimize https://webflow.com/
```

Then you just need to upload the new images into your assets and
[replace the images](https://university.webflow.com/lesson/image#replace-images) with the optimized
ones.

# 3. Preconnect to assets’ origin

Webflow serves uploaded assets such as images and fonts from the domain _assets.website-files.com_.
For loading the assets, the browser needs to make an extra connection to that domain. A
[preconnect tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preconnect) informs
the browser that your page intends to establish a connection to another origin, and that you'd like
the process to start as soon as possible.

Improve the page load speed by adding the following to the top of the
[head tag in your project’s settings](https://university.webflow.com/lesson/custom-code-in-the-head-and-body-tags#head-code).

```html
<link rel="preconnect" href="https://assets.website-files.com/" />
```

Further reading: [Preconnect to required origins ](https://web.dev/uses-rel-preconnect/)

# 4. Preload LCP Image

Preload allows you to inform the browser about critical resources you want to load as soon as
possible. Preload can be a **game-changer** for improving your page speed.

If the [largest visible element within the viewport (LCP)](https://web.dev/lcp/) is an image, you
can preload it by adding a
[preload tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) to your page
such as the one below.

```html
<link
  rel="preload"
  as="image"
  href="https://assets.website-files.com/...hero.png"
  imagesrcset="https://assets.website-files.com/...hero-p-800.png 800w, https://assets.website-files.com/...hero.png 1400w"
  imagesizes="(max-width: 479px) 100vw, (max-width: 767px) 100, (max-width: 991px) 600px, 55vw"
/>
```

[web-img-optimizer](https://github.com/IGassmann/web-img-optimizer) can automatically identify the
[LCP](https://web.dev/lcp/) image of a page and generate the
[preload tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) that you should
add to the top of the
[head tag in your page’s settings](https://university.webflow.com/lesson/custom-code-in-the-head-and-body-tags#inside-%3C-head-%3E-tag).

```bash
wio preload https://webflow.com/
```

# 5. Lazy Load Images

Lazy loading is a technique for loading images when they are needed rather than all at once. This
can considerably improve your loading speed by deferring the loading of off-screen images.

[Webflow lazy load new images by default](https://webflow.com/feature/new-images-set-to-lazy-load-by-default),
but you might still need to update older images. You can set your images to lazy load by updating
the “Load” setting on the
[image settings pane](https://university.webflow.com/lesson/image#edit-image-settings).

You also need to declare the image elements’ width and height, otherwise, lazy loading might not
work properly.

The issue is that before the images are loaded, their height on the page is unknown. The browser
needs to download the image, observe its aspect ratio, and calculate its height. Before this, all
the images have a height of 1px. Since all images have a height of 1px, they are all considered as
"within the viewport" and are immediately loaded.

To counter that, you need to set the images’ width and height values to the dimensions of the
uploaded asset on your
[image elements’ settings](https://university.webflow.com/lesson/image#edit-image-settings).

It’s also important that you have either height or width set explicitly as **Auto** in your
[image’s style settings](https://university.webflow.com/lesson/style-panel-overview) so that the
image resizes without breaking its aspect ratio.

# Further Optimizations

- Remove unused
  [styles](https://university.webflow.com/lesson/style-manager#deleting-all-unused-styles-in-the-style-manager)
  and [interactions](https://webflow.com/feature/clean-up-unused-interactions)
- Optimize fonts
  - [Use custom fonts](https://university.webflow.com/lesson/custom-fonts) over Google or Adobe
    fonts.
  - Use a [variable font](https://web.dev/variable-fonts/)
- Optimize third-party scripts
  - Audit and remove unused scripts
  - Migrate scripts to Segment when available as a
    [cloud-mode destination](https://segment.com/docs/connections/destinations/#connection-modes)
- Remove unused [pages](https://university.webflow.com/lesson/pages-panel#deleting-pages) and
  [symbols](https://university.webflow.com/lesson/symbols#delete-a-symbol)

If there’s enough demand for the following optimizations, I will post a new blog post covering them.
Tweet me [@i_gassmann](https://twitter.com/I_Gassmann) to let me know if you want to see me cover
these topics.


5 steps to quickly improve the performance of your pages.

How to Optimize the Performance (Core Web Vitals) of a Webflow Page


A few months ago I applied for my dream job. A Product Engineer role at a startup named
[Stir](https://usestir.com/). I researched all I could find about them and applied like everyone
else through their job application form. After a few steps in the job application process, the
conversation started to die off. I followed up for weeks, but I wouldn’t get any more replies. I
started to give up and went looking for other jobs. But I couldn't get that job off my mind. I felt
like I hadn't tried everything I could. So I went looking for advice.

I shared my experience with the people at [Praxis](https://discoverpraxis.com/) and
[Crash](https://crash.co/), and they persuaded me to keep trying until I hadn't a clear negative
answer. They also suggested I record a video.

So I started drafting a script and made sure to follow the
[tips from Crash to make a great video pitch](https://crash.co/content/how-to-make-a-great-video-pitch/).
After two days of work, the video was ready. But it wasn’t enough for showing that I could do the
job they required.

I wanted to prove that I could easily learn their tech stack and follow their coding style. So I
started dissecting [their website](https://usestir.com/) to uncover what technologies they used, how
they structured their page, what naming conventions they followed, and how they styled their
components. In less than a week, I built a website that mirrored theirs and used it as a pitch for
the job. I hosted the video on it, added extra details about me, made the code
[available on GitHub](https://github.com/IGassmann/stir-pitch-website), and published it at
[igor4stir.com](https://igor4stir.com/).

I followed up once more through email but this time with the website. I also shared it on
[Twitter](https://twitter.com/i_gassmann/status/1384219211673739268),
[Hacker News](https://news.ycombinator.com/item?id=26867369), and
[LinkedIn](https://www.linkedin.com/posts/igassmann_igor-stir-activity-6789999753825443842-eEFI) to
get more visibility to the website and the company as well.

A pitch like this isn’t only good marketing for me, but also for Stir. It shows to others how great
the company must be for someone to take on such an effort to get the opportunity to work with them.

No need to say that this time I got a reply. However, since they only hired in the US, I wasn’t able
to get the job. But actions like such never go unnoticed. They help you
[build your brand](https://igassmann.me/post/new-brand) and show how driven you are.

Although I didn’t get the job, the website helped me to be accepted into
[On Deck First 50 Fellowship](https://www.beondeck.com/first-50) which I’m sure will help me get my
next dream job. I’m super excited to be joining the On Deck community. I’ve seen amazing talents
accelerate their careers with their programs. Stir’s founders themselves have
[met through the On Deck Fellowship](https://www.beondeck.com/case-studies/stir)!

This whole project shows that with just a week of work you can turn a boring job application into an
exciting marketing campaign that could not only get you the job but also help you develop your
brand.

If you don't have the skills to build a website yourself, you can easily build one on
[Crash](https://crash.co/). On Crash, you can build a pitch for your dream job.


Pitch Your Dream Job with a Website


You might be starting a YouTube channel, or you are a YouTuber and you're trying to figure out how
to grow your audience, or maybe you want to understand how YouTube’s algorithm works.

If you’re one of these people, I’ve saved time for you and compiled the essential videos to get a
grasp of how to successfully grow as a YouTuber from the best channels about the subject.

::youtube-playlist{id='PLpFpxBexdqyp7nPBUkxBDJdEqPVONUEsF'}


Must-watch videos for creators on YouTube.

YouTube Creator Essentials


After reading [How to Market Yourself](https://www.swyx.io/marketing-yourself/) by
[swyx](https://www.swyx.io/about/), I got inspired to revamp my online presence starting with the
visual aspects of my brand.

I identified two key components of my online brand: social profiles (Twitter, GitHub, LinkedIn,
Facebook…), and my website. I noticed that I wasn’t being consistent across them. I had two
different profile pictures and different bios across the platforms.

## Social Profiles

The most important part for my social profiles — besides posting content — was to use a **consistent
profile picture**. A profile picture works like a company logo. You want it to be easily recognized.

I wanted to have my face on it because faces attract user attention as they do for
[YouTube video thumbnails](https://www.youtube.com/watch?v=GPX4PiwQz0U).

For identifying what kind of profile picture I needed, I **scanned through all profile pictures of
the people I follow on Twitter**. The profiles I follow are more likely to match my branding
preferences and my targeted audience. I selected 18 of them in a moodboard and highlighted the ones
that caught my attention the most.

![Profile Picture Moodboard](/images/posts/new-brand/profile-picture-moodboard.png '640x344')

I noticed that **bright pictures with a zoomed-in face and a high contrast with the background**
were the most eye-catching ones. So I calculated the opposite colors of my skin to identify the
ideal background color for my picture.

![Profile Picture Colors](/images/posts/new-brand/profile-picture-colors.png '240x234')

Then I found a scenario that matched the color and took some pictures of myself with the help of my
girlfriend. Finally, with
[macOS Photos](https://support.apple.com/guide/photos/editing-basics-pht304c2ace6/6.0/mac/11.0), I
edited the picture to make it brighter and more colorful.

![Profile Picture](/images/posts/new-brand/profile-picture.png '128x128')

## Personal Website

I already had an existing website made with the Gatsby starter,
[Lumen](https://github.com/alxshelepenok/gatsby-starter-lumen). However, it was devoided of a
distinct visual identity and was missing some features I wanted to add.

[Gatsby](https://www.gatsbyjs.com/) did well its job as a static site generator. But I wanted to
take the oportunity to move to [Next.js](https://nextjs.org/), which is my
[preferred framework for web apps](https://igassmann.me/post/2020-mvp-stack).

Before designing the website, I began the work by identifying my goals and target audience:

- **Sell myself to potential employers**: startup founders
- **Build an audience of readers**: startup founders and influencers

From the goals, I listed the associated features:

- **Sell myself to potential employers**: startup founders
  - About page
    - Bio
    - Tech Skills
  - Portfolio page
  - Profile picture
  - Startup-oriented branding
- **Build an audience of readers**: startup founders and influencers
  - RSS support
  - Commenting
  - Post sharing
    - Hacker News
    - Twitter
    - Reddit
    - LinkedIn
    - Facebook
  - Topics
    - #technology
    - #startups
    - #liberty
    - #ethics
    - #culture
    - #content-creation

With that, I had a clear image of what I wanted for my website.

### Design

As I did for my profile picture, I put together a moodboard. I looked for websites that had a
cyberpunk feeling which was the esthetic that I had an affinity for my brand.

![Website Moodboard](/images/posts/new-brand/website-moodboard.png '640x434')

Then I inspected the fonts and colors of the websites to help me choose the ones for my own. With
all of that, I was able to define the colors and typography of my website.

![Styleguide](/images/posts/new-brand/styleguide.png '640x168')

I had everything I needed to fully design the website. I started by designing the desktop mockups on
[Figma](https://figma.com/) since I expected my website to be primarily accessed on desktop.

I made sure to effectively use all useful Figma features such as
[Auto layout](https://help.figma.com/hc/en-us/articles/360040451373-Create-dynamic-designs-with-Auto-layout),
[components](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-Components-in-Figma)
and, [styles](https://help.figma.com/hc/en-us/articles/360039238753-Styles-in-Figma). After a few
days of work, I had my all my mockups ready and filled with content for desktop, table, and mobile.

::figma-file{url='https://www.figma.com/file/dBF5UcvvdzhuzEd4ZYTgux/?node-id=0%3A1'}

With the mockups, I built the
[prototypes](https://help.figma.com/hc/en-us/articles/360040314193-Guide-to-prototyping-in-Figma)
that I shared with some trusted friends to receive early-feedback.

::figma-file{url='https://www.figma.com/proto/dBF5UcvvdzhuzEd4ZYTgux/Personal-Website?node-id=78%3A327&viewport=-1854%2C372%2C0.5385761857032776&scaling=scale-down&page-id=78%3A140'}

Finally, I made a design system and published all the
[designs on Zeplin](https://scene.zeplin.io/project/605ca4ee92a33101a2c90ac4) for development
handoff.

::figma-file{url='https://www.figma.com/file/dBF5UcvvdzhuzEd4ZYTgux/?node-id=65%3A0'}

### Development

For the first iteration of my website, I wanted to have it available in a week. So I decided to cut
development features such as TypeScript and tests. The website didn't have much complexity. I wasn’t
expecting many bugs while developing.

I started by implementing the
[layout components](https://github.com/IGassmann/personal-website/tree/0c66e1d164efac2df32508ec33312e3cfa28fb3d/src/layouts)
and the global SCSS code. Then I worked on a page-by-page basis until arriving at the
[posts page](https://github.com/IGassmann/personal-website/blob/main/src/pages/post/%5BpostSlug%5D.js).
This page contains the
[Post component](https://github.com/IGassmann/personal-website/blob/0c66e1d164efac2df32508ec33312e3cfa28fb3d/src/components/Post/Post.js),
which uses `react-markdown` with a few
[custom renderers](https://github.com/IGassmann/personal-website/blob/0c66e1d164efac2df32508ec33312e3cfa28fb3d/src/lib/markdownRenderers.js)
for rendering the content written in Markdown.

One of the renderers I implemented uses `remark-directives` for defining shortcodes such as for
embedding Figma files in my posts:

**Figma Shortcode**

```
::figma{url='https://www.figma.com/file/dBF5UcvvdzhuzEd4ZYTgux/?node-id=65%3A0'}
```

**Shortcodes Handler**

```js
leafDirective: ({ attributes, name }) => {
  if (name === 'figma') {
    return (
      <iframe
        allowFullScreen
        src={`https://www.figma.com/embed?embed_host=share&url=${attributes.url}`}
      />
    );
  }
};
```

In a couple of days, I was able to fully implement the website and deploy it on
[Vercel](https://vercel.com/).

I made the website [public on GitHub](https://github.com/IGassmann/personal-website) for any
interested person to access the implementation details.

```
.
├── public
│   ├── fonts
│   └── images
└── src
    ├── components
    │   ├── About
    │   │   ├── MainInterestsList
    │   │   │   └── InterestItem
    │   │   └── SkillsList
    │   │       └── SkillItem
    │   ├── BlogHomeButton
    │   ├── GoogleTagManager
    │   ├── Icon
    │   ├── Pagination
    │   ├── Post
    │   │   └── PostMetadata
    │   │       └── Tags
    │   ├── PostFeed
    │   ├── Profile
    │   └── Work
    ├── constants
    ├── content
    │   └── posts
    ├── hooks
    ├── layouts
    │   ├── DefaultLayout
    │   │   ├── Sidebar
    │   │   │   ├── Menu
    │   │   │   └── SocialLinks
    │   └── SingleColumnLayout
    │       └── Footer
    ├── lib
    ├── pages
    └── styles
```

### Future Improvements

There are still many features and code quality enhancements I want to bring to the codebase that
would make the codebase exemplar. I will be adding these in my free time. For now, I'm listing them
on the website's
[README.md file](https://github.com/IGassmann/personal-website/blob/main/README.md).

- Migrate to [TypeScript](https://www.typescriptlang.org/)
- Set up [ESLint](https://eslint.org/), [Prettier](https://prettier.io/),
  [commitlint](https://commitlint.js.org/#/), and
  [lint-staged](https://github.com/okonet/lint-staged)
- Set up [Jest](https://jestjs.io/) and [Cypress](https://www.cypress.io/)
- Add tests
- Migrate to [Tailwind CSS](https://tailwindcss.com/)
- Add share buttons for posts
- Add commenting feature
- Add "Edit on GitHub" button to pages
- Set up git-based CMS [Forestry](https://forestry.io/)
- Set up a newsletter

## Final Brand

With the website done, I re-used its visual identity on my social profiles.

![Twitter Profile](/images/posts/new-brand/twitter-profile.png '312x224')

Now there was only one missing piece and also the most important: **content**.

To complete my new brand, I need to keep consistently producing content on my blog and social media.
Starting with this blog post.


How to Optimize the Performance (Core Web Vitals) of a Webflow Page

Pitch Your Dream Job with a Website

YouTube Creator Essentials

New Brand, Who Dis?