PHP Authors: Liz McMillan, Carmen Gonzalez, Hovhannes Avoyan, Lori MacVittie, Trevor Parsons

Blog Feed Post

Best Ways To Optimize a Website While Using a CDN

Content delivery networks are one of the best ways to increase the speed of a website. They allow website owners to use a massive amount of resources, typically scattered throughout many regions of the world, to transfer their site’s files to their end users. When a user connects to a website using a CDN, the CDN checks to see if the file they are downloading is close to their proximity. If it is not, the file is sent to a server that is close to the visitor. This ensures that the next time a visitor from a surrounding location visits the site, they are served content from a close location. This will greatly increase the visitor’s download speed, which allows the website to load much faster. While this technology was only accessible to big businesses, providers are now able to offer much cheaper prices to small businesses and website owners. Now, every website can utilize a CDN to serve their static files. However, before placing files on a CDN, there are ways to ensure that they are in optimal condition for fast download speeds.

Optimizing Files For Optimal Download Speeds

CDN providers have ensured that their networks are optimized to the highest standards possible. While they will serve a site’s files swiftly, there are a few things website owners can do to increase the download speed of files placed on a CDN.  Whether a website is utilizing an ecommerce store for their sales or have an established application that visitors use, these practices can be employed to greatly increase downloading speeds. Websites use content delivery networks for mainly five types of files: images, stylesheets, scripts, Flash and large files meant for downloading.

Image Compression

Many images that are uploaded to the web are not properly compressed. This might not seem like an immediate concern, but saving an image for the web can greatly reduce its size while maintaining the image’s quality. In fact, <a href=”http://www.smushit.com/ysmush.it/”>Smush.it</a>, a Yahoo! owned website, offers image compression for free and it is very user friendly. Users can either upload their files or send a list of URLs to Smush.it and download the files after they are compressed. While uploading four uncompressed pictures straight from a digital camera to Smush.it, I saw an average savings of 17%. The largest savings was 20% where an image with a 598.02 KB size was compressed down to 446.38 KB.

Image Compression For Apps

Oftentimes, web applications will allow users to upload images to their servers. While this is a very convenient and popular feature, images are often uploaded without being compressed. However, many image libraries such as ImageMagick have libraries for many different programming languages. For instance, when a user uploads an image, a PHP script can use an ImageMagick library to resize and compress the image. This will allow uploaded images to scale to the website’s predefined dimensions, while reducing downloading speeds.

File Compression

Large files are often available for downloading and can include documents, videos or even company reports. While these files will not alter a site’s speed, they are often sent to a CDN for faster downloading speeds. It is a good practice to zip up any files that can be zipped. <a href=”http://office.microsoft.com/en-us/help/zip-or-unzip-a-file-HA001127690.aspx”>Microsoft</a> states that zipping a file can reduce its file size by up to 80 percent. This means that download times can be reduced by 80 percent and data transfer costs are also reduced. Many operating systems include a compression program and can be utilized for free. If a web application allows users to upload various types of files, these files should be compressed. Many programming libraries include compression functionality and should be implemented for optimal transfer speeds and storage reduction.

Use CSS Image Sprites

Image sprites are used to combine many small images into one bigger image. While this might seem like an odd thing to do, it is one of the <a href=”http://developer.yahoo.com/performance/rules.html/”>performance rules</a> set by Yahoo!. If 10 images are included in one sprite, this will reduce the HTTP requests sent from 10 to 1. This greatly increases a site’s speed and should be used in conjunction with a CDN.

Minify CSS and Javascript Files

Virtually every website utilizes CSS stylesheets and Javascript files to make their site more user friendly. While these files might not seem large, they are just another area of wasted file space. Commenting and spaces account for a large portion of the wasted space, but are essential for maintaining these files properly. However, it is possible to minify these files to greatly reduce their size. <a href=”http://developer.yahoo.com/yui/compressor/css.html”>Yahoo!</a> offers a CSS minifier for absolutely free and explains exactly how their compression works. <a href=”http://jscompress.com/”>JSCompress</a> is an equivalent free service made for Javascript files. This type of compression should be made to all CSS and Javascript scripts before they are uploaded to a CDN.

Use Subdomains to Optimize Requests

The coding standard followed by most web browsers is HTTP 1.1. This standard dictates that only two connections can be active for each hostname. This means that if a website has 10 images to be loaded, only two of them can be downloaded in parallel. However, this greatly decreases the downloading speed because more often than not, files reside on the website’s main host. Google <a href=”https://developers.google.com/speed/docs/best-practices/rtt#ParallelizeDownloads”>recommends</a> that files be split up on subdomains. For instance, a site might serve up all images from cdn1.site.com and all other CSS and scripting files from cdn2.site.com. This would allow more than two files to be downloaded in parallel because they are all being downloaded from a different hostname. It should be noted that each hostname would ideally share an even amount of the load. So if four hostnames are present, ideally, they would all have 25 percent of the needed files.

