Explaining SEO

{tag_blogtitle}

Tips How to Successfully Optimize Websites for the Web

gracie walters - Sunday, October 15, 2017
Tips How to Successfully Optimize Websites for the Web

When creating a website, there are several things that the front-end developer and back end developer can do to ensure that the website is properly optimized for great user experience in the many different browsers. From the design to the code, there is always something that can be done to the code of a website. When a website is properly optimized, it not only helps the user have a great experience, but optimizing a website also ensures that search engines can properly find and index the website so it can be found on the internet. When it comes to search engine results, you only have a few seconds to make an impression to website visitors. Websites that have longer loading time, and are difficult to read, will turn visitors away, as well affect the websites rankings in organic search results. There are billions of websites out there, and anyone can buy a domain then build a website using many different techniques. However, only a handful of these websites can be properly searched and indexed within search engines. By following a few simple things such as reducing image size, compressing css files, proper meta data placed in header, properly placing HTML tags, and properly placing JavaScript on the website can drastically improve the websites performance and visibility,

Reducing Image Size

Reducing image size is vital to any website, especially now that we use so many devices to access the web and its resources. When placing images on a website, the size of the image can drastically effect the load time of the website for the end users. When the end user lands on a page that is slow to load, the user will more than likely leave the website, therefore a lead, or opportunity is lost. In order to optimize images for use on webpages, it is best to keep the DPI at 72 verses 300 DPI that most cameras output when a picture is taken. Google Developers Web Fundamentals suggest that if possible use vector formatted images instead of raster images, since vector images work great with multiple devices and high resolution. (Girgorik, 2017) They also go on to explain in the same article, that it is best to serve scaled images which is to resize the image on the server. You can also use a photo editing software, such as Adobe Photoshop, to change the image properties. To use Adobe Photoshop, open the image in Photoshop, then at the top menu you will see IMAGE. When you click on IMAGE, a dropdown will appear that will allow to adjust the image size. You can set the image settings in here to the 72 DPI and change the size to the desired size. Leaving preview on will allow you to see if the size will cause the image to be distorted or not. This will help the image keep more of the natural look, rather than a pixelated image that is harder to see the message that is trying to be sent. Failure to properly size the images and resolution also decreases the chances of the webpage showing in higher rankings of search results for search engines, such as Google, Bing, and Yahoo. Google has been moving towards mobile friendly website ranking for years. These updates to search results from Google are measured in hundreds of ways, which performance and quality being at the top of the list in regrades to search engine ranking factors.

Compressing CSS & JS Files

Cascading style sheets (CSS) define the look and feel of websites. Often when a webpage is slow to load, one of the things to check the CSS files that are attached to the website. Commonly found in the CSS folder, you should only see one or two, depending on the intent of the website. These stylesheets play a big role in how the website performs for web browsers. In order for the stylesheet to be included in the website, it must be added, or linked within the HTML file of the website. The HTML file is the first file that the server sends to the browser for user viewing. The browser then sends request for the images files, CSS files and any other file that is related to that webpage. If you were to place the CSS in the head of the website after the TITLE tag, along with the rest of the HTML code and JavaScript code, the server would only be downloading one large page that will increase the wait time for the end user, resulting in once again, a lost lead. To get around this, the best method is to create a CSS file with the properties that you need, in a separate file. The file name will end with the .css to identify it as the cascading stylesheet. This method will allow you to link the file in the head of the HTML file, reducing the file size. Doing so allows the server to parse the contents of the HTML file, and the browser can fetch all the files for that page at one time (Kris Jamsa, 2014, p. 324). This will decrease the load time and increase performance of the website. You can validate your CSS at http://jigsaw.w3.org/css-validator/. Within the HTML file, most websites require JavaScript to make the website function in certain ways, depending on the intent and design of the webpage. The same rule applies to the JavaScript files. Rather than adding the JavaScript code in the actual HTML of the website, it is better to create separate file. Once the JavaScript file has been created and saved, it will have the .js at the end to also identify the file type. In order to keep the website performing well for every device and browser, it is best to follow these rules.

Compress Text Based Content

When creating a website, one page could have multiple css references that you only needed in that page. Depending on the developers’ intent for the webpage, there could be a considerable large amount of JavaScript on the page. For instance, say that you were creating a slider, or dynamic menu. These items would require more script tags placed within the HTML. All of these components are considered text based content. A large amount of text based content can cause a longer loading time for the webpage. The best away to increase the performance of the page and decrease the load time, would be to compress the text based content into a Gzip file, which most browsers support (Kris Jamasa, 2014, p. 333). Doing this can help you achieve a compression rate as 70 – 90% for larger files (Girgirik, 2017). You must make sure however that your server in configured for GZip use. In the Google Developers Web Fundamentals, it is stated that “Enabling GZIP is one of the simplest and highest-payoff optimizations to implement, and yet, many people don't implement it.”. Making this a habit can ensure that your websites are performing and loading properly for the end users. The ultimate goal for any webpage is to load quicker, with content that is useful, engaging and can be accessed by any browser.

Using Correct Layout

For the browser to properly render a webpage, the syntax has to be in to order. If the syntax of the HTML page is improperly placed, the browser may stop the rendering process (Kris Jamasa, 2014, p. 334). The CSS files need to be placed under the TITLE tag, which should be in the HEAD section of the webpage. It is also important to declare the DOCTYPE at the beginning of the syntax. The DOCTYPE tells the browser what type of syntax the website is using, for example HTML5 or XHTML1.0. When the browser has to stop the rendering process until the CSS files are located, and loaded, will increase the load time within the site. When a website is requested through the browser, the browser downloads a temporally the files of the website to a cached to a storage cache on the end users’ device disk / drive. One thing that developers and programmers can do to improve the download performance is to also avoid redirects. Although this is convent for developers to use, it also increases the download time of the website (Kris Jamasa, 2014, p. 334).

JavaScript Placement

Where you place the JavaScript files in a website, it best practice to place the script files at the bottom of the page, right after the end body tag. This method will also help improve the downloading time of the webpage which improves the performance and speed of the site. This affects the download speed, because when most browsers encounter JavaScript code, they will temporarily block parallel downloads until they have processed the code (Kris Jamasa, 2014, p. 330). The preferred method is to move and JavaScript file that does affect the rendering of the page.

 

References

Girgirik, L. (2017, May 12). Optimizing Encoding and Transfer Size of Text-Based Assets. Retrieved from Web Fundamentals: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#text_compression_with_gzip

 

Girgorik, L. (2017, July 28). Image Optimization. Retrieved from Google Developers: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

 

Kris Jamasa, P. M. (2014). Introduction to Web Development Using HTML5. Burlington, MA, USA: Jones & Bartlett Learning, LLC, an Ascend Learning Company.

 

Kris Jamsa, P. M. (2014). Introduction to Web Development Using HTML5. Burlington, MA, USA: Jones & Bartlett Learning, LLC, an Ascend Learning Company.