Categories
Content Management

SBW Revisited Report

New Updations

  • Shop open and close indicator
  • PHP- Modularity using server-side includes
  • Contact form as an additional feature
  • Proper HTML and CSS Validations
  • Accessibility features implementation
  • Improved SEO features
  • Responsiveness, Mobile friendly implementation
  • Custom error pages

The first small business website was built using a desktop-first strategy, and it only works on standard desktop sizes. The main goal was to create a site that had a polished appearance and feel while also giving the intended audience the feel of a premium branded bakery website. The colour design for the logo was chosen to be related to the sweets. The entire page’s colour palette is based on the logo. The complete webpage layout was constructed with a suitable amount of white space and an attempt to achieve acceptable aesthetic balance after multiple iterations and re-designs.

I went with a font that is both readable and high-end. Only two font faces were used throughout the website to preserve consistency. Text colours are chosen to create a high level of contrast and legibility. Because the initial version of the small company website was almost effective in delivering the website’s stated function, I decided not to make any significant design changes. Concentrate on the most significant small content and minor design modifications and additions rather than major design changes. Even if the original copy had some flaws, such as putting an article in the footer, using a section tag instead of a div tag, putting a button inside an anchor tag, and so on. Although almost all of the photographs had alt tags, there were no decent explanatory descriptions, which was another issue that needed to be addressed. These were the most significant aspects to consider while revamping the small business website’s major edition.

Shop open and close indicator

With the aid of Java-script, I have developed an indicator as a new update that the website user will be able to understand if the Bakery is open today or not, as well as the hours of operation. This is placed in the homepage’s title area so that the user sees it first when the page loads.

PHP- Modularity using server-side includes

I used the same code for navigation, footer, header and other elements on every page of the initial small company website. I used PHP server side includes for the head, header, and footer sections of the new small business revamped website to boost code reusability and make it modular. The title is supplied as a variable in the head section, along with the PHP include. Using PHP includes for a smart navigation menu in the header allowed the small company website’s other subpages to have the same and consistent menu.

Responsive Design

The website was not responsive at first, and it had troubles with different screen sizes. The revised version now has a mobile-friendly design with toggle navigation. Another issue I had was the logo showing up on mobile views, which I was able to fix by using the display: none attribute.

Breakpoints for responsiveness have been established at 1200px, 992px, 768px, and 576px, allowing for a beautiful and responsive design across a variety of devices. It was also tested on a real mobile device to ensure that the mobile layout was user-friendly and functioning.

Custom 404 page implantation

Creating a custom 404 error page with.htaccess was another time-consuming step for me. The colour scheme for Richardson’s bakery’s website now includes a custom 404 page with a link to the homepage.

Animation

I attempted to develop a small java-script based animation for the homepage banner image in order to draw the user’s attention to the image and inform him that he is visiting a bakery website. It’s also an experiment in learning how to use java-script to animations.

Summary

The design of this website was primarily focused on increasing business, user experience, and website reach. The website is largely accessed by mobile devices by the target population. The mobile-friendly responsive design will contribute to the consumers’ delight. The overall user experience will be improved by using SEO-friendly coding approaches and other accessibility strategies. Small coding errors were discovered and corrected, which helped to clean up the website and increase its general efficiency.

It is simple to design a website, but adhering to all of the concepts and theories I have studied thus far is more difficult. Things we overlook can have a big impact on a website’s functionality, performance, purpose, usability, and user experience. In order to build clean websites that fulfil all user expectations, it is vital to continue to study and refresh our skills in all essential areas of web development, including content generation, design, coding, and implementation while following to all standards. There’s still a lot to learn, and I’m doing so every day.

Categories
Content Management

Content Management

Page load speed is a UX consideration. How can we check the speed of our pages and improve it?

Page speed is always defined as the time it takes for a web page to load in a specified length of time. The page speed is also considered an important factor for the user because the faster pages always provide a better on-page User experience. Additionally, the efficiency of faster pages is highest as compared with moderate and lower speed pages. The loading speed of pages can be determined by various factors such asa server of site, image compression and total file size of a page. Therefore, the loading speed of pages is also a major concern for users. This report is going to illustrate the way for checking the speed of any pages. Moreover, suitable and possible strategies to improve the page loading speed will also be recommended at the end of this report.

