donderdag 26 november 2020

pagespeeds - async css

 async css 

if you want to speed up your website load your css async with a simple javacript function

<link rel="preload" href="/static/css/main.50edf018.chunk.css" as="style" onload="this.rel='stylesheet'">

<noscript><link rel="stylesheet" href="/static/css/main.50edf018.chunk.css"></noscript>




force www in your url

Add rewrite rule to you web.config to enforce http://www.extending.nl instead of http://extending.nl

 <rewrite>

 <rules>

 <rule name="WWW Rewrite" enabled="true">

      <match url="(.*)" />

        <conditions>

          <add input="{HTTP_HOST}" negate="true" pattern="^www\.(.*)$" />

        </conditions>

        <action type="Redirect" url="http://www.{HTTP_HOST}/{R:0}" appendQueryString="true" redirectType="Permanent" />

 </rule>

support webp in your IIS

 support webp in your IIS

add below fileExtension to your web.config.

<system.webServer>

  <staticContent>

<remove fileExtension=".webp"/>

      <mimeMap fileExtension=".webp" mimeType="image/webp"/>

    <clientCache cacheControlMode="UseExpires"

            httpExpires="Tue, 19 Jan 2038 03:14:07 GMT" />

</staticContent>

</system.webServer>

React -> index.html without caching for updates

in your web.config add Cache-Control header with no-cache to support updates in your website if you publish a new version of your website 

<?xml version="1.0"?>

<configuration>

<location path="index.html">

<system.webServer>

<httpProtocol>

<customHeaders>

<add name="Cache-Control" value="no-cache" />

</customHeaders>

</httpProtocol>

</system.webServer>

</location>

jpg to webp

 commandline tool cwebp 

https://web.dev/codelab-serve-images-webp/