Years ago, when I was just starting out in the software world, I was tasked with developing the interfaces for a new e-commerce website. The project involved creating numerous web pages, incorporating animations, effects, images, and fonts.
(Looking back, I've come to believe that using an excessive variety of fonts, colors, and effects, even for advertising and user experiences, isn't ideal. However, for now, let's focus on the main issue at hand.)
At the time, I lacked knowledge of clean architecture and web performance optimization, so the code I produced was disorganized and messy.
Nevertheless, I managed to complete the project, and the end result closely resembled the design whether the code was good or bad.
(Wow, great. I can't believe I have made this amazing one. Cool!)
And I deployed it on the Internet in order to look at the live result.
But I was shocked when I pressed Enter with the website URL on the browser. 😱
It took nearly 30 seconds for the landing page to load. I initially attributed this to the performance of the deployment platform and attempted switching platforms, but the results were equally disastrous.
I couldn't deliver this awful result to the customer but remained only a few days before the deadline.
(Oh, those days were such a blur, I can't even recall how I managed to get through them!)
I threw myself into the task, working day and night without respite.
As I toiled, I began to grasp the significance of web performance and clean code. (Yes! it truly is the heart of a website.)
I restructured the project, placing greater emphasis on optimizing SEO.
Many customers might not recognize the effort developers put into this kind of work, especially those only focused on immediate results.
However, it's crucial for customers, and for YOU!
It makes your product and service more valuable, providing you with a distinct advantage over others.
Ultimately, I delivered the refined result to the customer and was immensely proud of my work.
Luck smiled upon me unexpectedly, without a heads-up! 🌞
The customer, who was a senior software developer, found the website's performance exceptional. He expressed a desire to continue working with me, leading to more projects together.
This is a story from my past that I've encountered before.
Then let's start our journey!
1. What is the website performance?
Website performance measures how quickly the pages of a website load and display in the web browser.
Good website performance is a cornerstone of any successful website because it’s the first event that all visitors experience. First impressions influence how users feel about a website, its associated business or organization, and whether or not they convert, buy, or bounce.
There is a Golden Rule in website performance:
80-90% of the end-user response time is spent on the frontend.
For some real-world results, the average frontend time is 76%, slightly lower than the 80-90% advertised in the Performance Golden Rule.
But remember that these sites have highly optimized frontends and two of them are search pages (not results) that have very few resources.
So have you realized how the front-end development is important?
2. Strategy & Structure
The first part of improving a website’s performance and organization revolves around identifying a good strategy and structure for developing the code base. Specifically, building a strong directory architecture, outlining design patterns, and finding ways to reuse common code.
One best practice includes separating styles based on intent, which includes creating directories for common base styles, user interface components, and business logic modules.
The architecture outlined above includes three directories, all with individual groups of styles. The goal here is to start thinking of websites as systems rather than individual pages, and the code architecture should reflect this mindset. Notice how there aren’t any page-specific styles here.
3. Performance Driven Selectors
It is essential to Keep the Selectors Short.
Long, overqualified selectors reduce performance because they force the browser to render each individual selector type from right to left. They also put a burden on all other selectors to be more specific.
In the code above, the first selector is extremely specific and could be identified, and rendered, much quicker with the use of a class. Additionally, using a class in this case greatly reduces the need to identify an element’s parent, allowing that elements location to change over time without breaking any styles.
The second example includes selectors shorter than the first example but it can be improved by providing the same level of specificity to each selector. Avoid using overly specific selectors, in return they are less likely to break should the order of elements change. Cutting out some of the individual selector units, and giving all of the selectors the same strength, allows them to better cooperate.
The overall goal with short selectors is to decrease specificity, creating cleaner, more charitable code.
4. Reusable Code
One of the largest performance drawbacks comes with bloated file sizes and unnecessary browser rendering.
One quick way to help largely cut down on CSS file sizes is to reuse styles as much as possible.
Any repeating styles or interface patterns should be combined, allowing code to be shared.
If two modules share a background, rounded corners, and a box shadow there is no reason to explicitly state those same styles twice.
Instead, they can be combined, within a single class, allowing the styles to be written once and then shared.
5. Minify & Compress Files
Simply removing duplicate and unnecessary code is the best way to cut down on file size, however there are additional ways. One way includes minifying and compressing files, such as HTML, CSS, and JavaScript files. Additionally, images may be compressed, removing any unnecessary comments and color profiles.
One of the more popular types of file compression is called gzip. gzip compression.
Setting up gzip is fairly painless, and the HTML5 Boilerplate team has done a great job of getting this going.
Within the Google Chrome web browser, the web inspector gives a plethora of data around performance, particularly within the Network tab. Additionally, there are a few websites that help identify if gzip compression is enabled.
The Network tab identifies each file loaded within the browser and displays the file size and load time. Notice how gzipping has reduced the file sizes by around 60%.
Looking at the response headers identifies that the file was sent using the gzip compression encoding.
6. Reduce HTTP Requests
One way, and perhaps the easiest way, to reduce the number of HTTP requests is to combine like files. Specifically, combine all of the CSS files into one and all of the JavaScript files into one. Combining these files and then compressing them creates one, hopefully small, HTTP request.
Another way is the practice of spriting images within CSS.
To create a sprite take a handful of background images, ones that are commonly used, and arrange them into one single image. Then using CSS add the sprite as a background image to an element, and use the background-position property to display the correct background image.
Think of the background image sliding around behind elements, only to expose the proper background image on a given element. For example, if an element is 16 pixels wide by 16 pixels tall it can only expose a background image of 16 pixels by 16 pixels, with the rest of the background image being hidden.
Here is a sprite for a text editor menu, outlined with guides for reference of how the images background position will change.
Using the image sprite above, a menu can be created by using the image sprite as a background on the span element. Then, using classes to change the background position of the image sprite, different icons can be shown accordingly.
HTML
CSS
Result
7. How to Check Website Performance
1) Website Grader
Website Grader provides an aggregate performance score out of 100 which encapsulates the effectiveness of your website. Scoring factors include performance as well as SEO, mobile experience, and security.
Powered by Google’s open-source Lighthouse tool, Website Grader’s performance assessment accounts for 30% of your website score and examines key contributors like page size, number of HTTP requests, caching, and image size.
2) PageSpeed Insights
Another popular testing option for marketers, Google’s PageSpeed Insights tool assesses your website performance on both mobile and desktop devices. It provides an aggregate score from 0 to 100 and is powered by Lighthouse — a score of 80 or above is considered high-performing.
3) Pulsetic
Pulsetic is a global website monitoring tool that provides insight on your website performance including website speed, typical website maintenance, and other customizable reporting ranging from setting headers to response timeouts.
For websites with multiple languages and regions, reports will include detailed regional information like uptime and response times.
Conclusion
If you want to be a software engineer, not only a coder, you should understand the importance and power of website technologies, and also about the clean architecture of the software.
Once you've mastered these, then the success will follow you. 🌈
"The only way to go fast, is to maintain a clean and sustainable pace, which starts with clean code."
Uncle Bob (Robert C. Martin)
That's all for today, see you in another blog post! 😄
Top comments (0)