Modern Web Design, Loading Times & SEO
Wednesday, 04-01-23, Nick Zoumpoulis
When it comes to web design, the options and technologies we can make use of are more than enough. Modern graphics, Full width images, sliders, Parallax blocks and much more, allow us to compose a very good and balanced result. Apart from the styling part, a very basic component is the ease of use, in terms of navigation, and the well-structured environment, aka. UI (User Interface). A well-structured UI can make virtually any webpage a real success story, offering ease of use, ease of access to information, and low loading time speeds. Most of the times, this is the biggest challenge. Good Loading speeds encourage visitors to stay more time and they are equally helpful for search engines as well. This makes perfect sense since 2 years ago, Google's algorithm has moved to mobile devices when Google officially went Mobile First! The tests that are carried out, which essentially set the ranking of our website in the search engine’s lists, are both multifaceted as well as multilevel, while the reference point of mobile internet speed is 3G, rather than 4G.
So, how can we achieve modern, and at the same time very fast loading times, to have the ideal balance?
Here is the key. Most websites, at the moment, are based on well-known and successful Content Management Systems. Examples are the very good WordPress, Joomla, Drupal, Magento for e-shop solutions, OpenCart, and many more. Each, with its pros and cons, provide complete solutions for building websites of any type and offer a very good solution for modern web development. We have encountered very good examples of corporate web presentations, portals and e-shops that make use of these CMS and one of the things we noticed is the loading times. This was exactly the reason why we proceeded with the construction of our own management system and graphics, trying to keep the visual level very high, but also the loading times very low.
Tools to measure webiste speed
There are several measurement tools that, in addition to speed, measure the quality of code, the volume of the actual content of the website (titles, texts, etc.), their quality of the latter, as well as many many other things. All the above are criteria that are used in their final analysis and indicate whether the end- result is very good, satisfactory, or unfortunately poor. We make use of three main tools for our analysis. The well-known, official Google tool, Lighthouse Test provided also via Google Chrome, the very successful GTmetrix tool, as well as the excellent Nibbler.
Focusing on visitor’s environment, aka. Front End, we do our best to achieve very high scores on all 3 tools, and we succeed. How? By using the well-known Bootstrap framework in its latest version, loading as few external JavaScript libraries as possible, trying to achieve everything we want (effects, graphics, navigation) based on our original framework, loading all the photos below the folding point asynchronously and only when they in the viewport, focusing on minification techniques, making use of the latest version of PHP, and much much more. Unfortunately we could not list all our arsenal here.
Exceptional examples are the website you are currently navigating, www.tersus.gr, and www.lavabeads.gr, which all achieve very high scores on all tools, as well as constantly growing rankings in Google search engine. Organic of course and non-payed.