Status: work in progress 🚧
With the new unibright.io being released on the 3rd of January, I figured I should take a look under the hood to see if there is any room for improvements. Especially in terms of performance. After all, if the Unibright site performs optimally this might attract more visitors and therefore more potential clients!
Anyhow, the goal of this review is to address all shortcomings in a constructive way so that the Unibright team can filter out the quick wins and optimise the website where necessary.
Email: [email protected]
LinkedIn: https://www.linkedin.com/in/boyeoomens/
OS: MacOS Mojave (10.14.6)
Browser: Google Chrome 79.0.3945.88
As a general outline for the review I have used Google PageSpeed Insights together with SEO Site Checkup and additionally some best practices of my own.
As for the the PageSpeed score; this is a very good indicator to see whether the website performs optimally. It checks both desktop as well as mobile and creates an overview with all kinds of improvements. Also, it generates lists of assets that need attention and what the potential savings can be.
URL: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Funibright.io%2F&tab=mobile
| Destop | Mobile |
|---|---|
| 36 | 4 |
By simply looking at the score we can already conclude that the site definitely needs some extra attention. So, without further ado...let's take a look at the possible improvements!
I will start with the performance improvements because it plays a very big role in the overall user experience. Of course, many things shape the experience of users but nothing is more likely to drive users away than a poorly performing website.
Furthermore, performance in general is a key factor for search engines when determining the page rank. Therefore I would recommend to aim for a PageSpeed score in the 80 to 90 range. This is possible when applying the improvements as stated below.
Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive. With 66 images in total, this improvement should be considered a priority. A quick fix would be to leverage the loading="lazy" attribute. However, browser support is not that good as of yet so an alternative would be to use the LazySizes library.
More info about loading=lazy: https://addyosmani.com/blog/lazy-loading/
LayzSizes library: https://github.com/aFarkas/lazysizes
Browser support: https://caniuse.com/#feat=loading-lazy-attr
Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. As mentioned above, we are dealing with quite a few images and looking at the size of some of the PNG's I would definitely recommend to use a different format.
Serve images that are appropriately-sized to save cellular data and improve load time.
Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes.
If enabled correctly, this improvement can truly be a quick win. A good example of how to turn on gzip for Apache can be found here.
Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.
Remove dead rules from stylesheets and defer the loading of CSS not used for above-the-fold content to reduce unnecessary bytes consumed by network activity.
theme.css Size: 285 KB Potential savings: 254 KB
Minifying JavaScript files can reduce payload sizes and script parse time.
Optimized images load faster and consume less cellular data.
Search engine optimization is important for the success of any online business.
Implementing strong, quality SEO on a brand’s website and digital properties is always going to be beneficial to that brand and its marketing efforts.
The page title currently is Home | Unbright IO. IMHO this could be more descriptive. For example: Unibright - Blockchain Based Business Integration. Including keywords (like business, blockchain and integration) in the page title can improve your overall page ranking as well.
<!-- Current title -->
<title>Home | Unibright IO</title>
<!-- Improved title -->
<title>Unibright - Blockchain Based Business Integration</title>The meta description tag is missing from the page. This tag should be included in order to provide a brief description of your page which can be used by search engines. Well-written and inviting meta descriptions may also help click-through rates to your site in search engine results.
<!-- Current description -->
<meta name="description" content="">
<!-- Improved description -->
<meta name="description" content="Unibright makes it easy to integrate Blockchain technology into existing business"><h1> headings help indicate the important topics of your page to search engines. While less important than good meta-titles and descriptions, <h1> headings may still help define the topic of your page to search engines. I would recommend to encapsulate the text “Blockchain Based Business Integration” below the logo in a <h1> tag.
<!-- Example 1 -->
<h1>Blockchain Based Business Integration</h1>
<!-- Example 2 -->
<h1><span class="sr-only">Unibright -</span> Blockchain Based Business Integration</h1>In the 2nd example I have added "Unibright -" encapsulated by a <span class="sr-only"> meaning that it should only be visible for screenreaders.
This file can protect private content from appearing online, save bandwidth, and lower load time on your server. A missing "robots.txt" file also generates additional errors in your apache log whenever robots request one.
I would recommend to include a properly styled 404 page, since the current 404 page is not really user friendly. An example can be viewed by clicking this link.
The favicon in the <head> has not been referenced correctly. It points to https://unibright.io/themes/unibrightio/assets/public/images/favicon.png, but this image does not exist.
Also, it might an idea to include touch icons (for mobile devices) as well. An online service that I personally always use to generate these icons is https://realfavicongenerator.net