Author Topic: [tutorial] how to speed up your site step by step (Read 5770 times)

design · « **on:** March 26, 2014, 04:42:28 am »

please follow this thread, it is a learning curve for everyone to benefit. consider beta testing

though it will be starting in the middle of a PM to several osclass gurus

from emanwebdev:

toooo many BLOCKING JS scripts..... 
coz out of the box, Osclass load them in the header (VERY common mistake all over the web)

hit /oc-load.php in the root 

replace 

Code: [Select]

osc_add_hook('header', 'osc_load_scripts', 10);

with

Code: [Select]

osc_add_hook('footer', 'osc_load_scripts', 10);

at last response from me.

Quote

I did this part already
http://forums.osclass.org/development/js-over-css/

I think a good thread would be to determine what js is needed for front-end and what is needed for the admin. themes these days are so frankensteined together, it's hard to tell what script goes where, and some themes will brake if the scripts are loaded in the footer. I have been slowly making html5 without incident in the function of the site (that I know of)

this is my very common header for most osclass themes:

Quote

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<meta name="title" content="" />
<meta name="description" content=" " />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="Fri, Jan 01 1970 00:00:00 GMT" />
<meta property="og:site_name" content="">
<meta property="fb:admins" content="2">
<meta property="og:image" content="http://www..com/oc-content/themes/bootsnap_classic/images/icon250.png">
<script type="text/javascript">
var fileDefaultText = 'No file selected';
var fileBtnText = 'Choose File';
</script>
<meta name="generator" content="Osclass 3.3.2" /><link href="http://www..com/oc-content/plugins/popular_ads/pop_ads_style.css" rel="stylesheet" type="text/css" /><link href="http://www..com/oc-content/themes/bootsnap_classic/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://www..com/oc-content/themes/bootsnap_classic/css/style.css" rel="stylesheet" type="text/css" />
<link href="http://www..com/oc-content/themes/bootsnap_classic/css/style-responsive.css" rel="stylesheet" type="text/css" />
<link href="http://www..com/oc-content/themes/bootsnap_classic/css/item-carousel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www..com/oc-includes/osclass/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www..com/oc-content/plugins/watchlist/js/watchlist.js"></script>
<script type="text/javascript" src="http://www..com/oc-content/plugins/location_required/jquery.metadata.js"></script>
<script type="text/javascript" src="http://www..com/oc-includes/osclass/assets/js/date.js"></script>
<script type="text/javascript" src="http://www..com/oc-includes/osclass/assets/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www..com/oc-content/themes/bootsnap_classic/js/jquery.uniform.js"></script>
<script type="text/javascript" src="http://www..com/oc-includes/osclass/assets/js/tabber-minimized.js"></script>
<script type="text/javascript">var watchlist_url = "http://www..com/index.php?page=ajax&action=custom&ajaxfile=watchlist/ajax_watchlist.php";</script> <script text="text/javascript">

$.datepicker.regional['custom'] = { // Default regional settings
      closeText: 'Done', // Display text for close link
      prevText: 'Prev', // Display text for previous month link
      nextText: 'Next', // Display text for next month link
      currentText: 'Today', // Display text for current month link
      monthNames: ['January','February','March','April','May','June','July','August','September','October','November','December'], // Names of months for drop-down and formatting
      monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // For formatting
      dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], // For formatting
      dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], // For formatting
      dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa'], // Column headings for days starting at Sunday
      weekHeader: 'Wk', // Column header for week of the year
      dateFormat: 'dd/mm/yy', // See format options on parseDate
      firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
      isRTL: false, // True if right-to-left language, false if left-to-right
      showMonthAfterYear: false, // True if the year select precedes month, false for month then year
      yearSuffix: '' // Additional text to append to the year in the month headers
};
</script>
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<script type="text/javascript" src="http://www..com/oc-content/themes/bootsnap_classic/js/jquery.maphilight.min.js"></script>
</head>

pretty sad most of those scripts aren't used on the home page!

this is my optimized htaccess, I hope to hear from Eric on if this truly is optimized for osclass:

Quote

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</IfModule>

#####################################
# SEVERAL USEFUL FIXES

# Make sure IE9 looks good as well
BrowserMatch "MSIE 9.0" ie9
header set X-UA-Compatible "IE=Edge,chrome=1"

############################
# BROWSER CACHING

# The expires module controls the Expires and Cache-Control headers.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 year"
</IfModule>

strata · « **Reply #1 on:** March 26, 2014, 05:28:43 am »

Nice share and the classic way to speed up my site even this site on shared hosting:
- Using sprite for icon image
- Compress css and js
- move js to footer
- unload not used script on homepage, search page, item page, and user dashboard
- compress content with gzip

but if you have more money, find good hosting and using vps

design · « **Reply #2 on:** March 26, 2014, 07:27:05 pm »

I do have money, but that is the thing, when someone is first creating this site, it would make sense to have on shared hosting (cost effective) while fine tuning the site while there are very few visitors, before going to vps/dedicated/semi dedicated. I've been working on mine 5 months now, and I topped my visitor count yesterday at just over 200. I am starting to pick up 20-30 more per day, and I will be going to the faster server soon. In the meantime, this is very good information and good web "practice", and for future theme developers.

please also note that header is from view page source not header.php

design · « **Reply #3 on:** April 01, 2014, 01:46:24 am »

changed permalinks to category_id so I can at least keep the items title in the url
now loading in 2 seconds

keerthi · « **Reply #4 on:** May 03, 2014, 09:52:08 pm »

@ design the problem with changing scripts to footer is i could not upload image in item-post page and the city auto-suggestions does not work.
The site has speede up. but not at the cost of these.

design · « **Reply #5 on:** May 08, 2014, 11:59:14 pm »

sigh...choose wisely. I still believe that Id rather make user happy before I make google/search engines happy.

Osclass forums

News:

Author Topic: [tutorial] how to speed up your site step by step (Read 5770 times)

design

[tutorial] how to speed up your site step by step

strata

Re: [tutorial] how to speed up your site step by step

design

Re: [tutorial] how to speed up your site step by step

design

Re: [tutorial] how to speed up your site step by step

keerthi

Re: [tutorial] how to speed up your site step by step

design

Re: [tutorial] how to speed up your site step by step