The purpose of this chapter is not to discourage non-programmers from taking up digital marketing as a career. My purpose of writing this chapter is to enable you to understand, how digital marketing starts even before actual website development.
There is something called page loading speed, that is one of the many parameters used by Google for ranking. Code optimization should be used for making pages sleeker and faster to load. To check the Page Speed Factors there is an online tool by Google, Page speed Insights. In this site you will get all the factors of page like CSS and JavaScript Optimization.
To understand the dynamics of code optimization in digital marketing first understand how a website loads. There is something called the DOM tree of a website. DOM stands for Document Object Model.
Simply put:
“DOM defines the logical structure of documents and the way a document is accessed and manipulated. “
In a website there will be multiple web pages. E.g. Home, Contact Us, Products, and so on.
The DOM Tree of a webpage defines which functions will be loaded first and a priority is assigned. Once all the lines of code are executed the page is loaded on the browser.
The easier and simpler is the code, faster will be page loading speed. This should be kept in mind while designing pages. I will list down all the factors and explain them simultaneously:
- Render-blocking JavaScript and CSS
First understand the role of JavaScript and CSS in a website.
JavaScript enables user interaction with the webpage and CSS is responsible for design of the webpage.
In the main PHP file of a website, the JavaScript and CSS codes are called externally. It means that these codes are written externally and called in the main program. So for the page to load completely, these external codes need to be executed which increases p[age loading time.
So it is advised that some CSS codes that are very essential for page design should be written within the main program and not externally.
The same goes for JavaScript as well.
- Minify CSS and JavaScript
CSS and JavaScript codes are written with line spacing and required formatting. Minifying CSS and JavaScript means to write the codes without any formatting.
E.g.
The image above shows CSS code with proper formatting and line spacing. However, this format is important for troubleshooting and debugging, but once you are sure that no more changes are to be made, CSS codes can be minified by leaving unnecessary spaces. It is advisable to keep a copy of the CSS code before minifying it. There are tools available for automatically minifying the codes.
- To minify HTML,try HTMLMinifier
- To minify CSS,try CSSNano and csso.
- To minify JavaScript,try UglifyJS. The Closure Compiler is also very effective. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.
- Image Optimization:
In a website, images form a crucial part. Without images the website will look dull. However, there are times when a very high resolution image is used for a small area. The point is why to keep the image resolution very high when not needed. There are online tools available that can reduce the image size without apparently reducing the quality.
Here is an example:
Image 1
The image above (Image 1) is of 2.2 MB, which is too large and useless. It is used in a website where a smaller resolution image will suffice.
Now I am using an online tool, Optimizilla where this image is uploaded and then the optimized image is downloaded and then uploaded in the site by replacing the larger size image.
Image 2
The image here is of around 580 KB but there is very less visible difference. This needs to be done with every image for faster page loading.
Here is a question that I hear quite often and I would like to share with you!
Do we have to minify, remove rendering and download all the oversized images and optimize them manually?
The answer is no! Take a look at this awesomest (an intended exaggeration) thing.
You can visit this awesome link, enter your website name and see the magic happen.
You can download all the optimized resources and replace them in your server. But don’t forget to keep a copy lest any problem arises later on.
Some other steps that you can take for technical SEO is, you can take is install a Cache Plug-in.
What is the role of this plug-in?
First of all these plug-ins are available for WordPress sites. So for a custom project you have to take care of this programmatically.
(At present I am not aware of the techniques for custom project. Your suggestions in the comments regarding this will be appreciated.)
Coming back to the question, the cache plug-in will store a copy of your website in the browser of the site visitors and next time when they access your site, pages will load faster as they are loaded from the cache memory of the browser. Thus, giving your website an upper hand as compared to those who don’t use this plug-in.
Please comment your questions below and I will be more than happy to answer them.
SEO Engineer 