Effect of page speed on User Experience

The page speed creates a huge influence on the interest and experience of the user while using a website. It has been identified that nearly half of the users of a website expects a site to be loaded in 1 or less than 1 second. However, if the loading of the website takes more speed than most of the users shift to other websites. This highlights the importance of page speed on the experience of the user. It is worth mentioning that page speed signifies the speed of a website to be loaded efficiently and show relative information regarding the search data. However, high speed of page loading helps the user to stay connected with the information shown on the website. In case, where the loading takes more time than the user tends to shift to an alternative website.

Ways to check the load speed of any page.

This section is going to discuss the ways to check the loading speed of a web page. Pingdom, Google pageSpeed, GTMetrix, Light House, Dotcom-Monitor Website Speed Test, BrowserStack SpeedLab

These are some of the most effective tools for determining a web page’s loading speed. The usability of these may now be described as follows:

Pingdom

https://tools.pingdom.com/

This tool always scans a web page and then identifies all the affective issues that are the main reason for slowing down the loading time. With the help of this particular tool, the uptime and interactions can be easily measured. Simultaneously, the page size, request number and performance grade can also be cracked on a web page by this tool which helps developers to take the necessary steps to increase the loading speed. Based on this particular tool 1.55 seconds is the suitable loading speed of a page.

Google pageSpeed

https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect

This particular tool is owned by Google which takes the evil of a web page and performs a few tests to analyse the loading speed of it and send it to the developer. It is an open-source and free tool that always helps to analyse the overall performance of a web page. The proper identification of low page loading issues can also be performed by this tool with the help of real-world data andthe Chrome User experience report dataset. Based on this particular tool 0-2 seconds is the suitable loading speed of a page.

GTMetrix

https://gtmetrix.com/

GTMetrix is a page speed and performance analysis tool. It provides Pagespeed and WiSlow scores and generates scores for our pages. It’s a free application that we’ve discovered may be used to generate thorough information regarding the performance of a website. It assigns scores to the pages and makes ideas for how to improve them.

Light House

https://developers.google.com/web/tools/lighthouse

Google Lighthouse is a free, open-source tool for improving the speed, performance, and overall experience of your website. It’s easier to improve the quality of your web pages when you generate Lighthouse reports. Lighthouse is also an automatic tool for analysing a website’s performance. Lighthouse, on the other hand, is used with Google Chrome’s DevTools. Because everything is in one tab, it’s easier and faster to check a website’s performance figures, test for improvements, and make changes.

Dotcom-Monitor Website Speed Test

https://www.dotcom-tools.com/website-speed-test

The Dotcom-Monitor website speed test tool analyses websites from various geographic areas at the same time, which is ideal for marketers that want a deeper understanding of their worldwide website performance. Every location examined comes with a detailed report, and performance data show which components of your website are the fastest and slowest.

BrowserStack SpeedLab

https://www.browserstack.com/speedlab

In this group of page load speed testing tools, BrowserStack SpeedLab is unusual in that it delivers load times for many browsers and devices. To boost accuracy, it uses BrowserStack’s Real Device Cloud to assess webpage speed.

Strategies to improve the page load speed

After analysing all the cause factors of low page loading speed and its impact on the User experience, this section is going to discuss a few improving strategies. The main purpose of all these strategies is to enhance the page loading speed. Therefore, all those strategies can be discussed as-

Strategies to enhance the loading speed of a page

Selection of performance-optimized hosting

The performance can be measured by the loading speed of a page. In order to get a minimal monthly rate a certain number of web developers usually choose mediocre hosting. This mediocre or cheap hosting cannot share necessary resources between a server and multiple webpages, ultimately increasing the overloading rate of a server and straining up the loading times. Therefore, the selection of performance-optimized hosting always provides a designed powerful platform that reduces the chances of webpage draining. The decrease of website draining usually enhances the resource sharing between webpage and server which develop the loading speed and that can be measured by the Time to First Byte (TTFB) tool.

Compression and optimizing images

