Slow Download Page Speed Ramifications
I have on a number of occasions deserted the page offering solutions I had queried for. We human beings have a short attention span, and this is most visible on the SERPs when the page is slow to download. In the case of the Internet, speed matters whether we download a web page, an image or download video, or a pdf file.
Page Speed is dependent upon many elements or attributes that a web page comprises. Besides losing the visitors the page if not able to download within 3 seconds is bound to lose at least 50% of the visitors. This is a substantial loss and calls for a solution:
What to Do? Solutions for Slow Page Download
- Replace Animated GIFs with HTML5 Videos
- Serve Images in Next-Gen Format
- Efficiently Code Images (Specify Height & Width)
- Reduce Initial Server Response
- Eliminate Render Blocking Images
Animated GIFS though are interactive and effective but slow down the page speed and require uninterrupted Internet connectivity. It is better to convert them to HTML 5 Videos or replace them entirely with videos. Remember images take up nearly 21% of a web page weight.
Unlike the next-gen image formats like PNG and JPG GIFs cannot be compressed (they accept only lossless compression) hence only a milli-second image can blow out to a size of many megabytes. Slow frame rates and bad color representations are other drawbacks. Animation technology uses more storage and memory space. It uses more bandwidth.
*Lossy filter compression reduces quality and lossless filter compression requires rendering to the original on the webpage. Tools = Photoshop, FileOptimizer, or ImageOptim, Adobe Affinity.
HTML 5 Videos do not require plugins like Flash they can be effectively played on the browsers. HTML 5 Videos exhibit splendid colors, are light in weight, and offer a better experience to the visitors. 94% of video compression formats use MP4 Format. While OGG and WebM are not that popular. Autoplay and creating a loop is easy with <video> encoding in the case of HTML5.
The next-gen image formats are more popular these days, especially their compressed formats. But compress them only if they are very large and are visibly slow to download. While compression is required it may slightly mar the quality. Use Google WebM instead.
Always optimize images for a better UX Experience due to faster download. Small file size also saves on the bandwidth and the CPU Process from extra load.
The best image compression tools are Adobe Photoshop and Affinity Photo. For WordPress sites there are many plugins available for image optimizations examples:
- Imagify Image Optimizer
- ShortPixel Image Optimizer
- Optimole
- Optimus Image Optimizer
- WP Smush
- TinyPNG
- ImageRecycle
Reduce Initial Server Response
Server Response time is that taken to download the result page after the client request is made on the browser. The faster is the response the better is the User Experience (UX).
For better server response do the following
- Fast Web Hosting Service
- Use CDN Content Delivery Network
- (Close Target Audience)
- Page Should Load within 3 Seconds
Good Server Response Time
- 0-7.2 ms Blocking
- 7.2 ms to 18.3 DNS Lookup
- 25.5 ms to .7ms connecting
- 26.6 ms sending to 111.8 ms Waiting
- 138.4 ms to 0. ms receiving
- 988.0 ms DOM Loading
- 1.22s 1st Contentful
- 1.22 1st Paint
- 1.52 s onload
- 2.02s fully loaded
Best Practice for Good Page Download Speed
- Do Not Over Load WP Theme
- Delete Unused Plugins, Deactivate others not in use to reduce CPU Usage
- Use the latest PHP or the programming Language
- Minify Scripts like External files, Java Scripts and
- Configure Caching
- Cache first–process later
*Remember Static Contents download fast while dynamic contents are slow to download.
Eliminate Render Blocking Images
Render blocking resources are always in the critical path when download is taking place. They are in the header section or above the fold.
Usually the resources are:
- Image first to be downloaded
- CSS Next to be downloaded
- Java Script
Your visitors are staring at a blank while the loading is going on this is certainly going to frustrate the visitors to the website. Although there should be minimum executable files in the critical path sometimes they are unavoidable hence:
- Reduce files in the critical path i.e. above the fold.
- Optimize the image without losing the quality
- Link CSS to HTML. <link rel="style.css" href=“style.css">
- Combine all CSS Files into one and do not use the import method for the call.
- Check How Java Script is loading Use Page Insight Tool
- Insert Java Script at the bottom of the HTML away from the critical path
- Use W3 Render Cache to remove render-blocking in WP.
These are some of the suggestions please take the help of tech experts to use some of the suggestions as a webmaster. The best solution is to make a content-rich simple website with few attributes.
===========================================================================
Uday provides a search engine optimization service for digital marketing. He provides website content and content for authoritative links. He also works as SEO Content Writer for digital companies on a remote WFH basis.
He also teaches digital marketing in his home town Jabalpur. He can be contacted at:
pateluday90@hotmail.com
09755089323
No comments:
Post a Comment