Since the emergence of the Internet, the average size of files has grown steadily. What was once kilobyte, has now become megabytes (yes, plural), and files are still rising.
Although this phenomenon, at first glance, does not seem troubling, the still impact of performance and maintenance of websites is terrible. Add old devices, flow restrictions, and slow loading …. and there is an even bigger problem. Fortunately, we have a control over the size of our files and the way our pages are visually processed in browsers. This control gives developers the ability to ease the problem and optimize the code.
Why not bother at all?
I fully understand the lack of interest, especially now, when most internet connections are relatively fast. You say, if everything works well, why should we be bothered with SEO at all?
The performance and optimization of a web site is much more than the fact of how quickly content can be downloaded. There are several SEO and UX benefits, not to mention the fact that the reduction of the SEO code further reduces the flow costs and reduces the flow and user utilization (think of the ISP (internet service providers) and the restriction of the transfer of a certain amount of data in a given period).
Modularity is the first step
The modular code usually adds a size in the form of multiple options. Here, we want to see the modularity as a combination of as many basic pieces of code as possible. If we can combine two CSS classes into one, and with less code to get the same result, then we should do it.
Modularity does not play an important role when it comes to basic HTML and CSS, but when you enter the complex world of JavaScript, too much scope can adversely affect everything – especially on mobile devices.
Minimize HTTP and dependent requests
Addiction requirements are the biggest factor in slowing down the page loading speed. Any additional requirement adds another layer of complexity to the process of processing and visual representation of the pages. Sometimes we forget that the images we call from our stylesheets are counted, so try to limit their use and work with alternative optimization methods, such as sprints or SVG.
While talking about external dependencies, if your web site is large enough to handle several requests … maybe it’s time to start using CDN. Using CDN to distribute your content will not reduce file size and / or loading time as much as it would do to remove any additional HTTP requests, but it can remove server connections from the equation.
Basics of code in the production environment versus the development environment
There must be a very clear difference when comparing code bases in development and production. Only this step can sometimes mean the greatest reduction in the size of the files.
Today, designers often talk about their environment in “production” or “development”, especially on large projects, but it is also very useful for smaller ones. The biggest difference between the two environments can be seen in the compression of images and compression / minimization of the code. In the end, the goal is to make the production as clean as possible and faster. The same applies to the development environment, but without image compression / optimization code.
With the use of built-in tools such as “Save for Web” compression of Photoshop, you have a great starting point for the images. There is much that can be learned and used, such as converting image formats, compression algorithms, quality control and best practices.
If we talk about the code, the best use of compression depends on the language you are working with. It is also debatable whether the compression of the code helps or hinders other programmers who are trying to understand someone else’s code. When it comes to basic HTML and CSS, I use the html compressor on Google and the YUI compressor for CSS.
Write smarter and respectful code
Sometimes the code we are writing is the slowest link in the chain. Inefficient CSS, or inflated JavaScript, can affect the time of loading worse than you think. This Mozilla announcement explains in detail the importance of writing clear CSS selectors, and explains how browsers visually process. In summary, registering the same path along the chain of selectors is much less effective than the use of smaller, unique and recognizable selectors. Both lead the style to the same element, but the latter is much faster.
JavaScript can be even worse than poorly written CSS, and unfortunately, it is often overlooked. How many times have you copied and inserted an external JS library into your project, without looking at the source in detail? Typekit is a great example of this. When his servers give up web pages that use their fonts are defeated and require an additional 30 seconds or even a few extra time to load.
Fortunately, such events are rare, but it’s still best to call the JavaScript last, as in the case of Google Analytics. This will allow the browser to visually process the main files (CSS, HTTP requests, etc.) and display the tags, before JavaScript starts slowing things down.
Write simply HTML
To achieve the goal and write clearer CSS selectors, and to reduce the extra volume to a minimum, priority must be your effective HTML writing.
CSS resets often target all the most common elements and impose reset styles. So, even if you do not aim at the extra div, he probably slows things down by resetting his add-on and margins. Usually, one or two additional divs do not interfere with anyone, but when you start with dozens of such things, things get out of control. With the introduction of more elements in the HTML5 specification, we can all afford greater flexibility in that area.
Google likes the cleaner code
Google’s priority is to bring the Internet into shape. For your pages to get a prominent place in the search results, you must pay particular attention to the different attributes of the pages that relate to the way they are processed. Calling a lot of external resources, absurdly large images, and poorly written JavaScript can take you down to the search list and lower your site’s ratings.
All this is with the best intentions. Their search query requirements are built around good development practices. In addition, Google offers you a detailed guide to optimizing various aspects of your site for SEO – which simultaneously promotes excellent development practices.
Conclusion
When you optimize the code, you must consider the size of the files and the way they are read, from browsers, and even from people. You must also consider the use of mobile devices with many service providers that offer very limited data transfer in a unit time.
Although it will take you a long time to complete your optimization, what you get is incomparable. You’ll get better performance with browsers and mobile devices and a chance to promote a great way to work, and rank the site content higher with search engines like Google.
Next time, before you start uploading the site online, compress the images … and you’ll be surprised by the number of megabytes you can get rid of!