Setting a Default Cache Time

Many CDN providers will allow users to set a default cache time. This allows files that are not frequently changed, such as image logos, to be cached for a much longer time. The only issue with this is that the same file name cannot be reused until all user caches have expired. Following <a href=”http://developer.yahoo.com/performance/rules.html”>Yahoo’s best practices</a>, it is recommended that new files, such as CSS stylesheets be renamed sequentially where style1.css will be renamed to style2.css and so on. By using this practice, a user’s browser will cache the files much longer. This reduces bandwidth usage and site speed dramatically.
Small and large websites can utilize a content delivery network to make their user’s experience much better. While uploading a file to a CDN is a good start, ensuring that it is properly compressed will lower its file size and downloading time further. It is always important that websites optimize their site’s speed to further their user’s retention.
Share Now:del.icio.usDiggFacebookLinkedInBlinkListDZoneGoogle BookmarksRedditStumbleUponTwitterRSS

Read the original blog entry...

More Stories By Hovhannes Avoyan

Hovhannes Avoyan is the CEO of PicsArt, Inc.,

IoT & Smart Cities Stories
René Bostic is the Technical VP of the IBM Cloud Unit in North America. Enjoying her career with IBM during the modern millennial technological era, she is an expert in cloud computing, DevOps and emerging cloud technologies such as Blockchain. Her strengths and core competencies include a proven record of accomplishments in consensus building at all levels to assess, plan, and implement enterprise and cloud computing solutions. René is a member of the Society of Women Engineers (SWE) and a m...
DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, in New York City and will bring together Cloud Computing, FinTech and Blockchain, Digital Transformation, Big Data, Internet of Things, DevOps, AI, Machine Learning and WebRTC to one location.
In an era of historic innovation fueled by unprecedented access to data and technology, the low cost and risk of entering new markets has leveled the playing field for business. Today, any ambitious innovator can easily introduce a new application or product that can reinvent business models and transform the client experience. In their Day 2 Keynote at 19th Cloud Expo, Mercer Rowe, IBM Vice President of Strategic Alliances, and Raejeanne Skillern, Intel Vice President of Data Center Group and G...
DXWorldEXPO LLC announced today that All in Mobile, a mobile app development company from Poland, will exhibit at the 22nd International CloudEXPO | DXWorldEXPO. All In Mobile is a mobile app development company from Poland. Since 2014, they maintain passion for developing mobile applications for enterprises and startups worldwide.
DXWorldEXPO | CloudEXPO are the world's most influential, independent events where Cloud Computing was coined and where technology buyers and vendors meet to experience and discuss the big picture of Digital Transformation and all of the strategies, tactics, and tools they need to realize their goals. Sponsors of DXWorldEXPO | CloudEXPO benefit from unmatched branding, profile building and lead generation opportunities.
Founded in 2000, Chetu Inc. is a global provider of customized software development solutions and IT staff augmentation services for software technology providers. By providing clients with unparalleled niche technology expertise and industry experience, Chetu has become the premiere long-term, back-end software development partner for start-ups, SMBs, and Fortune 500 companies. Chetu is headquartered in Plantation, Florida, with thirteen offices throughout the U.S. and abroad.
The standardization of container runtimes and images has sparked the creation of an almost overwhelming number of new open source projects that build on and otherwise work with these specifications. Of course, there's Kubernetes, which orchestrates and manages collections of containers. It was one of the first and best-known examples of projects that make containers truly useful for production use. However, more recently, the container ecosystem has truly exploded. A service mesh like Istio addr...
CloudEXPO New York 2018, colocated with DXWorldEXPO New York 2018 will be held November 11-13, 2018, in New York City and will bring together Cloud Computing, FinTech and Blockchain, Digital Transformation, Big Data, Internet of Things, DevOps, AI, Machine Learning and WebRTC to one location.
@DevOpsSummit at Cloud Expo, taking place November 12-13 in New York City, NY, is co-located with 22nd international CloudEXPO | first international DXWorldEXPO and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time t...
SYS-CON Events announced today that DatacenterDynamics has been named “Media Sponsor” of SYS-CON's 18th International Cloud Expo, which will take place on June 7–9, 2016, at the Javits Center in New York City, NY. DatacenterDynamics is a brand of DCD Group, a global B2B media and publishing company that develops products to help senior professionals in the world's most ICT dependent organizations make risk-based infrastructure and capacity decisions.