speed and performance optimization technique of a website
TRANSCRIPT
0) Specify Image Dimension:
The following image(s) are missing width and/or height attributes.
http://darwintour.com.au/images/custom-images/AboutUs.jpg (Dimensions: 81 x 81) http://darwintour.com.au/images/custom-images/Blog.jpg (Dimensions: 80 x 80) http://darwintour.com.au/images/custom-images/darwin-things-to-do.jpg (Dimensions: 80 x 80) http://darwintour.com.au/images/custom-images/icon_contact.png (Dimensions: 126 x 126) http://darwintour.com.au/images/custom-images/icon_gallery.png (Dimensions: 126 x 126) http://darwintour.com.au/images/social-icons/facebook.png (Dimensions: 34 x 35) http://darwintour.com.au/images/social-icons/gplus.png (Dimensions: 34 x 35) http://darwintour.com.au/images/social-icons/pinterest.png (Dimensions: 32 x 32) http://darwintour.com.au/images/social-icons/twitter.png (Dimensions: 34 x 35) http://darwintour.com.au/images/social-icons/youtube.png (Dimensions: 32 x 32) http://darwintour.com.au/media/system/images/mtk.png (Dimensions: 105 x 18) http://l.yimg.com/os/mit/media/m/weather/images/icons/l/28d-100567.png (Dimensions: 250 x 180) http://l.yimg.com/os/mit/media/m/weather/images/icons/l/4d-100567.png (Dimensions: 250 x 180) (4
uses)
http://v2.zopim.com/widget/images/avatar_simple_visitor.png (Dimensions: 64 x 64) http://www.tripadvisor.com.au/img/cdsi/img2/branding/socialWidget/20x28_green-21693-2.png (Dimensi
ons: 28 x 20)
Figure 1STEPS to achieve the image dimension within code
1) Defer Parsing Javascript
Under Joomla: /libraries/Joomla/document/html/renderer/head.php edit as following:
Existing code portion:
// Generate script file links
foreach ($document->_scripts as $strSrc => $strAttr)
{
$buffer .= $tab . '<script src="' . $strSrc . '"';
if (!is_null($strAttr['mime']))
{
$buffer .= ' type="' . $strAttr['mime'] . '"';
}
if ($strAttr['defer'])
{
$buffer .= ' defer="defer"';
}
if ($strAttr['async'])
{
$buffer .= ' async="async"';
}
$buffer .= '></script>' . $lnEnd;
}
New code portion:
// Generate script file links
foreach ($document->_scripts as $strSrc => $strAttr)
{
$buffer .= $tab . '<script src="' . $strSrc . '"';
if (!is_null($strAttr['mime']))
{
$buffer .= ' type="' . $strAttr['mime'] . '"';
}
if (1) // ALWAYS DO …
{
$buffer .= ' defer="defer"';
}
if ($strAttr['async'])
{
$buffer .= ' async="async"';
}
$buffer .= '></script>' . $lnEnd;
}
3) Leverage Browser Caching:
4) Optimize Image (Lossless Compression):
It showed 18% with following list of suggestions:
Optimizing the following images could reduce their size by 731.3KiB (33% reduction).
Losslessly compressing http://darwintour.com.au/images/HomePage/Uluru_Tours_-_Uluru_Pink_Sunset.jpg could save 549.6KiB (96% reduction). See optimized version
Losslessly compressing http://darwintour.com.au/media/system/images/mtk.png could save 48.7KiB (95% reduction). See optimized version
Losslessly compressing http://darwintour.com.au/images/HomePage/Darwin_Tours_-_Litchfield_Tours.jpg could save 28.7KiB (34% reduction). See optimized version
Losslessly compressing http://darwintour.com.au/images/HomePage/Alice_Springs_to_Darwin_Tours.jpg could save 16.3KiB (28% reduction). See optimized version
Losslessly compressing http://darwintour.com.au/images/custom-images/AboutUs.jpg could save 14.4KiB (87% reduction). See optimized version
Losslessly compressing http://darwintour.com.au/images/custom-images/Blog.jpg could save 12.5KiB (86% reduction). See optimized version
Losslessly compressing http://darwintour.com.au/images/custom-images/darwin-accomodation.jpg could save 12.5KiB (80% reduction). See optimized version
Losslessly compressing http://darwintour.com.au/images/custom-images/darwin-things-to-do.jpg could save 12.5KiB (79% reduction). See optimized version
Losslessly compressing http://darwintour.com.au/images/HomePage/kakadu_tours.jpg could save 9.1KiB (16% reduction). See optimized version
Losslessly compressing http://darwintour.com.au/images/HomePage/Darwin_to_Alice_Springs_Tours.jpg could save 6.1KiB (12% reduction). See optimized version
Losslessly compressing https://pbs.twimg.com/profile_images/1598598949/daniel_merrett_normal.jpg could save 5.5KiB (78% reduction). See optimized version
Losslessly compressing https://pbs.twimg.com/profile_images/2847223109/7b5263517d70836340d5a59daaa1d3fc_normal.jpeg could save 5.2KiB (74% reduction). See optimized version
Losslessly compressing http://darwintour.com.au/templates/yoo_subway/images/background/default/background.jpg could save 4.8KiB (1% reduction). See optimized version
Losslessly compressing http://darwintour.com.au/images/HomePage/Darwin%20Tours%20-%20Cullen%20Bay%20Marina.jpg could save 2.0KiB (5% reduction). See optimized version
Losslessly compressing http://darwintour.com.au/images/HomePage/Darwin_Tours_-_jumping_crocodile_tours.jpg could save 1.1KiB (3% reduction). See optimized version
Losslessly compressing http://darwintour.com.au/images/custom-images/icon_contact.png could save 960B (50% reduction). See optimized version
Losslessly compressing https://www.tripadvisor.com.au/img/cdsi/img2/branding/150_logo-11900-2.png could save 849B (40% reduction). See optimized version
Losslessly compressing https://static.tacdn.com/img2/ratings/traveler/ss4.5.gif could save 90B (16% reduction). See optimized version
Losslessly compressing http://darwintour.com.au/images/social-icons/facebook.png could save 87B (11% reduction). See optimized version
Losslessly compressing http://darwintour.com.au/images/social-icons/twitter.png could save 61B (7% reduction). See optimized version
Losslessly compressing https://static.tacdn.com/img2/ratings/traveler/s4.5.gif could save 32B (6% reduction). See optimized version
Losslessly compressing https://www.tripadvisor.com.au/img/cdsi/img2/branding/socialWidget/20x28_green-21693-2.png could save 32B (3% reduction). See optimized version
Losslessly compressing http://darwintour.com.au/images/social-icons/gplus.png could save 3B (1% reduction). See optimized version
I looked at the folders of Images from the above lists:
STEP: Open compressor.io tool (online) to do lossless compression.
FINALLY REPLACE THE IMAGES AT THE SERVER WITH THE NEW IMAGES WITH SAME NAME (NEW FILE NAMES ENDED BY _compressed AT END. DON’T FORGET TO DELETE THAT POSTFIX.
5) Enable GZIP compression: Include at .htaccess:
<IfModule mod_deflate.c>
# Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
# Compress all output labeled with one of the following MIME-types
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/plain \
text/x-component \
text/xml
</IfModule>
</IfModule>
6) Leverage Browser Caching: By including the following at .htaccess, we improved its value from 29 to 72!
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##
PITFALLS1)
2) For the same reason as above (external plugins mainly social networking plugins):
FINAL RESULT
