{"tag":"web development","articles":{"blog\/technology\/self-hosting-font-awesome-5-pro-for-yarn-npm":{"key":"blog\/technology\/self-hosting-font-awesome-5-pro-for-yarn-npm","type":"article","published":true,"meta":{"createdAt":"2020-07-27T20:05:47+02:00","publishedAt":"2020-07-27T20:05:47+02:00","group":null,"category":"blog","subcategory":"technology","slug":"self-hosting-font-awesome-5-pro-for-yarn-npm"},"content":{"en":{"slug":"self-hosting-font-awesome-5-pro-for-yarn-npm","title":"Self-hosting Font Awesome 5 Pro for yarn\/npm","intro":"\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/fontawesome6_small.png\u0022 alt=\u0022Your year of Pro services for backing FA5 expire on August 1! Subscribe to the all-new Font Awesome 6 to extend your services and get the new version. Subscribe now for half the price. Just $49\/year!\u0022 class=\u0022border-bottom\u0022 width=\u0022480\u0022 height=\u0022136.66666666667\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAKCAYAAADcpvzeAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB\/ElEQVQ4jc2Tu46TMRCFvxnb\/5\/LLlBw03IRDQJKKCgoeAY6hCgpeAqejBdAFFQIKCmQENoQdkM2\/yW2h8LZTVIAKwQSR5rC42PP8fGMdG+fGoCZETM4AQOWEYIHsxIikDNkg+DKOq3WdRD+FjzAq\/eJ6cy4f9sxOTScA+8gxlI0+CIQAacQozGohEVnVEG4dK7wRIpAlRLLVPhOoe3Lmd3RtvjZkZHNCF4YDwTp3j2z9bZtkbHtjMjareLqOv8zHPPX537tpuSc7eM0Ukniwq4DM1S12Oc9y5jIOW8UMJxTvHMbQgWz7cfYxj2nwXK5xHtfvqyLgCQmk2+ICCllzIyrV\/bIOdP1PYKgTk9scap0fQ9myMqiEAKLpmFQD+j7nvF4dGpBbduxs+ORJ89f2O\/p\/x6fPu+zd\/k8cu3uI2u7npwzdRW4c\/MGANmMnDOz70eMR0OGw5qcMl2\/ZNG07H89+OPiTmF3uJ2LGebNaspq1\/HwXuDlm8SX\/enJ39dVIMbE9GCGzhSnStv1jIY1Z3bGqAoiJULwqCoxRlQVVSWlhHMKBk3bUVWBpulwsmBUC0etMR4IlYd5C\/PGiqBF73n9oTTraDRAEJq2o2k7RIXgHSkbIiuRKaEqGKAixFQa\/2A2P5VDZ8dw\/aKwOXFtD5NDQ249ePxf9NAxfgCKbvUuzuwSpgAAAABJRU5ErkJggg==\u0022 data-src=\u0022https:\/\/avris.it\/image\/fontawesome6_small.png\u0022 alt=\u0022Your year of Pro services for backing FA5 expire on August 1! Subscribe to the all-new Font Awesome 6 to extend your services and get the new version. Subscribe now for half the price. Just $49\/year!\u0022 class=\u0022border-bottom\u0022 width=\u0022480\u0022 height=\u0022136.66666666667\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EFour years ago I backed Font Awesome 5 on Kickstarter,\nand in return I received a license to use it and to access the pro features.\nThe license might be perpetual, but the pro features, sadly, are not \ud83d\ude22\u003C\/p\u003E\n\u003Cblockquote class=\u0022blockquote ml-4 pl-4 border-left\u0022\u003E\n\u003Cp\u003EIf you don\u0027t subscribe to a Pro plan, you won\u0027t be able to install Font Awesome Pro using npm or yarn.\u003C\/p\u003E\n\u003C\/blockquote\u003E\n\u003Cp\u003EThat\u0027s the one feature I need! And on August 1\u003Csup\u003Est\u003C\/sup\u003E it will be gone!\nMy dev setup, my deployment setup, of multiple projects,\neverything depends on fetching Font Awesome from the npm registry.\u003C\/p\u003E\n\u003Cp\u003ELuckily, there\u0027s a simple way around it \ud83d\ude09\u003C\/p\u003E\u003Csvg xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 style=\u0022display: none;\u0022\u003E\u003C\/svg\u003E","content":"\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/fontawesome6_big.png\u0022 alt=\u0022Your year of Pro services for backing FA5 expire on August 1! Subscribe to the all-new Font Awesome 6 to extend your services and get the new version. Subscribe now for half the price. Just $49\/year!\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022273.33333333333\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAKCAYAAADcpvzeAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB\/ElEQVQ4jc2Tu46TMRCFvxnb\/5\/LLlBw03IRDQJKKCgoeAY6hCgpeAqejBdAFFQIKCmQENoQdkM2\/yW2h8LZTVIAKwQSR5rC42PP8fGMdG+fGoCZETM4AQOWEYIHsxIikDNkg+DKOq3WdRD+FjzAq\/eJ6cy4f9sxOTScA+8gxlI0+CIQAacQozGohEVnVEG4dK7wRIpAlRLLVPhOoe3Lmd3RtvjZkZHNCF4YDwTp3j2z9bZtkbHtjMjareLqOv8zHPPX537tpuSc7eM0Ukniwq4DM1S12Oc9y5jIOW8UMJxTvHMbQgWz7cfYxj2nwXK5xHtfvqyLgCQmk2+ICCllzIyrV\/bIOdP1PYKgTk9scap0fQ9myMqiEAKLpmFQD+j7nvF4dGpBbduxs+ORJ89f2O\/p\/x6fPu+zd\/k8cu3uI2u7npwzdRW4c\/MGANmMnDOz70eMR0OGw5qcMl2\/ZNG07H89+OPiTmF3uJ2LGebNaspq1\/HwXuDlm8SX\/enJ39dVIMbE9GCGzhSnStv1jIY1Z3bGqAoiJULwqCoxRlQVVSWlhHMKBk3bUVWBpulwsmBUC0etMR4IlYd5C\/PGiqBF73n9oTTraDRAEJq2o2k7RIXgHSkbIiuRKaEqGKAixFQa\/2A2P5VDZ8dw\/aKwOXFtD5NDQ249ePxf9NAxfgCKbvUuzuwSpgAAAABJRU5ErkJggg==\u0022 data-src=\u0022https:\/\/avris.it\/image\/fontawesome6_big.png\u0022 alt=\u0022Your year of Pro services for backing FA5 expire on August 1! Subscribe to the all-new Font Awesome 6 to extend your services and get the new version. Subscribe now for half the price. Just $49\/year!\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022273.33333333333\u0022\u003E\u003C\/span\u003E\n                \u003Cfigcaption\u003E\n                    \u003Ca href=\u0022https:\/\/fontawesome.com\/icons?d=gallery\u0026s=brands,light\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\n                        \u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E\n                        fontawesome.com\/icons\n                    \u003C\/a\u003E\n                \u003C\/figcaption\u003E\n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EFour years ago I backed Font Awesome 5 on Kickstarter,\nand in return I received a license to use it and to access the pro features.\nThe license might be perpetual, but the pro features, sadly, are not \ud83d\ude22\u003C\/p\u003E\n\u003Cblockquote class=\u0022blockquote ml-4 pl-4 border-left\u0022\u003E\n\u003Cp\u003EIf you don\u0027t subscribe to a Pro plan, you won\u0027t be able to install Font Awesome Pro using npm or yarn.\u003C\/p\u003E\n\u003C\/blockquote\u003E\n\u003Cp\u003EThat\u0027s the one feature I need! And on August 1\u003Csup\u003Est\u003C\/sup\u003E it will be gone!\nMy dev setup, my deployment setup, of multiple projects,\neverything depends on fetching Font Awesome from the npm registry.\u003C\/p\u003E\n\u003Cp\u003ELuckily, there\u0027s a simple way around it \ud83d\ude09\u003C\/p\u003E\n\u003Cp\u003EI\u0027m allowed by the license to download the project and create backups,\nbut obviously not to share it with others \u2013 so it\u0027s all done in a \u003Cstrong\u003Eprivate repository\u003C\/strong\u003E.\u003C\/p\u003E\n\u003Cp\u003EFirst, I fetched the latest version of the project:\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode\u003Eyarn add @fortawesome\/fontawesome-pro\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EThen, I just went to \u003Ccode\u003Enode_modules\/@fortawesome\/fontawesome-pro\u003C\/code\u003E,\ninitialised a fresh git repository there and pushed it to gitlab.com\/Avris\/FontAwesomePro.\u003C\/p\u003E\n\u003Cp\u003ENow, whenever I want to use FontAwesome 5 in a project, I just go:\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode\u003Eyarn add git+ssh:\/\/git@gitlab.com:Avris\/FontAwesomePro.git\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EAnd that\u0027s it!\u003C\/p\u003E\n\u003Cp\u003EI was surprised that it\u0027s so simple.\nOf course my repository won\u0027t get automatically updated with the project,\nbut since version 5 won\u0027t be developed anymore, it doesn\u0027t matter at all.\nAnd it works like a charm!\u003C\/p\u003E\u003Csvg xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 style=\u0022display: none;\u0022\u003E\u003C\/svg\u003E","tags":["fontawesome","icons","web development","hosting","gitlab","git","yarn","npm"],"hasMore":true,"image":"https:\/\/avris.it\/image\/fontawesome6_small.png","introLite":"\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/fontawesome6_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/fontawesome6_mini.png\u0022 alt=\u0022Your year of Pro services for backing FA5 expire on August 1! Subscribe to the all-new Font Awesome 6 to extend your services and get the new version. Subscribe now for half the price. Just $49\/year!\u0022 width=\u0022240\u0022 height=\u002268.333333333333\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EFour years ago I backed Font Awesome 5 on Kickstarter,\nand in return I received a license to use it and to access the pro features.\nThe license might be perpetual, but the pro features, sadly, are not \ud83d\ude22\u003C\/p\u003E\n\u003Cblockquote\u003E\n\u003Cp\u003EIf you don\u0027t subscribe to a Pro plan, you won\u0027t be able to install Font Awesome Pro using npm or yarn.\u003C\/p\u003E\n\u003C\/blockquote\u003E\n\u003Cp\u003EThat\u0027s the one feature I need! And on August 1\u003Csup\u003Est\u003C\/sup\u003E it will be gone!\nMy dev setup, my deployment setup, of multiple projects,\neverything depends on fetching Font Awesome from the npm registry.\u003C\/p\u003E\n\u003Cp\u003ELuckily, there\u0027s a simple way around it \ud83d\ude09\u003C\/p\u003E","contentLite":"\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/fontawesome6_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/fontawesome6_mini.png\u0022 alt=\u0022Your year of Pro services for backing FA5 expire on August 1! Subscribe to the all-new Font Awesome 6 to extend your services and get the new version. Subscribe now for half the price. Just $49\/year!\u0022 width=\u0022240\u0022 height=\u002268.333333333333\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003Cfigcaption\u003E\n                    \u003Ca href=\u0022https:\/\/fontawesome.com\/icons?d=gallery\u0026s=brands,light\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csmall\u003Efontawesome.com\/icons\u003C\/small\u003E\u003C\/a\u003E\n                \u003C\/figcaption\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EFour years ago I backed Font Awesome 5 on Kickstarter,\nand in return I received a license to use it and to access the pro features.\nThe license might be perpetual, but the pro features, sadly, are not \ud83d\ude22\u003C\/p\u003E\n\u003Cblockquote\u003E\n\u003Cp\u003EIf you don\u0027t subscribe to a Pro plan, you won\u0027t be able to install Font Awesome Pro using npm or yarn.\u003C\/p\u003E\n\u003C\/blockquote\u003E\n\u003Cp\u003EThat\u0027s the one feature I need! And on August 1\u003Csup\u003Est\u003C\/sup\u003E it will be gone!\nMy dev setup, my deployment setup, of multiple projects,\neverything depends on fetching Font Awesome from the npm registry.\u003C\/p\u003E\n\u003Cp\u003ELuckily, there\u0027s a simple way around it \ud83d\ude09\u003C\/p\u003E\n\u003Cp\u003EI\u0027m allowed by the license to download the project and create backups,\nbut obviously not to share it with others \u2013 so it\u0027s all done in a \u003Cstrong\u003Eprivate repository\u003C\/strong\u003E.\u003C\/p\u003E\n\u003Cp\u003EFirst, I fetched the latest version of the project:\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode\u003Eyarn add @fortawesome\/fontawesome-pro\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EThen, I just went to \u003Ccode\u003Enode_modules\/@fortawesome\/fontawesome-pro\u003C\/code\u003E,\ninitialised a fresh git repository there and pushed it to gitlab.com\/Avris\/FontAwesomePro.\u003C\/p\u003E\n\u003Cp\u003ENow, whenever I want to use FontAwesome 5 in a project, I just go:\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode\u003Eyarn add git+ssh:\/\/git@gitlab.com:Avris\/FontAwesomePro.git\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EAnd that\u0027s it!\u003C\/p\u003E\n\u003Cp\u003EI was surprised that it\u0027s so simple.\nOf course my repository won\u0027t get automatically updated with the project,\nbut since version 5 won\u0027t be developed anymore, it doesn\u0027t matter at all.\nAnd it works like a charm!\u003C\/p\u003E","words":227,"readTime":null,"lang":"en"}}},"blog\/technology\/going-lite":{"key":"blog\/technology\/going-lite","type":"article","published":true,"meta":{"createdAt":"2020-06-28T13:09:18+02:00","publishedAt":"2020-06-28T13:09:18+02:00","group":null,"links":[{"icon":"paper-plane","colour":"primary","url":"https:\/\/avris.it\/lite","displayUrl":null}],"category":"blog","subcategory":"technology","slug":"going-lite"},"content":{"en":{"slug":"going-lite","title":"Going lite \ud83d\ude09","intro":"\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/avris-lite_small.png\u0022 alt=\u0022Screenshot of the lite version of this blog\u0022 class=\u0022border-bottom\u0022 width=\u0022480\u0022 height=\u0022360.24144869215\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAbCAYAAAAULC3gAAAACXBIWXMAAA7EAAAOxAGVKw4bAAADUElEQVRIia2X227iVhSGv33wITYk0DiJWk07TaW0j9CX6Bv3Eare9qbNaJTOKJNJBoIxYOx96EUEDQQ7DPBLFtbm996f19qHZeGc80IIvPes\/65LCAHwwrPevs+9XjRsGvzP36\/5cjumLCp+\/e1nLn7ovfBsAt9Hwq\/1+JzaGoezDgAVKKR8Cd\/0xrt6dBvtuMiZzWZUVYXWmkAH1LlCKoGpHKffdTnqhlu9+bZqBer1emgZ8PHDI53+EelZQnoRr3gOnTL5mkEIgY4EOpR8uS2Yz+qDArwKtJ7ftJvw5pdThuMO\/96dUEwUzvlG\/8GBNslaS13k2OKBv\/54YF4elGFFL1bZuoyxPNwbZlPN2bkk7TRH5RCrTHrvabucc0wnHmPg\/Tu3fHjT1fTf8\/bXPI0b40LOOrpJyejzkONIA9lXz5umqGzy6NeWbV3XTKcT0n7E+Zs+zjm89wwGA5IkIU3TraG2Am+bQ9ZanHNbDfg10lo3Rqw1Qvf39xRFwduzOe8+aZRShGFIVVU457i6utoZqmnc1ggVRQGAlBJrLUEQYK1FCIG1Fu89Simccwgh6HQ6OwMu1Boh5xx5nhNFEUIIRqPR08TTGmMMcRxTluUSdtv51ArUNvuvr6+5ubkhTVPSNCXLsr3StI2Ee34OrOl5AbZIy+JeSrmxqNv3KGk97fM85+7uDmmnVO4UY+copZhOZpxmHbyv0VpTliUnJydorcmy7HBA6xVgVVUopRmOAiZFhRCKIFBU85i040gShfeeXq9HXdfLKwiCnYFWUraxJPWe\/OMHHscxSitMbRECemcpx1myfO7J6hv72dbTCjQcDsnzp6oxjmKqukIICIIQKeVTexyv7EtSyo0fC01A655WIOcctXGMHnKmQ0OcAMy5H31LHENVwcUFnHzj0Vr\/3+k+QG0b42Aw4NOjISBnVhiSJMEzx9SgVYhUhqMwQYWK0egR7z2Xl5eE4e51tm5auovSQ9mCf94\/Ms+P6PU93eOau1tNp2v4\/q2kdhXzqUNrzfn5+XJCHyRlm2Rqw+e\/hwxMnzD0\/PjTk31xQC72pOeD7qoVIGMM1toVw3A4ZDKZMB6PiaKIsizRWhNF0dJrrSXLMvr9\/l4wQRAgpeQ\/IlqSidy6tlkAAAAASUVORK5CYII=\u0022 data-src=\u0022https:\/\/avris.it\/image\/avris-lite_small.png\u0022 alt=\u0022Screenshot of the lite version of this blog\u0022 class=\u0022border-bottom\u0022 width=\u0022480\u0022 height=\u0022360.24144869215\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EI \u003Ca href=\u0022\/blog\/reducing-website-size-by-a-half-by-optimising-bootstrap-and-fontawesome\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-computer-speaker\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E strive to optimise\u003C\/a\u003E\nthis blog\u0027s performance as well as I can. But chasing a goal of a lightweight website while keeping it \u003Cem\u003Epretty\u003C\/em\u003E\nprevented me from realising the obvious truth that the most performant assets are\u2026 \u003Cem\u003Eno assets\u003C\/em\u003E.\u003C\/p\u003E\n\u003Cp\u003ESo, inspired by \u003Ca href=\u0022https:\/\/sjmulder.nl\/en\/textonly.html\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Sijmen J. Mulder\u0027s directory of text-only websites\u003C\/a\u003E,\nI decided to create a bare version of my blog.\u003C\/p\u003E\n\u003Cp\u003EHere\u0027s how it went:\u003C\/p\u003E\u003Csvg xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 style=\u0022display: none;\u0022\u003E\u003C\/svg\u003E","content":"\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/avris-lite_big.png\u0022 alt=\u0022Screenshot of the lite version of this blog\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022720.48289738431\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAbCAYAAAAULC3gAAAACXBIWXMAAA7EAAAOxAGVKw4bAAADUElEQVRIia2X227iVhSGv33wITYk0DiJWk07TaW0j9CX6Bv3Eare9qbNaJTOKJNJBoIxYOx96EUEDQQ7DPBLFtbm996f19qHZeGc80IIvPes\/65LCAHwwrPevs+9XjRsGvzP36\/5cjumLCp+\/e1nLn7ovfBsAt9Hwq\/1+JzaGoezDgAVKKR8Cd\/0xrt6dBvtuMiZzWZUVYXWmkAH1LlCKoGpHKffdTnqhlu9+bZqBer1emgZ8PHDI53+EelZQnoRr3gOnTL5mkEIgY4EOpR8uS2Yz+qDArwKtJ7ftJvw5pdThuMO\/96dUEwUzvlG\/8GBNslaS13k2OKBv\/54YF4elGFFL1bZuoyxPNwbZlPN2bkk7TRH5RCrTHrvabucc0wnHmPg\/Tu3fHjT1fTf8\/bXPI0b40LOOrpJyejzkONIA9lXz5umqGzy6NeWbV3XTKcT0n7E+Zs+zjm89wwGA5IkIU3TraG2Am+bQ9ZanHNbDfg10lo3Rqw1Qvf39xRFwduzOe8+aZRShGFIVVU457i6utoZqmnc1ggVRQGAlBJrLUEQYK1FCIG1Fu89Simccwgh6HQ6OwMu1Boh5xx5nhNFEUIIRqPR08TTGmMMcRxTluUSdtv51ArUNvuvr6+5ubkhTVPSNCXLsr3StI2Ee34OrOl5AbZIy+JeSrmxqNv3KGk97fM85+7uDmmnVO4UY+copZhOZpxmHbyv0VpTliUnJydorcmy7HBA6xVgVVUopRmOAiZFhRCKIFBU85i040gShfeeXq9HXdfLKwiCnYFWUraxJPWe\/OMHHscxSitMbRECemcpx1myfO7J6hv72dbTCjQcDsnzp6oxjmKqukIICIIQKeVTexyv7EtSyo0fC01A655WIOcctXGMHnKmQ0OcAMy5H31LHENVwcUFnHzj0Vr\/3+k+QG0b42Aw4NOjISBnVhiSJMEzx9SgVYhUhqMwQYWK0egR7z2Xl5eE4e51tm5auovSQ9mCf94\/Ms+P6PU93eOau1tNp2v4\/q2kdhXzqUNrzfn5+XJCHyRlm2Rqw+e\/hwxMnzD0\/PjTk31xQC72pOeD7qoVIGMM1toVw3A4ZDKZMB6PiaKIsizRWhNF0dJrrSXLMvr9\/l4wQRAgpeQ\/IlqSidy6tlkAAAAASUVORK5CYII=\u0022 data-src=\u0022https:\/\/avris.it\/image\/avris-lite_big.png\u0022 alt=\u0022Screenshot of the lite version of this blog\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022720.48289738431\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EI \u003Ca href=\u0022\/blog\/reducing-website-size-by-a-half-by-optimising-bootstrap-and-fontawesome\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-computer-speaker\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E strive to optimise\u003C\/a\u003E\nthis blog\u0027s performance as well as I can. But chasing a goal of a lightweight website while keeping it \u003Cem\u003Epretty\u003C\/em\u003E\nprevented me from realising the obvious truth that the most performant assets are\u2026 \u003Cem\u003Eno assets\u003C\/em\u003E.\u003C\/p\u003E\n\u003Cp\u003ESo, inspired by \u003Ca href=\u0022https:\/\/sjmulder.nl\/en\/textonly.html\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Sijmen J. Mulder\u0027s directory of text-only websites\u003C\/a\u003E,\nI decided to create a bare version of my blog.\u003C\/p\u003E\n\u003Cp\u003EHere\u0027s how it went:\u003C\/p\u003E\n\u003Cp\u003EMany pages of this blog are already available in multiple formats, eg. \u003Ca href=\u0022\/posts.atom\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E  the Atom feed of all entries\u003C\/a\u003E\nor \u003Ca href=\u0022\/projects.json\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E a JSON version of the list of my projects\u003C\/a\u003E,\nso adding a new one, \u003Ccode\u003E.lite\u003C\/code\u003E, was relatively easy.\u003C\/p\u003E\n\u003Cp\u003EThe main part was copy-pasting all \u003Ccode\u003E\u0026lt;page-type\u0026gt;.html.twig\u003C\/code\u003E files to \u003Ccode\u003E\u0026lt;page-type\u0026gt;.lite.twig\u003C\/code\u003E\nand removing all the bullshit from them. All the HTML nodes that exist solely to make the page look nicer:\nwrappers, containers, columns, etc. All the icons, fonts, logos, twemoji, everything that\u0027s not essential.\u003C\/p\u003E\n\u003Cp\u003EThere\u0027s no JavaScript loaded whatsoever.\u003C\/p\u003E\n\u003Cp\u003EThere\u0027s no external stylesheets loaded, just some minimal\nstyling in \u003Ccode\u003E\u0026lt;style\u0026gt;\u003C\/code\u003E tag and few inline \u003Ccode\u003Estyle\u003C\/code\u003E attributes.\u003C\/p\u003E\n\u003Cp\u003EImages inside articles had to stay, becuase in many cases they are a very important part of the content, and not just decoration.\nBut I made them way smaller \u2013 max 240px in width \u2013 and linked to open a bigger version, if necessary.\nI also replaced the JS-based lazy loading with HTML5 native \u003Ccode\u003Eloading=\u0022lazy\u0022\u003C\/code\u003E.\u003C\/p\u003E\n\u003Cp\u003EHowever, the browser support for this feature is still not perfect \u2013 and if it doesn\u0027t work on someone\u0027s machine,\nthey\u0027ll have to download 8 MB (!) of tiny images when visiting \u003Ccode\u003E\/blog.lite\u003C\/code\u003E\u2026\nSo I implemented a simple pagination, all inside a Twig template, based on \u003Ccode\u003E?after=\u0026lt;timestamp\u0026gt;\u003C\/code\u003E parameter in the query string.\u003C\/p\u003E\n\u003Cp\u003EAnyways\u2026 It\u0027s time for the results! \ud83e\udd41\u003C\/p\u003E\n\u003Cp\u003ENormally, opening the the homepage makes 40 requests and loads 522 kB of resources.\nIn the lite version, it\u0027s 2 requests (HTML and favicon) that weight just 15.8 kB.\nJust \u003Cstrong\u003E3%\u003C\/strong\u003E of the original weight!\u003C\/p\u003E\n\u003Cp\u003EThe heaviest page, \u003Ccode\u003E\/blog\u003C\/code\u003E makes 37 requests of 3.5 MB.\nIn the lite version, it\u0027s 10 requests of 198 kB.\nJust \u003Cstrong\u003E6%\u003C\/strong\u003E of the original weight.\u003C\/p\u003E\n\u003Cp\u003EOpening a random article made 34 requests of 493 kB normally,\nand just 3 requests of 31.2 kB in the lite version.\nAlso just \u003Cstrong\u003E6%\u003C\/strong\u003E of the original weight.\u003C\/p\u003E\n\u003Cp\u003EThe differences are huuuuuuuge!\u003C\/p\u003E\n\u003Cp\u003ESumming up: if you don\u0027t mind websites looking ascetic in return for loading quicker, working smoother,\nand sparing data plan and battery,\ndefinitely check out \u003Ca href=\u0022https:\/\/sjmulder.nl\/en\/textonly.html\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Sijmen\u0027s directory\u003C\/a\u003E.\u003C\/p\u003E\n\u003Cp\u003EAnd on my blog you can just head to \u003Ca href=\u0022\/lite\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E \/lite\u003C\/a\u003E or add \u003Ccode\u003E.lite\u003C\/code\u003E at the end of any subpage. \ud83d\ude09\u003C\/p\u003E\u003Csvg xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 style=\u0022display: none;\u0022\u003E\u003C\/svg\u003E","tags":["web development","development","programming","optimisation","light","text","html"],"hasMore":true,"image":"https:\/\/avris.it\/image\/avris-lite_small.png","introLite":"\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/avris-lite_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/avris-lite_mini.png\u0022 alt=\u0022Screenshot of the lite version of this blog\u0022 width=\u0022240\u0022 height=\u0022180.12072434608\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EI \u003Ca href=\u0022\/blog\/reducing-website-size-by-a-half-by-optimising-bootstrap-and-fontawesome.lite\u0022\u003E strive to optimise\u003C\/a\u003E\nthis blog\u0027s performance as well as I can. But chasing a goal of a lightweight website while keeping it \u003Cem\u003Epretty\u003C\/em\u003E\nprevented me from realising the obvious truth that the most performant assets are\u2026 \u003Cem\u003Eno assets\u003C\/em\u003E.\u003C\/p\u003E\n\u003Cp\u003ESo, inspired by \u003Ca href=\u0022https:\/\/sjmulder.nl\/en\/textonly.html\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Sijmen J. Mulder\u0027s directory of text-only websites\u003C\/a\u003E,\nI decided to create a bare version of my blog.\u003C\/p\u003E\n\u003Cp\u003EHere\u0027s how it went:\u003C\/p\u003E","contentLite":"\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/avris-lite_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/avris-lite_mini.png\u0022 alt=\u0022Screenshot of the lite version of this blog\u0022 width=\u0022240\u0022 height=\u0022180.12072434608\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EI \u003Ca href=\u0022\/blog\/reducing-website-size-by-a-half-by-optimising-bootstrap-and-fontawesome.lite\u0022\u003E strive to optimise\u003C\/a\u003E\nthis blog\u0027s performance as well as I can. But chasing a goal of a lightweight website while keeping it \u003Cem\u003Epretty\u003C\/em\u003E\nprevented me from realising the obvious truth that the most performant assets are\u2026 \u003Cem\u003Eno assets\u003C\/em\u003E.\u003C\/p\u003E\n\u003Cp\u003ESo, inspired by \u003Ca href=\u0022https:\/\/sjmulder.nl\/en\/textonly.html\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Sijmen J. Mulder\u0027s directory of text-only websites\u003C\/a\u003E,\nI decided to create a bare version of my blog.\u003C\/p\u003E\n\u003Cp\u003EHere\u0027s how it went:\u003C\/p\u003E\n\u003Cp\u003EMany pages of this blog are already available in multiple formats, eg. \u003Ca href=\u0022\/posts.atom\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E  the Atom feed of all entries\u003C\/a\u003E\nor \u003Ca href=\u0022\/projects.json\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E a JSON version of the list of my projects\u003C\/a\u003E,\nso adding a new one, \u003Ccode\u003E.lite\u003C\/code\u003E, was relatively easy.\u003C\/p\u003E\n\u003Cp\u003EThe main part was copy-pasting all \u003Ccode\u003E\u0026lt;page-type\u0026gt;.html.twig\u003C\/code\u003E files to \u003Ccode\u003E\u0026lt;page-type\u0026gt;.lite.twig\u003C\/code\u003E\nand removing all the bullshit from them. All the HTML nodes that exist solely to make the page look nicer:\nwrappers, containers, columns, etc. All the icons, fonts, logos, twemoji, everything that\u0027s not essential.\u003C\/p\u003E\n\u003Cp\u003EThere\u0027s no JavaScript loaded whatsoever.\u003C\/p\u003E\n\u003Cp\u003EThere\u0027s no external stylesheets loaded, just some minimal\nstyling in \u003Ccode\u003E\u0026lt;style\u0026gt;\u003C\/code\u003E tag and few inline \u003Ccode\u003Estyle\u003C\/code\u003E attributes.\u003C\/p\u003E\n\u003Cp\u003EImages inside articles had to stay, becuase in many cases they are a very important part of the content, and not just decoration.\nBut I made them way smaller \u2013 max 240px in width \u2013 and linked to open a bigger version, if necessary.\nI also replaced the JS-based lazy loading with HTML5 native \u003Ccode\u003Eloading=\u0022lazy\u0022\u003C\/code\u003E.\u003C\/p\u003E\n\u003Cp\u003EHowever, the browser support for this feature is still not perfect \u2013 and if it doesn\u0027t work on someone\u0027s machine,\nthey\u0027ll have to download 8 MB (!) of tiny images when visiting \u003Ccode\u003E\/blog.lite\u003C\/code\u003E\u2026\nSo I implemented a simple pagination, all inside a Twig template, based on \u003Ccode\u003E?after=\u0026lt;timestamp\u0026gt;\u003C\/code\u003E parameter in the query string.\u003C\/p\u003E\n\u003Cp\u003EAnyways\u2026 It\u0027s time for the results! \ud83e\udd41\u003C\/p\u003E\n\u003Cp\u003ENormally, opening the the homepage makes 40 requests and loads 522 kB of resources.\nIn the lite version, it\u0027s 2 requests (HTML and favicon) that weight just 15.8 kB.\nJust \u003Cstrong\u003E3%\u003C\/strong\u003E of the original weight!\u003C\/p\u003E\n\u003Cp\u003EThe heaviest page, \u003Ccode\u003E\/blog\u003C\/code\u003E makes 37 requests of 3.5 MB.\nIn the lite version, it\u0027s 10 requests of 198 kB.\nJust \u003Cstrong\u003E6%\u003C\/strong\u003E of the original weight.\u003C\/p\u003E\n\u003Cp\u003EOpening a random article made 34 requests of 493 kB normally,\nand just 3 requests of 31.2 kB in the lite version.\nAlso just \u003Cstrong\u003E6%\u003C\/strong\u003E of the original weight.\u003C\/p\u003E\n\u003Cp\u003EThe differences are huuuuuuuge!\u003C\/p\u003E\n\u003Cp\u003ESumming up: if you don\u0027t mind websites looking ascetic in return for loading quicker, working smoother,\nand sparing data plan and battery,\ndefinitely check out \u003Ca href=\u0022https:\/\/sjmulder.nl\/en\/textonly.html\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Sijmen\u0027s directory\u003C\/a\u003E.\u003C\/p\u003E\n\u003Cp\u003EAnd on my blog you can just head to \u003Ca href=\u0022\/lite\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E \/lite\u003C\/a\u003E or add \u003Ccode\u003E.lite\u003C\/code\u003E at the end of any subpage. \ud83d\ude09\u003C\/p\u003E","words":414,"readTime":2,"lang":"en"}}},"blog\/technology\/reducing-website-size-by-a-half-by-optimising-bootstrap-and-fontawesome":{"key":"blog\/technology\/reducing-website-size-by-a-half-by-optimising-bootstrap-and-fontawesome","type":"article","published":true,"meta":{"createdAt":"2020-01-10T11:53:15+01:00","publishedAt":"2020-01-10T11:53:15+01:00","group":null,"links":[{"icon":"box-alt","colour":"primary","url":"https:\/\/packagist.org\/packages\/avris\/fontawesome-optimiser","displayUrl":"avris\/fontawesome-optimiser"}],"category":"blog","subcategory":"technology","slug":"reducing-website-size-by-a-half-by-optimising-bootstrap-and-fontawesome"},"content":{"en":{"slug":"reducing-website-size-by-a-half-by-optimising-bootstrap-and-fontawesome","title":"Reducing website size by a half by optimising Bootstrap and FontAwesome","intro":"\u003Cp\u003EMy new blog, despite being simple and freshly rewritten, loads way too much crap...\nSo I took a few moments to optimise it a bit \u2013 and I ended up with almost 50% reduction in resources size\nin just two steps!\u003C\/p\u003E\u003Csvg xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 style=\u0022display: none;\u0022\u003E\u003C\/svg\u003E","content":"\u003Cp\u003EMy new blog, despite being simple and freshly rewritten, loads way too much crap...\nSo I took a few moments to optimise it a bit \u2013 and I ended up with almost 50% reduction in resources size\nin just two steps!\u003C\/p\u003E\n\u003Ch3\u003EBootstrap\u003C\/h3\u003E\n\u003Cp\u003E\u003Ca href=\u0022https:\/\/getbootstrap.com\/\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Bootstrap\u003C\/a\u003E is awesome. But it\u2019s also a lot.\nModals? Popovers? Tooltips? Badges? Toasts? I don\u2019t use any of that!\u003C\/p\u003E\n\u003Cp\u003EI already don\u2019t include any of Bootstrap\u2019s JavaScripts, but I should definitely clean up its CSS.\u003C\/p\u003E\n\u003Cp\u003ESo instead of including\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode class=\u0022hljs scss border\u0022\u003E\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\u0022\u003C\/span\u003E\n\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EI went to its source and copy-pasted the modules that it was loading over there,\ncommenting out the ones I don\u2019t need:\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode class=\u0022hljs scss border\u0022\u003E\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/functions\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/variables\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/mixins\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/root\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/reboot\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/type\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/images\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/code\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/grid\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/tables\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/forms\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/buttons\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/transitions\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/dropdown\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/button-group\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/input-group\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/custom-forms\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/nav\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/navbar\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/card\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/breadcrumb\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/pagination\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/badge\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/jumbotron\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/alert\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/progress\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/media\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/list-group\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/close\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/toasts\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/modal\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/tooltip\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/popover\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/carousel\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-comment\u0022\u003E\/\/@import \u0022~bootstrap\/scss\/spinners\u0022;\u003C\/span\u003E\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/utilities\u0022\u003C\/span\u003E;\n\u003Cspan class=\u0022hljs-keyword\u0022\u003E@import\u003C\/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022~bootstrap\/scss\/print\u0022\u003C\/span\u003E;\n\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EThe only issue is that I do use \u003Ccode\u003Eforms.scss\u003C\/code\u003E \u003Cem\u003Ea bit\u003C\/em\u003E.\nThere is a search form in the header that has its \u003Ccode\u003E\u0026lt;input\u0026gt;\u003C\/code\u003E field styled.\u003C\/p\u003E\n\u003Cp\u003ESo I just inspected that element in Opera and pretty much just copy-pasted the three relevant selectors.\u003C\/p\u003E\n\u003Cp\u003EBum! Starting off with a minified CSS file of \u003Cstrong\u003E244 KB\u003C\/strong\u003E, now it\u2019s down to \u003Cstrong\u003E184 KB\u003C\/strong\u003E.\nA third of its weight is now gone.\u003C\/p\u003E\n\u003Cp\u003EBut that\u2019s just the first step.\u003C\/p\u003E\n\u003Ch3\u003EFontAwesome\u003C\/h3\u003E\n\u003Cp\u003EThe real big deal in terms of the website weight were the \u003Ca href=\u0022https:\/\/fontawesome.com\/icons\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E FontAwesome icons\u003C\/a\u003E.\nThere\u2019s thousands of icons included, but I only use a dozen \u2013 so why do I make visitors download them all?\u003C\/p\u003E\n\u003Cp\u003EYou can load FontAwesome in a number of different ways. One of them are \u003Ca href=\u0022https:\/\/fontawesome.com\/how-to-use\/on-the-web\/advanced\/svg-sprites\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E SVG sprites\u003C\/a\u003E.\nYou can include the definitions of the icons in a form of SVG \u003Ccode\u003E\u0026lt;symbols\u0026gt;\u003C\/code\u003Es, and whenever they\u2019re used,\njust use a \u003Ccode\u003E\u0026lt;use\u0026gt;\u003C\/code\u003E tag to reference it.\u003C\/p\u003E\n\u003Cp\u003ESo a wrote a simple service (plus a Twig extension) that would do exactly that:\u003C\/p\u003E\n\u003Cul\u003E\n\u003Cli\u003Eput \u003Ccode\u003E\u0026lt;use\u0026gt;\u003C\/code\u003E tags wherever an icon should be displayed,\u003C\/li\u003E\n\u003Cli\u003Ekeep track of the icons used,\u003C\/li\u003E\n\u003Cli\u003Edump the definions of the used icons at the bottom of the page.\u003C\/li\u003E\n\u003C\/ul\u003E\n\u003Cp\u003EI just had to add some CSS to display the SVG icons the same way as webfonts\nin terms of size, position and using the color of the surrounding text:\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode class=\u0022hljs css border\u0022\u003E\u003Cspan class=\u0022hljs-selector-class\u0022\u003E.icon\u003C\/span\u003E {\n    \u003Cspan class=\u0022hljs-attribute\u0022\u003Ewidth\u003C\/span\u003E: \u003Cspan class=\u0022hljs-number\u0022\u003E1.1em\u003C\/span\u003E;\n    \u003Cspan class=\u0022hljs-attribute\u0022\u003Eheight\u003C\/span\u003E: \u003Cspan class=\u0022hljs-number\u0022\u003E1.1em\u003C\/span\u003E;\n    \u003Cspan class=\u0022hljs-attribute\u0022\u003Evertical-align\u003C\/span\u003E: -.\u003Cspan class=\u0022hljs-number\u0022\u003E125em\u003C\/span\u003E;\n    \u003Cspan class=\u0022hljs-attribute\u0022\u003Efill\u003C\/span\u003E: currentColor;\n}\n\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EEt voil\u00e0!\nThe homepage of my blog went down from \u003Cstrong\u003E765 KB\u003C\/strong\u003E at the beginning,\nto \u003Cstrong\u003E704 KB\u003C\/strong\u003E after the first step, to \u003Cstrong\u003E393 KB\u003C\/strong\u003E now!\u003C\/p\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/avris-optimised_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022800\u0022 height=\u0022200\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAJCAYAAABaMo5wAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB3UlEQVQ4ja2U227bMBBEz\/IiUqLapu7\/f2HdGEV0gcXL9kG24rQIkKKdF2KXFDU7M6CoqnKDqiIix3rvAeTrFR\/Cm\/3HFXh372\/OiKrq+XzGe0+tFRFBRGitATAMAwClFEophBDYtg2AruvIOWOMwTkHQG1KLYXWKiEGtuuGAjEEDqiCCKUqzgqX9SfBRr5++rwTmueZeZ4ppWCtJcbIuq6oKqqKMYZxTMzzjDZFb5OmYWBeFgRwzuG7jvPSMCI0bYgItTaitwA8BWG7PCPOA0o8nQ6OtTbGcURaa3qfvpQCgDHmUCWldFh3vV6JMZJzptZKjJFSCiKCtfbh8sq2bfR9T86Z1hrhQaHSFGfkqHPemKl8i+Ou0OVyYV3Xg1BKuxp368QYhr5nXVceMY4jLy8vdF1HrZUuDvyYC8YoqoIR0JtDQ2dJZMpN5fD0BdN1h4XWOVJKrwrdQ\/yvEHYSH+0fuJFyANM04b0\/rLqjtfZHb\/\/2NVsfoagoclQ7NQWaghHINeN9R+8cTkTw3jNPE7XtgYx9z7IsiEBrijWGISWmaXqjZEqJZVn2H4nQ9z3f54rIqyKlNoKziMApGrbnZzAGjDlC7a2n5oJE2TP0OPl779D\/eGMezxz6\/Vb\/AmBJWhxIiYZ2AAAAAElFTkSuQmCC\u0022 data-src=\u0022https:\/\/avris.it\/image\/avris-optimised_big.png\u0022 alt=\u0022\u0022 class=\u0022border\u0022 width=\u0022800\u0022 height=\u0022200\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EBtw, I\u2019ve put my little helper into \u003Ca href=\u0022https:\/\/packagist.org\/packages\/avris\/fontawesome-optimiser\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E a library\u003C\/a\u003E,\nif you want to check it out.\u003C\/p\u003E\n\u003Cp\u003EThere\u2019s caveats though...\nSVG is heavy. The two \u003Ccode\u003E.woff2\u003C\/code\u003E files I was using are \u003Cstrong\u003E261 KB\u003C\/strong\u003E overall,\nwhile the corresponding two sprites are \u003Cstrong\u003E2.1 MB\u003C\/strong\u003E.\nBut if I filter their content to just the icons I actually use (which is way simpler to do in SVG than in webfonts),\nit goes down to just \u003Cstrong\u003E44 KB\u003C\/strong\u003E!\nSo if your website is using a looot of fonts, you\u2019ll probably be better of generating a custom webfont.\u003C\/p\u003E\n\u003Cp\u003EThere can also be issues related to warm caches possibly circumventing the Optimiser,\nwith data that includes new icons being loaded dynamically in JS (which I don\u2019t do),\nwith the increased execution time (which doesn\u2019t bother me since I use an HTTP cache),\netc. Still, in many cases this trick can be very useful. Like mine.\u003C\/p\u003E\n\u003Cp\u003ESwitching from webfonts to dynamically filtered SVG sprites\nnot only removed the need for two requests \u003Ccode\u003E.woff2\u003C\/code\u003E files,\nbut also the need for the CSS that maps class names to font glyphs.\nMy CSS file went down again, from \u003Cstrong\u003E184 KB\u003C\/strong\u003E to just \u003Cstrong\u003E96 KB\u003C\/strong\u003E.\u003C\/p\u003E\n\u003Ch3\u003ESumming up\u003C\/h3\u003E\n\u003Cp\u003ESo here I am: having spent not even a full evening on it, doing optimisations as simple as they can get,\nand ending up with the website trimmed of \u003Cstrong\u003Ehalf\u003C\/strong\u003E of its fat.\u003C\/p\u003E\n\u003Cp\u003ENice \ud83d\ude0e\u003C\/p\u003E\u003Csvg xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 style=\u0022display: none;\u0022\u003E\u003C\/svg\u003E","tags":["website","web development","javascript","scss","css","bootstrap","fontawesome","svg","optimisation"],"hasMore":true,"image":null,"introLite":"\u003Cp\u003EMy new blog, despite being simple and freshly rewritten, loads way too much crap...\nSo I took a few moments to optimise it a bit \u2013 and I ended up with almost 50% reduction in resources size\nin just two steps!\u003C\/p\u003E","contentLite":"\u003Cp\u003EMy new blog, despite being simple and freshly rewritten, loads way too much crap...\nSo I took a few moments to optimise it a bit \u2013 and I ended up with almost 50% reduction in resources size\nin just two steps!\u003C\/p\u003E\n\u003Ch3\u003EBootstrap\u003C\/h3\u003E\n\u003Cp\u003E\u003Ca href=\u0022https:\/\/getbootstrap.com\/\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Bootstrap\u003C\/a\u003E is awesome. But it\u2019s also a lot.\nModals? Popovers? Tooltips? Badges? Toasts? I don\u2019t use any of that!\u003C\/p\u003E\n\u003Cp\u003EI already don\u2019t include any of Bootstrap\u2019s JavaScripts, but I should definitely clean up its CSS.\u003C\/p\u003E\n\u003Cp\u003ESo instead of including\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode class=\u0022language-scss\u0022\u003E@import \u0022~bootstrap\u0022\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EI went to its source and copy-pasted the modules that it was loading over there,\ncommenting out the ones I don\u2019t need:\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode class=\u0022language-scss\u0022\u003E@import \u0022~bootstrap\/scss\/functions\u0022;\n@import \u0022~bootstrap\/scss\/variables\u0022;\n@import \u0022~bootstrap\/scss\/mixins\u0022;\n@import \u0022~bootstrap\/scss\/root\u0022;\n@import \u0022~bootstrap\/scss\/reboot\u0022;\n@import \u0022~bootstrap\/scss\/type\u0022;\n\/\/@import \u0022~bootstrap\/scss\/images\u0022;\n@import \u0022~bootstrap\/scss\/code\u0022;\n@import \u0022~bootstrap\/scss\/grid\u0022;\n@import \u0022~bootstrap\/scss\/tables\u0022;\n\/\/@import \u0022~bootstrap\/scss\/forms\u0022;\n@import \u0022~bootstrap\/scss\/buttons\u0022;\n\/\/@import \u0022~bootstrap\/scss\/transitions\u0022;\n\/\/@import \u0022~bootstrap\/scss\/dropdown\u0022;\n@import \u0022~bootstrap\/scss\/button-group\u0022;\n@import \u0022~bootstrap\/scss\/input-group\u0022;\n\/\/@import \u0022~bootstrap\/scss\/custom-forms\u0022;\n\/\/@import \u0022~bootstrap\/scss\/nav\u0022;\n\/\/@import \u0022~bootstrap\/scss\/navbar\u0022;\n@import \u0022~bootstrap\/scss\/card\u0022;\n\/\/@import \u0022~bootstrap\/scss\/breadcrumb\u0022;\n\/\/@import \u0022~bootstrap\/scss\/pagination\u0022;\n\/\/@import \u0022~bootstrap\/scss\/badge\u0022;\n\/\/@import \u0022~bootstrap\/scss\/jumbotron\u0022;\n@import \u0022~bootstrap\/scss\/alert\u0022;\n\/\/@import \u0022~bootstrap\/scss\/progress\u0022;\n\/\/@import \u0022~bootstrap\/scss\/media\u0022;\n\/\/@import \u0022~bootstrap\/scss\/list-group\u0022;\n\/\/@import \u0022~bootstrap\/scss\/close\u0022;\n\/\/@import \u0022~bootstrap\/scss\/toasts\u0022;\n\/\/@import \u0022~bootstrap\/scss\/modal\u0022;\n\/\/@import \u0022~bootstrap\/scss\/tooltip\u0022;\n\/\/@import \u0022~bootstrap\/scss\/popover\u0022;\n\/\/@import \u0022~bootstrap\/scss\/carousel\u0022;\n\/\/@import \u0022~bootstrap\/scss\/spinners\u0022;\n@import \u0022~bootstrap\/scss\/utilities\u0022;\n@import \u0022~bootstrap\/scss\/print\u0022;\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EThe only issue is that I do use \u003Ccode\u003Eforms.scss\u003C\/code\u003E \u003Cem\u003Ea bit\u003C\/em\u003E.\nThere is a search form in the header that has its \u003Ccode\u003E\u0026lt;input\u0026gt;\u003C\/code\u003E field styled.\u003C\/p\u003E\n\u003Cp\u003ESo I just inspected that element in Opera and pretty much just copy-pasted the three relevant selectors.\u003C\/p\u003E\n\u003Cp\u003EBum! Starting off with a minified CSS file of \u003Cstrong\u003E244 KB\u003C\/strong\u003E, now it\u2019s down to \u003Cstrong\u003E184 KB\u003C\/strong\u003E.\nA third of its weight is now gone.\u003C\/p\u003E\n\u003Cp\u003EBut that\u2019s just the first step.\u003C\/p\u003E\n\u003Ch3\u003EFontAwesome\u003C\/h3\u003E\n\u003Cp\u003EThe real big deal in terms of the website weight were the \u003Ca href=\u0022https:\/\/fontawesome.com\/icons\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E FontAwesome icons\u003C\/a\u003E.\nThere\u2019s thousands of icons included, but I only use a dozen \u2013 so why do I make visitors download them all?\u003C\/p\u003E\n\u003Cp\u003EYou can load FontAwesome in a number of different ways. One of them are \u003Ca href=\u0022https:\/\/fontawesome.com\/how-to-use\/on-the-web\/advanced\/svg-sprites\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E SVG sprites\u003C\/a\u003E.\nYou can include the definitions of the icons in a form of SVG \u003Ccode\u003E\u0026lt;symbols\u0026gt;\u003C\/code\u003Es, and whenever they\u2019re used,\njust use a \u003Ccode\u003E\u0026lt;use\u0026gt;\u003C\/code\u003E tag to reference it.\u003C\/p\u003E\n\u003Cp\u003ESo a wrote a simple service (plus a Twig extension) that would do exactly that:\u003C\/p\u003E\n\u003Cul\u003E\n\u003Cli\u003Eput \u003Ccode\u003E\u0026lt;use\u0026gt;\u003C\/code\u003E tags wherever an icon should be displayed,\u003C\/li\u003E\n\u003Cli\u003Ekeep track of the icons used,\u003C\/li\u003E\n\u003Cli\u003Edump the definions of the used icons at the bottom of the page.\u003C\/li\u003E\n\u003C\/ul\u003E\n\u003Cp\u003EI just had to add some CSS to display the SVG icons the same way as webfonts\nin terms of size, position and using the color of the surrounding text:\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode class=\u0022language-css\u0022\u003E.icon {\n    width: 1.1em;\n    height: 1.1em;\n    vertical-align: -.125em;\n    fill: currentColor;\n}\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EEt voil\u00e0!\nThe homepage of my blog went down from \u003Cstrong\u003E765 KB\u003C\/strong\u003E at the beginning,\nto \u003Cstrong\u003E704 KB\u003C\/strong\u003E after the first step, to \u003Cstrong\u003E393 KB\u003C\/strong\u003E now!\u003C\/p\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/avris-optimised_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/avris-optimised_mini.png\u0022 alt=\u0022\u0022 width=\u0022240\u0022 height=\u002260\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EBtw, I\u2019ve put my little helper into \u003Ca href=\u0022https:\/\/packagist.org\/packages\/avris\/fontawesome-optimiser\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E a library\u003C\/a\u003E,\nif you want to check it out.\u003C\/p\u003E\n\u003Cp\u003EThere\u2019s caveats though...\nSVG is heavy. The two \u003Ccode\u003E.woff2\u003C\/code\u003E files I was using are \u003Cstrong\u003E261 KB\u003C\/strong\u003E overall,\nwhile the corresponding two sprites are \u003Cstrong\u003E2.1 MB\u003C\/strong\u003E.\nBut if I filter their content to just the icons I actually use (which is way simpler to do in SVG than in webfonts),\nit goes down to just \u003Cstrong\u003E44 KB\u003C\/strong\u003E!\nSo if your website is using a looot of fonts, you\u2019ll probably be better of generating a custom webfont.\u003C\/p\u003E\n\u003Cp\u003EThere can also be issues related to warm caches possibly circumventing the Optimiser,\nwith data that includes new icons being loaded dynamically in JS (which I don\u2019t do),\nwith the increased execution time (which doesn\u2019t bother me since I use an HTTP cache),\netc. Still, in many cases this trick can be very useful. Like mine.\u003C\/p\u003E\n\u003Cp\u003ESwitching from webfonts to dynamically filtered SVG sprites\nnot only removed the need for two requests \u003Ccode\u003E.woff2\u003C\/code\u003E files,\nbut also the need for the CSS that maps class names to font glyphs.\nMy CSS file went down again, from \u003Cstrong\u003E184 KB\u003C\/strong\u003E to just \u003Cstrong\u003E96 KB\u003C\/strong\u003E.\u003C\/p\u003E\n\u003Ch3\u003ESumming up\u003C\/h3\u003E\n\u003Cp\u003ESo here I am: having spent not even a full evening on it, doing optimisations as simple as they can get,\nand ending up with the website trimmed of \u003Cstrong\u003Ehalf\u003C\/strong\u003E of its fat.\u003C\/p\u003E\n\u003Cp\u003ENice \ud83d\ude0e\u003C\/p\u003E","words":752,"readTime":4,"lang":"en"}}}}}