HOW TO MAKE WEBFLOW SITE LOAD FASTER: Episode 4 - Logo Grid and more SVG | Running Lighthouse Audit

hey welcome back everybody welcome to the fourth episode of our webflow optimization course so in the previous episode we've been covered optimizing our fonts we've built our navigation our header we've talked about full width images how to optimize those images and we also covered html structure now in today's episode we're gonna build our logos yeah the section with those five logos and we will do our very first website audit using google lighthouse okay so without being said let's roll the intro okay so just a quick recap in the previous episode we've built our navigation here and we build our full width section with the background image now in today's episode we will build these these sections with four with five logos and before we dive into those there's a couple of solutions right here so because this section will mostly be inside the initial viewport we want to make sure we display these images so what we can do is we can have all of these images as independent as the g code and then add this as the g codes inside a grid system and then other options might be to create image sprites now image sprites is when you combine together multiple images so you save the request count now obviously in web the number of requests you have it's important and a request is basically a file on your webflow server that your browser need to access good so because so because these logos right here will go inside our initial viewport we want to make sure they're visible in the very first moment a client lands on our landing page so what we want to do is we want to firstly optimize our svg icons you can see we have a lot of points and all of these points are basically information chances are that this logo has been um has been has been made using illustrator tracking feature where and you add an image in png and then illustrator track and create an svg image but we have a lot of points and every point is a bite off information so what i what i did is i went on our website and by the way i'm gonna link this inside the inside of video description it's called world vector logo and you can you can find right here a lot of company logos in svg format good now going back what i'm going to do is i'm going to remove my type form logo that we used previously and i'm gonna replace with this type form new logo you need to do the same for every for every svg you you're gonna you're gonna add inside your web flow so what we're gonna do is we're gonna just view what we have right here so look how many paths we have and from the previous episode we've been covered optimizing our svg logos and we will do the same for our for our logos right here we have on the bottom we basically need to combine all of these paths you see right here in one big path so we ultimately optimize our svg so without being said let me dive into my affinity designer and start optimizing all of these svg icons and what you can do you can you can skip at this point if you know how to optimize otherwise please bear with me because this is important stuff so i'm gonna start with thinking logo right here and i'm gonna do i'm gonna do command a to open up my export assets i'm gonna choose svg i'm gonna leave the file size unticked so i don't optimize right now my svg and let's just change our destination so inside my homepage folder i'm gonna do a new folder called logos yeah and inside this folder i'm going to export all of my logos so export this one and let's do one by one okay i don't know right now export old svgs add them inside affinity i want to do this really slowly so you guys can see what i'm doing so i'm going to launch my affinity designer and inside my affinity designer i'm going to drag and drop my exported logo now you can use any any software out there for example illustrator will also do the job so you can see that let's first of all hit command shift g to ungroup everything we have here so we're only left with a lot of paths so what we need to do right now is we need to combine together all of these pads i'm going to select all of them and with all my paths selected i'm going to click right here add now this will combine all the paths in one big path this is important because in our svg code later on we'll only have one big path which will also be minified in one single line of html so with this in mind let me copy and actually before i would copy let me do a double click right here and see okay so it's right the i think i think it's looking good let's leave this as it is we don't have so many points so i'm gonna select my i'm gonna select my combined path i'm gonna back back to my affinity up to my adobe xd sorry guys and i'm gonna paste it right here now by default we will have the same size so this is thinking and let's do the same for typeform you can see that we have two paths that we need to combine right here so typeform i'm going to hit command a to export and i'm gonna export it same thing i go to affinity designer command w to close this one i don't need it anymore i'm gonna go to type form drag and drop it right here same thing here let's uh let's select my both paths again click combine so we combine both of this path it's one single path go back to my fit to my adobe xd and paste it right here so with my google docs exported let me go back to my designer again i'm closing this file i don't need it anymore and i'm having my for my windows i'm having a shell extension that display my svg i'll also link this application this shell extension for windows so you guys can also see your svg files as you can see my google docs is right here drag and drop and of course i want to ungroup every group i'm having remember every group is a line of code inside my svg so let's do command a to select all the paths and click one more time add combine them copy and paste my my combined path inside my adobe xd and as you can see it's a one big combined path now later on you can see that we have groups so we we will ungroup this logo because groups are also count in svg code okay so we have all the logos right here and we also have the properties like the text and opacity level and later on we will add a custom class to these logos and we will apply the opacity we can even apply some hover effects to bring back the opacity because micro interactions helps a lot in your user experience process good so let's let's go with our first logo thinking so command shift g to ungroup the layer and i'm gonna rename my path to let's say logo one actually let logo on to keep everything clean so logo logo on right click export selected it as svg and this time i'm going to choose optimize to minify my svg code let's click change and inside my logos i'm going to create another fold called optimized and i'm going to drop my first logo so what i'll have to do is i love to obviously ungroup everything rename and export so i have all my svg illustrations my svg logos exported so i can then open up them inside adam or sublime text or vs code copy the code and paste it inside an embed element in webflow so the next one is typeform is going to be logo2 again we export these we choose optimized and we hit export good so at this point we have all of our logos and remember you can always combine them together export as png but because these logos are so important they're being displayed in the initial viewport we want to make sure they're visible when the when the browser loads the initial page good so with this in mind let's open up my optimized folder and i have here all the logos and i'm going to start with the logo number one so right click open with adam now adam is my html editor application okay so adam opened up my svg code for the first logo and i'm going to go to view to google software app so i can see my entire code and if you do remember from the previous episode we've covered the fill attribute so i'm going to remove the fill attribute from here and as you can see it's one big code is one big svg we have no groups right here is one big path and i'm gonna add the field right here so fill equal and in codes i'm going to say current color why so because i want to change my svg logo color from the typography menu inside my web flow i'm going to leave the width and height as it is because i don't want to skew or sketch my logo i want to maintain its original size i'm going to select all all of my code copy and then let's move to the web flow so with my code copied to my clipboard let's start building our logo section so select your body and hit command a to open quick find and type section and at this point remember this is just a webflow component named section it will not apply any section html tag so with the our section selected we need to go to element settings and under the tag we're gonna choose section in the previous episode we've been covered the nav html tag and we also covered the header now this time we introduce a new html tag which is section and section is basically used for div blocks that are sections of your site so section one more to keep in mind here that you cannot build a section inside another section so this section that previously was a div block it's now with the tag of section so in our code it will not be div class equal it will be section class equal so with our section let's add a class so it's going to be logos good and if you remember in our design system we created a basic a basic container so i'm going to drop that this d block right here i'm going to go to selector and type container good now i also have some padding i do believe so let me go back and see so i'm having the padding off 50 pixels from the top and usually what i do if we talk about ridiculous padding is i simply trying to emulate the height of my section so you can see it's actually 300 pixel so let's go with 300 pixels for the minimum height so with the minimum height right here i'm going to type 300 which will make my section to take 300 pixel i also have a padding which i believe it's 30 so let me see one more time it's 50 actually so let's go for padding and maybe 50 is way too much so i'm going to go with 40 and i'll also apply the same padding from the bottom i wanted this obviously to be even distributed and what i'm going to do next with my container selected i'm going to drop another div block so remember don't touch your container at this point and inside this div block we're going to build our grid off of logos so what i will do is i will add obviously a class so this is going to be logos grade and it's going to be agreed of we have 5 items which means five columns so we have five columns now what else you can do is instead of if you know exactly that your logos will only be distributed in columns we can choo you can choose direction columns but because we talk about responsiveness i don't know how these columns will be distributed i want to make sure i have a fixed column number of five and i want to remove one of my row and at this point just simply click done next i want my embed svg logos to be aligned in the middle in every cell of my grid system so i'm going to choose a line so for the horizontal line i'm going to go with center and for vertical line i'm going to also go for center so my embed code is centered inside a grid cell okay let's move next i'm going to hit command a to open up my quick find and i'm going to drop an embed code right here and inside my embed code remember we have copied to our clipboard our first logo code so i'm going to paste it right here and click save and close and i need so what we can do at this point if we want to control independently the color of my logo we can add a class right here yeah so let's just add just for the sake of this case let's add a class so let's say logo that's all remember that this embed code this element of the web flow it's just a div block okay and because we maintain the size the width and the and the height of our svg code we now have to do one more thing and that is to align to the center our logo so with with this class with my logo embedded code selected i'm going to go to display set it to flex and align vertically in horizontally my logo good i'm gonna copy my logo and i'm gonna choose my logo grid my parent grid and i'm gonna paste it four times one two three four good so we have our logos right here they live inside the grid we can always change the gap between them they are aligned vertically and horizontally to the middle so let me go back to our logo 2 3 4 and the last one which is canva i'm going to drag and drop it right here on my item and yeah we're going to do the same thing so we're going to remove the field right here because we want to control the fill the color of our logo from our typography pane inside the web flow so fill equal and if you use item chances are it will autofill you the attribute command a to copy everything go back inside the web flow double click on my second embed select everything delete and paste the new code finally save and close good now we we know that we also have an opacity applied to it and what i love to do just add a little bit of micro interaction is for my logo let's add right here under the effects we have opacity and set it to 15 to 50 percent now on the hover i'm going to bring the opacity back to 100 and i'm going to choose back the state's non and on the bottom you see these transitions and i want to say hey whatever type of transformation or whatever change you do this logo to the hover state please apply an ease and set a duration of 200 milliseconds and if we go to the preview you can see that we have this really nice hover effect over our logos wonderful so we have the logo in place they're fully responsive as you can see yeah now you can you have control over different breakpoints for them it's it's it's not a problem but what i've noticed is we also need to apply a padding yeah so i'm gonna choose my logo grade and i'm gonna say hey i want a 20 padding from from the left and 20 padding from the right remember your padding should be even across your entire sections so we successfully build our logos actions by using svg code and now the last thing to do is let me show you how you can control the color so because we have used that fill equal current color we can now change the color from here yeah so let's leave it as black it's looking nice and let's publish it to the selected domain so we can then run our first web flow webflow site out inside google lighthouse let me open up my staging server and before i would show you how to operate with the google lighthouse let me show you what we have managed to do so far and now the first thing is obviously the time it takes to reload like it's really fast but let's see how much time it will actually take for our first visitors so for understanding that for viewing that in real time we need to go to network and if you don't have the network right here just simply click on this arrows and you will see the network now if we do reload we see all of these requests that are being loaded we see the side icon we see our images but we don't see our svg why so because we added an embed svg code on the web flow and it's not a request it's directly being loaded inside our html code and rendered by our cpu locally good now we have this disabled cache and i'm having a pretty decent internet connection if i do reload you can see that something is happening here in the background but let's see how our website will load on really slow internet so i'm going to click on this online tab and i'm going to choose to slow 3g now this will apply a really slow 3g internet connection i'm gonna do reload and let's see what happens good so as you can see we have this if you'd remember we have applied we have applied to this header section a gray color so it's still the text is still visible while the image loads yeah and you can see that also the font is being swapped so if you do remember from our very first episode we've covered font display swap which basically replace the font with the system font and by the time it will download the custom find and add it to the cache so if i do reload one more time you can see that we have our logos because they're svg code we can have our logo on the top logos on the bottom and the font in my case is being replaced with a real a real is my default system font but if you're using mac it's going to be san francisco pro and if you're using android it's going to be roboto or recently they switched to to the rubik to the aerobic font family good so one more time reload you can see that users can read my content can click on the button can see all of these logos they get inside my viewport and it's it's looking really nice now if you wanted to emulate how it's looking on a macbook i believe it's 1280 by 800 and as you can see my logo are visible right here so that's why instead of using sprite instead of combining together all of these logos and exporting them as png we have used an embed element inside a web flow and pasted the svg code there and by doing so we also have control over the color and we can build different interactions like this really nice hover effect when we click we have full opacity for our logos now that's good we can see that our website have that initial page load and it have all the fonts everything we need for the user let's now click right here let me let me do this thing i'm going to choose back my online and i want to leave the cache disabled at this point i don't have to save any cash i want to see how my website will load and feel when i have my very first visitor accessing my website so we click on this to arrow right here and we go to lighthouse now i'm using edge but edges build on chromium if you're using chrome you'll see the same options right here so with the lighthouse selected let's make sure we untick the progressive web app well obviously this is not a pva so we wanna get our audit for performance for best practices accessibility and seo and for the device right now we're building on the desktop so we choose desktop and we we have to click on generate report good so our performance is at 100 we have the best practices all set 100 but our seo is 91 because we have not applied any we have not applied any meta description meta title and og image so let's take this step by step first we're gonna see what a problem we have with accessibility and the very first is html element does not have a lange attribute and why this is happening because when google will translate your website obviously need to know what is the what is the initial language the site has been built on and we know this is english so with this in mind we go back to the web flow we click on this logo and we go to the project settings we're gonna go to custom code tab we'll scroll all the way to the bottom and you'll see advanced settings and for the advanced settings you see language code we're gonna say en which stands for english we're going to save changes now you have here a list of all the language codes you can access so we save the changes and obviously we need to publish this one more time so this this is why it's important guys so you obviously want to do optimization while you're building and translating your design inside webflow this is super super important so let's go back to our our staging server let's reload let's clear our previous lighthouse audit and click one more time generate report wonderful you can see that we solved that problem with the lan code yeah but let's have a look so we solved the problem with the lan code but we still have links do not have a descriptive name yeah and this is happening because every time you build the link block you need to have text inside so assistive technologies can know exactly what this link is about and what that link will do and if we click right here we can see that our logo does not have a descriptive name so that's really simple to add them so whatever time you have this problem this issue that links do not have a descriptive name what you need to do is first of all let me go to the designer so first of all you want to make sure that inside that link block you have a text block and if we click right here we can see that we have a text block that if we switch back to the display block it says back to home page but still google google somehow do not see this back to home page so what we need to do we need to select our link block this brand we need to go to settings in the custom attributes you want to click on the plus and you want to type area label now aria it's a technology it's a feature it's a i would say it's an attribute used by assistive technologies those for example screen readers or for people that have problems with uh with vision yeah and we want to type a real label and then in the value we want to type what this link is about so we're going to say back to home page we're going to click save and we will publish one more time our website and yeah you can go go ahead and google error level and what it means we have different things like error aerial error role drop-down aerial landmark there's a lot of this error features so let me go back and i hope this i pronounced this right i think it's a real-world area i don't know exactly how but i know that this will solve our problem so let's reload our staging server without staging server reloaded let's clear our past audit and click one more time on generate report so as you can see accessibility 100 we don't have that link do not have descriptive name that's simply because if we do inspect our link block so it's right here you can see that we have this area label back to home page yeah now if you wanna even further to see how your website feels in terms of accessibility what you can do there's a really nice website out there which i will link in the video description it's called webm webaim.org and right here what you can do is first of all we have this contrast checker which is insane which is really great and then what you also have so under resources you can check uh let me see tools accessibility evaluation tools this one wave yeah so we click on wave and what wave does is it basically analyze the health of your accessibility so we're going to go back to our landing page we're going to copy the url paste it right here and do a small web aim wave evaluation and you can see that we have a label we have we don't have any issues but we have contrast issues yeah and we have a contrast issue right here and we don't have issues with the structure of our of our web page so we have h2 h3 we have sections everything it's looking great it's feeling great so this is basically how assistive technology would see your would see your site let's solve this seo problem so you can see guys this config and yeah you can see that if we view the trace at the very moment the very first byte the website loads we can see the image we can see the text so it's it's really great now i think we have one more thing here image elements do not have explicit width and height and yeah well this is this thing right here with the webflow badge now if you will upload this on a live server you'll not have this problem so when you let the hosting you can you can toggle this off display made in webflow and you'll not have problem with uh with this logo right here the small logo document does not have a meta description so i already created the meta description so right here i'm using meta tags that i owe so what i'm gonna do let me copy the description and yeah guys i'm gonna have all of these links inside the video description so let me copy this let me go back let me click on designer and in the moment we're going to change we can add our meta description so it's really easy to add a meta description you click on pages you have the home we click on this cog icon and where we have meta description we just paste the meta description now i love meta tags io because it tells you exactly the limit and how it will look inside different it tells you how it's going to look on google how it's going to look on the facebook twitter and so on and plus on top of that it's free i'm gonna also copy my title and paste it right here now if you do search engine optimization keywords all of that you can definitely have keywords right here at this point i'm just worried about getting 100 score in google lighthouse now finally what i want to do is i want to add a an open graph image so as you can see meta tags say hey the recommended size is 1200 by 628 so i opened up my affinity photo i've created a file i've created a project with the same size and i've dropped just the stock image we're using in our header so let's go with file export i'm going to export this as jpeg export and remember that this og image is still in a file the browser will need to access and will count as a request i'm going to save it under my home page folder og image okay and then every image should be optimized so i'm gonna open up my compressor io tool and i'm gonna drop my image right here so home page this is my open graph image drag and drop yeah so from 300 kilobytes well we went all the way down to only 33 kilobytes let's download and replace our new og image so save as and og image let me close this wacom pane oj image save replace yes let's go back to the web flow let's click on save so we apply these changes and then let's click on assets and let's see folders we have our home page let's expand these so home page and i'm gonna click upload and i will upload my open graph image right here now once this is uploaded you can hover and click on this cog wheel and choose click on this external link which will open up your image in a new tab but lately webflow also added to copy the asset link to clipboard so i'm gonna copy my my asset link to the clipboard i'm gonna exit my assets panel and i'm gonna go to my page settings and where it says open graph image url i'm going to paste it right here wonderful let's save let's publish our changes and do for the last time one more google white house owed it so let's wait a second voila we have our company so that's why it's super important guys to make sure you do optimize your site as you are building out your webflow project so in today's episode we've been introduced a new html tag which is section and we also talked more about embed svg code we saw how to control the color we know how to control the opacity and we also know right now that ambit svg code it's not counted as a request and this means it will help us with our site speed okay so we finally also do did our very first google lighthouse audit and we managed to fix a couple of issues there we tested our website using webaim wave accessibility tool and see how accessibility software see our website and then finally finally we we we had this confit effect in our google lighthouse which kind of every time it makes me so much happy okay so guys i hope this video was super informative for you so if you have any questions remember i'm always having an faq section in my video description you'll also have all the links we have been used all the tools we'll have them inside inside the video description now finally in the next episode we are going to cover our free boxes with free features we're gonna talk more about optimizing our svg illustrations we'll start probably building more great stuff inside and if you want to if you want to simply follow my work and be in touch when the new video uploads make sure you like this button that would mean a lot to me and make sure you do subscribe and click on that notification bell now a lot of you know that that notification bell will will give you a push notification on your phone when i'm uploading my next video which will be super super soon all right thank you one more time for watching this amazing episode of optimizing a webflow site i wish you all the best love you all bye bye

Channel: Chris Tsurcanu

Views: 951

Keywords: webflow, SVG, webflow-grid, sitespeed

Id: hxbMFs2AWwk

Length: 34min 23sec (2063 seconds)

Published: Mon Feb 22 2021