Have you accomplished all the qualities of a UI Developer?
Of course, you are good at HTML, CSS, and JavaScript. You are also making a very good UI with a fully responsive page, but is it enough to be counted in better UI Developers?
If you ask me the same question then I’m definitely gonna say “No”.
You may be a UI Developer but not a Good UI Developer.
The way I think the difference between being a UI and better UI Developer is only that a Good UI Developer is not only making the responsive page while they also make sure you about page quality, browser support, SEO friendly, and most importantly the Page Speed.
Because if your page does not have the performance that it can load within seconds then it will be failed to revisit the visitors.
The only reason for the failure of Orkut was Page Speed and the reason to become more successful of Facebook is again the same.
So it is highly recommended that Page Speed has a big impact to bind your visitors.
There are many online tools available to check your page speed and speed up your performance like GTmetrix. Chrome Browser also provide such kind of facility i.e. Audits (Lighthouse), using that you can improve your overall page performance like Speed, Page Accessibility and SEO. Google Chrome Audit does not self improve your page performance. It’s just a tool which instructs you to make your page performance better. So what are the steps you should follow?
Here I have tried to cover some :
1. Use Optimized Images
Using heavy size images will definitely affect your page speed.
It’s very important that all the images should be optimized and their size should not be more than 200kb. Once you have optimize all images then the next step would be use of LazyLoad.
LazyLoad boosts up the speed. But make sure, it should not be applied in your Banner Image and Header Logo, because it is the first impression in the page, which is visible. So except these you can use LazyLoad everywhere in the site.
2. Minified CSS and Java Script
Is it enough just to minify CSS and Java Script ?
Again No..!! Only minifying CSS and Java Script can not improve page speed alone.
For example, if you are using your css separately (like you have custom.min.css, responsive.min.css, and fontawesome.min.css) it seems that css is minified but number increased and that is not good as page creates a number of Requests to Server.
So you need to use a compiled-minified single css file.
Using Gulp can achieve and compose your number of CSS and JS files in one.
3. Critical CSS
Critical CSS is a technique that extracts the CSS from your whole css file and extracts CSS only for the page view which is visible in computer screen before scrolling.
Using this technique we can load our page’s first screen part(i.e. height 100vh) in just a glimpse. The extracted CSS should be placed in the <head></head> section and the rest of CSS and JS must be placed in the footer page before closing </body>.
4. @font-face
Including fonts in your website also affects the performance. Nothing much needs to be done with the font-face but a small step that increases page performance.
Just need to add one more css property when using @font-face i.e. font-display: swap;
SWAP property ensures the browser to display fonts even if your css is not loaded. If you are not using this property then there are possibilities that your page will be blank for some time and css will not be loaded due to poor server response.
5. alt and aria-label
All images in your web page must have an “alt” attribute with proper keyword which define the corresponding image and all anchor links must have an “aria-label” attribute with proper keyword which again denotes the proper meaning.
6. Sprite Image
Sprite image is nothing special but it is a simple way to reduce the number of server requests.
Suppose you have 20 images in your webpage, so here you can use sprite image instead. It creates a single image of all 20 images along with css and html.
On a side note – it works properly only for small images like icons and not for big resolution.
So if your images resolution is more than 40X40 pixel, don’t go for it.
7. Cache Plugin
Using a number of plugins is not a good idea of course.
It can also reduce page performance. But using few (not more than 4) can improve the performance. Like WP Cache Plugin, it reduces the number of server requests generated every time (when the page is refreshed).
It stores all content locally so server load can be reduced.
I always prefer to use W3 Total Cache Plugin. You can use any if you found a better plugin than this.
8. Removing Unused CSS
There may be a lot of unnecessary CSS in the page (the developer thing you know!!)
So it is best to remove unnecessary CSS. For example – if we are using Bootstrap then it contains approximately 12,000 line long CSS while we needed only few of them.
So we trace out unused CSS and remove it. Same goes withWordpress, it creates the default WP Block Library CSS which should be removed.
