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
Compress Text Based Content
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).
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.