Images always enhance the webpage appearance along with the quality of content. However, the presence of large images in web pages is also a major reason for delaying loading time, and the metric for measuring such incidents is DOM processing time. In order to resolve this issue, compressing and optimizing large images is the best way to increase loading speed. This particular way changing of file format, enables lazy loading and then compresses large images by lossless compression. Additionally, the use of WP Smush plugins also performs this optimization by reducing the weight and file size without affecting the quality of the web page. It has been identified that with the help of this particular strategy the loading speed of a page always increased from 25% to 80%.

Reduce redirects

The presence of various redirects always prolongs the HTTP request and its response process which ultimately increases the loading time. In the case of moving to another domain, the presence of unnecessary redirects, and unnecessary plugins make the page loading time lower significantly. Therefore, reducing the number of redirects from the webpage with the help of a redirect mapper tool can build strong internal links between two different domains. Additionally, it also makes both domains the top-level domain (TDL) which ultimately develop the page loading speed.

Enable Browser caching

Browser caching can be considered the most effective way of caching the leverage of web pages which improve the page loading speed. This technique always enables a browser to save various types of information such as stylesheet JavaScript files and images efficiently. This efficient storing of effective information eliminates the necessity of reloading the entire page at every time. Moreover, the particular way also employs cache preloading that maximizes the page loading speed by creating lightning-fast loading time. WP Rocket is the premium plugin that always performs this browser cache enabling aspect which can improve the loading speed hugely.

Use of asynchronous CSS and JavaScript files

Web pages are always made with several CSS and JavaScript files. Based on the loading of these files the loading speed of the entire page is always measured. The synchronous loading of a page always loads all the files once at a time based on the storing sequence. For this, the browser often encounters all those files and scripts which stop the loading of major elements on the page. That’s why web developers should use asynchronous loading that always allows a user to load multiple files at the same time. In addition, this asynchronous process also eliminates render-blocking resources that speed up the performance and loading time of a page.

Leverage a CDN

The content delivery network (CDN) is always considered as a network of services that can improve the loading speed of a page significantly. The leverage of a CDN is always used to deliver static content copies from the server to users across the globe. This particular technique always reduces the travel distance of data requests between the browser andthe host server. In addition, this particular technique also eliminates network latency along with producing lower TTFBs that increases the loading speed of a page.

Now, it can be said that all these are the most suitable and effective techniques or strategies that can increase the loading speed of a web page which will ultimately provide a comfortable user experience.

Conclusion

Thus, it can be concluded that this entire report has been formulated based on the phrase “page load speed is a UX consideration”. Due to this reason, the effect of loading speed on user experience has been critically identified and discussed in this report. After analysing all these reasons and their impact on user experience a few mitigation strategies also has been provided in this report which will help the global web developers to improve the loading speed of their web pages.

Reference List

Asrese, A.S., Walelgne, E.A., Bajpai, V., Lutu, A., Alay, Ö. and Ott, J., (2019) March. Measuring web quality of experience in cellular networks. In International Conference on Passive and Active Network Measurement (pp. 18-33). Springer, Cham.

Abazari, A., Monsef, H. and Wu, B., (2019) Coordination strategies of distributed energy resources including FESS, DEG, FC and WTG in load frequency control (LFC) scheme of hybrid isolated micro-grid. International Journal of Electrical Power & Energy Systems, 109, pp.535-547.

Budiman, E., Puspitasari, N., Wati, M. and Widians, J.A., (2019) July. Web performance optimization techniques for biodiversity resource portal. In Journal of Physics: Conference Series (Vol. 1230, No. 1, p. 012011). IOP publishing.

Chen, T., Drennan, J., Andrews, L. and Hollebeek, L.D., (2018) User experience sharing: Understanding customer initiation of value co-creation in online communities. European Journal of Marketing.

Analysis of User Satisfaction on Website Quality of the Ministry of Agriculture, Directorate General of Food Crops. In 2021 9th International Conference on Cyber and IT Service Management (CITSM) (pp. 1-7). IEEE.

Ula, M., Adek, R.T. and Bustami, B., (2021) Emarketplace Performance Analysis Using PIECES Method. International Journal of Engineering, Science and Information Technology1(4), pp.1-6.